Stupid Javascript

[Glitchy82]

I need help trying to program an image to change to another when you mouse over it. Here is what I have in my header:

Here is what I have in the place of the image I'm trying to animate:

onMouseOver="changeImg('imgHome',Home2)">
onMouseOut="changeImg('ImgHome',home1)">
 name="imgHome">

Can anyone help me?

[drakaan]

link

...from a recent discussion. CSS would be an alternative, as well (and I highly recommend it).

[Glitchy82]

Hmm, let me see that. I have a CSS doc already, but I didn't know you could produce the same effect with CSS.

[Yata]

http://www.geocities.com/boltbaits/butt ... index.html

[Glitchy82]

http://www.geocities.com/boltbaits/buttonexample/index.html

The fact that I have to do the "OnClick" code myself doesn't qualify as something I would do. I'm not really good at Javascript, and it's not that I want someone to do it for me (actually, if someone did I would appreciate it..), it's just that I would need to be in depth to know whats going on.

[drakaan]

If you go back a few pages in the thread I linked to, you'll see other links to a decent CSS-based example of how to do rollover images.

[Crazy Man Dan]

To do it CSS-like, you have to set up your links as anchors with IDs:

Home

Then you can use CSS to set it's height, width, and display image:

#homelink {
display:block; /* Required to force the anchor to accept a width and height. */
height:30px; /* This should be the height of your image for that link. */
width:130px; /* This should be the width of your image for that link */
background:url(path/to/image.png) no-repeat;
}

Then use the pseudo-class ":hover" to tell it what to do when the mouse enters its bounds:

#homelink:hover {
background-image:url(path/to/hoverimage.png);
}

You will also need to hide the text in the anchor. This is why the is in there. This example assumes you have given a class of "imglinks" to the containing element:

.imglinks a span {
display:none;
}

If you do give a class name or ID to the containing element (such as a nested table or better, an unordered list), you can consolidate the common bits into one declaration. So, say you have:

></pre>
<ul>
Home
About
Contact

If your image links are all the same height but vary in width, you can use this to style it:

(Note:I just picked random numbers to fill the width property of each link. You will have your own.)

#mainnav a {
display:block;
height:30px;
background-repeat:no-repeat;
}
#mainnav a span { display:none; }

/* Links - Normal States */
#homelink {
background:url(images/homlink.png);
width:98px;
}
#aboutlink {
background:url(images/aboutlink.png);
width:110px;
}
#contactlink {
background:url(images/contactlink.png:
width:132px;
}

/* Links - Hover States */
#homelink:hover { background:url(images/homlinkhover.png); }
#aboutlink:hover { background:url(images/aboutlinkhover.png); }
#contactlink:hover { background:url(images/contactlinkhover.png: }

Sorry about the verbose response. I rather enjoy writing this stuff.

[drakaan]

...just remember that in IE6 the :hover pseudo-class only works for anchor elements. You'll have to search for "csshover.htc" (an ugly hack if ever there was one) to make CSS-based hover behavior work in IE6 on anything other than an anchor element.

It's not a big problem if you're doing rollovers for links, but if you want to (for example) create a pop-up tooltip (that goes beyond what you can put in a "title" attribute), for en entire

, you need to keep this fact in mind.