Controlling CSS through Javascript, style.backgroundImage |
Controlling CSS through Javascript, style.backgroundImage |
Anonymous |
Oct 1 2006, 08:42 AM
Post
#1
|
Newbie Group: Members Posts: 10 Joined: 8-September 06 Member No.: 91 |
CSS:
CODE a { background-image: url(b1o.gif); } JS: CODE function on() { document.getElementById('lol').style.backgroundImage = "b1ah.gif"; } HTML: CODE <a id="lol" href="#" onmouseover="on()"></a> Why isn't the rollover working? |
Christian J |
Oct 1 2006, 09:02 AM
Post
#2
|
. Group: WDG Moderators Posts: 9,688 Joined: 10-August 06 Member No.: 7 |
CODE function on() { document.getElementById('lol').style.backgroundImage = "b1ah.gif"; } That should be CODE document.getElementById('lol').style.backgroundImage = "url(b1ah.gif)"; QUOTE CODE <a id="lol" href="#" onmouseover="on()"></a> 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. This post has been edited by Christian J: Oct 1 2006, 12:35 PM |
Frederiek |
Oct 1 2006, 12:13 PM
Post
#3
|
Programming Fanatic Group: Members Posts: 5,146 Joined: 23-August 06 From: Europe Member No.: 9 |
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/
|
Anonymous |
Oct 1 2006, 12:44 PM
Post
#4
|
Newbie Group: Members Posts: 10 Joined: 8-September 06 Member No.: 91 |
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. |
pandy |
Oct 2 2006, 06:00 AM
Post
#5
|
🌟Computer says no🌟 Group: WDG Moderators Posts: 20,744 Joined: 9-August 06 Member No.: 6 |
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). |
Christian J |
Oct 2 2006, 08:18 AM
Post
#6
|
. Group: WDG Moderators Posts: 9,688 Joined: 10-August 06 Member No.: 7 |
Or if you want the onmouseover but not an onmouseout.
|
Lo-Fi Version | Time is now: 25th June 2024 - 09:09 AM |