The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> Controlling CSS through Javascript, style.backgroundImage
Anonymous
post 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?
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 1 2006, 09:02 AM
Post #2


.
********

Group: WDG Moderators
Posts: 8,206
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
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Frederiek
post 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/
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Anonymous
post 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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Oct 2 2006, 06:00 AM
Post #5


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 18,350
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).
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Oct 2 2006, 08:18 AM
Post #6


.
********

Group: WDG Moderators
Posts: 8,206
Joined: 10-August 06
Member No.: 7



Or if you want the onmouseover but not an onmouseout. smile.gif
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 19th August 2019 - 11:04 AM