I'm setting up a menu for a site, and I have a little area that I want to change an image in based on what link the mouse is over at the moment. Then, when visiting that page, I want to be able to load an image into that area based on which page is open, as the menu will be part of an include.

Is this possible?

I think it is possible.

I recommend you tak a look at the javascript at http://www.irt.org

best regards

Ole

Yeah it's possible. what are you having trouble with?

Just make sure that you do the page specific image in an event triggered by the body onLoad event and you will be fine. Otherwise the include section might not be loaded yet when you try to execute the function. And yes, this is easy...I put some image swapping code up here a while ago, you can hack that to do what you want.

Greetings!

For samples, go to Broadside Electric's web page. I helped write that, and I am certain it will help.

Thanks guys, and I'm attempting to disect that script, Paul.

Unfotunately, my JS study hasn't gone well. Work sucks and takes up time, but pays. I'll see if I can clear up a few things and do it on my own by getting some answers to these questions:

-Paul, your script is half of what I want to do. On a mouseover of the link, I want to change that link image, and I also want to change an image in an area elsewhere to a link-specific image. Then, after clicking on that image, I want the page-specific image to be applied to the link and the image area. So bascally, I want to have it do what yours does, but change two images.

-also, redbutt2 said to put an onload in the body. are you not using includes on that page, Paul? Just wondering why you didn't do this.

geez, I'm going to need to learn how to do this stuff...argh. I don't know why it's so hard for me. I just haven't seemed to be able to get the hang of programming.

Here's the thread where you posted that image swap script. I think I could figure it out, but I'm still not sure of how to make two images change with one mouseover, and then do the thing with loading the correct image into the include depending on the page.

just name the images like this:

<img src="dog.gif" name="image1">
<img src="house.jpg" name="image2">

then you can say:

onMouseOver="document.image1.src='boat.jpg';document.image2.src='car.jpg'"





Or what I'd do is this:

<div id="pic1"></div>

then in a function you can say:

pic1.innerHTML="<a href='link.com'><img src='boat.jpg'></a>";

or

pic1.innerHTML="<font size=5 color='red'>whatever</font>";


There are lots of ways you can do this, but using the <div>'s in my opinion is the cleanest and most simple.

i made an example.

I tried out that first one, and that definitely works for the image swapping on that page. Here's what mine looks like:

<img src="A.gif" name="image1" OnMouseOver="document.image1.src='B.gif';document.image2.src='D.gif'" onmouseout="document.image1.src='A.gif';document.image2.src='B.gif'">
<img src="C.gif" name="image2">

Say that there are 5 links with images like this. Now say that this link leads to something like a links page. When that links page is loaded, how do I make it so that images B and D are loaded by default. I can't just change that link to simply show those images with plain HTML, because as I said, this menu will be in an include.

I also made an example

That is what I'd like to do.

*edit*
and then, if that is the menu item for the page that is loaded, the B and D images will be loaded as the default images.

I'm not sure what an include is. I'm trying to look it up right now. But if this helps, you can change the link along with the pic:

<a href='link1' name='thelink'>link</a>

thelink.href="link2";


Does an include have something to do with like cgi?

well I'm using it to load HTML from an external file. That way, I can put my menu in one file, edit that one file, and have it used on every page.

I've got the basic page up now.

sinfonicron.dignan17.com

I scaled back a bit, used regular text for the links, and I guess I'll give up for now on the "knowing what page is loaded" thing. Right now my concern is that the image swap is so darn slow! I followed the advice on irt.org, which was to put a tag of each image to preload somewhere and give it 1x1 dimensions. But it's still slow. What can I do to speed it up?

*edit*
not all those links have image swaps yet. just a few of them.

Okay, I think I was just on a crappy computer because those images are generally loading pretty quickly for me now.

Please, can someone point me to somewhere that can show me how to do the thing to load the correct image in the menu. I'm guessing I'll have to change my method for the image swaps as well, so I just can't see how to do this.

Yeah, that looks pretty good. As for the knowing what page is loaded thing, I don't think I understand what your trying to do. Why don't you just have six seperate html files for each of the six different links? Or do you want to open the same file in each link? I have a couple of ideas, but I need to understand exactly what it is your trying to do first.

EDIT: oh yeah, and those links don't work for me. I don't know if it is supposed to be set up yet.