Printable Version of Topic

Click here to view this topic in its original format

HTMLHelp Forums _ Client-side Scripting _ Controlling CSS through Javascript

Posted by: Anonymous Oct 1 2006, 08:42 AM

CSS:

CODE

a { background-image: url(b1o.gif); }

JS:

CODE

function on() {
document.getElementById('lol').style.backgroundImage = "b1ah.gif";
}

HTML:

CODE

Why isn't the rollover working?

Posted by: Christian J Oct 1 2006, 09:02 AM

CODE

function on() {
document.getElementById('lol').style.backgroundImage = "b1ah.gif";
}

That should be

CODE

document.getElementById('lol').style.backgroundImage = "url(b1ah.gif)";

QUOTE

CODE

You shouldn't use "#" as a HREF value. Use a real URL, or put the onmouseover on some other element than a link.

Also you should specify a backup color to the image, and a foreground color that matches the background.

Posted by: Frederiek Oct 1 2006, 12:13 PM

BTW, you don't need Javascript anymore to do image rollovers. CSS can do the trick. See samples at http://meyerweb.com/eric/css/edge/

Posted by: Anonymous Oct 1 2006, 12:44 PM

Thanks, you two.

The Javascript rollover is only for "effects". There's a CSS method, too, for people who have JS disabled.
I did specify background and foreground, just not in that part of te page.
Don't worry about me, I know what I'm doing.

Posted by: pandy Oct 2 2006, 06:00 AM

Yes, but CSS can do it on its own. Why add the overhead of JavaScript?

Don't take me wrong, I have nothing against JavaScript. I just don't see the use of accomplishing the same thing with CSS AND JavaScript.' a:hover' would work for all that. Now, if you wanted to have the effect on other elements than A, then you would need JS (because of the limitations of IE Windows).

Posted by: Christian J Oct 2 2006, 08:18 AM

Or if you want the onmouseover but not an onmouseout.