Is it possible to swap the background image of a div using an event handler or a pseudo class like a:hover?
These were my ideas but they didn't work
css...
div#pigFace {
background-image: url("somePic.gif");
}
html...
<body>
<div id="pigFace" onMouseOver=" {
var bgImage = getElementById(pigFace).style.background-image;
pigFace.setAttribute(background-image,someOtherPic.gif');
}
">
but... nuts It appears that the onMouseOver event handler isn't even applicable to div tags. Curses! In anycase I realise that my dom referencing is mostl likely all wrong and my syntax sucks, but I hope the above will give people some Idea of what im trying to achieve. Basically I want the background image of a div to swap onMouseOver, so that there is a swapping image with text visible on top.
If I manage to do it, I'll post it up. If I can't any help would be really apreciated.oh crap - iv'e done it.... sorry for posting
div#name {
background-image:url(images/image1.jpg)
width: 150;
height: 30;
}
div#name a:hover {
background-image:url(images/image2.jpg)
}
a .button1{
width: 150;
height: 30;
}
html...
<div id="name"><a class="button1" href=http://www.webdeveloper.com/forum/archive/index.php/"#">huey lewis and the news</a></div>
or something like that..... seems to do the trickyea, use the pseudo :hover
div#name { background: url("./image1.jpg"); }
div#name:hover { background: url("./image2.jpg"); }
this does not work in IE though so you have to use a .htc file which is explained here:
<!-- m --><a class="postlink" href="http://www.vladdy.net/Demos/iepseudoclassesfix.htmlThank">http://www.vladdy.net/Demos/iepseudocla ... .htmlThank</a><!-- m --> you very much
I'll do some testing myself in a moment, but out of interest - which browsers can use the pseudo class ...:hover for tags other than <a>?
I guess it's always possible (although not convenient) to do as I did and just put an <a> tag in there with a class, defining it's width and height to be the same as the div size.....is it?
-----edit
on a side note, I'm looking at the link you gave me now, and I'm just reading up on customising DHTML behaviors. Can these kind of scripts be run in Browsers other than I.E.?
Also, in your opinion, is it really worth me learning how to code this kind of thing. I'm not really a web designer - I'm just making my company's website. If I can learn to do it quickly I guess I will dig into it, but if it proves to be impossibly hard I might just steer clear and employ someone who knows how to do it. Do you need a job?
Originally posted by bol
Thank you very much
np
I'll do some testing myself in a moment, but out of interest - which browsers can use the pseudo class ...:hover for tags other than <a>?
i believe all but IE, go figure
I guess it's always possible (although not convenient) to do as I did and just put an <a> tag in there with a class, defining it's width and height to be the same as the div size.....is it?
that's not correct use of the anchor tag and should not be used as there is a method around it. You can do the same w/ js as the .htc file does, but you restrict some ppl from seeing it as some have js disabled. The .htc file works on all IE browsers as far as im aware
These were my ideas but they didn't work
css...
div#pigFace {
background-image: url("somePic.gif");
}
html...
<body>
<div id="pigFace" onMouseOver=" {
var bgImage = getElementById(pigFace).style.background-image;
pigFace.setAttribute(background-image,someOtherPic.gif');
}
">
but... nuts It appears that the onMouseOver event handler isn't even applicable to div tags. Curses! In anycase I realise that my dom referencing is mostl likely all wrong and my syntax sucks, but I hope the above will give people some Idea of what im trying to achieve. Basically I want the background image of a div to swap onMouseOver, so that there is a swapping image with text visible on top.
If I manage to do it, I'll post it up. If I can't any help would be really apreciated.oh crap - iv'e done it.... sorry for posting
div#name {
background-image:url(images/image1.jpg)
width: 150;
height: 30;
}
div#name a:hover {
background-image:url(images/image2.jpg)
}
a .button1{
width: 150;
height: 30;
}
html...
<div id="name"><a class="button1" href=http://www.webdeveloper.com/forum/archive/index.php/"#">huey lewis and the news</a></div>
or something like that..... seems to do the trickyea, use the pseudo :hover
div#name { background: url("./image1.jpg"); }
div#name:hover { background: url("./image2.jpg"); }
this does not work in IE though so you have to use a .htc file which is explained here:
<!-- m --><a class="postlink" href="http://www.vladdy.net/Demos/iepseudoclassesfix.htmlThank">http://www.vladdy.net/Demos/iepseudocla ... .htmlThank</a><!-- m --> you very much
I'll do some testing myself in a moment, but out of interest - which browsers can use the pseudo class ...:hover for tags other than <a>?
I guess it's always possible (although not convenient) to do as I did and just put an <a> tag in there with a class, defining it's width and height to be the same as the div size.....is it?
-----edit
on a side note, I'm looking at the link you gave me now, and I'm just reading up on customising DHTML behaviors. Can these kind of scripts be run in Browsers other than I.E.?
Also, in your opinion, is it really worth me learning how to code this kind of thing. I'm not really a web designer - I'm just making my company's website. If I can learn to do it quickly I guess I will dig into it, but if it proves to be impossibly hard I might just steer clear and employ someone who knows how to do it. Do you need a job?
Originally posted by bol Thank you very much
np
I'll do some testing myself in a moment, but out of interest - which browsers can use the pseudo class ...:hover for tags other than <a>?
i believe all but IE, go figure
I guess it's always possible (although not convenient) to do as I did and just put an <a> tag in there with a class, defining it's width and height to be the same as the div size.....is it?
that's not correct use of the anchor tag and should not be used as there is a method around it. You can do the same w/ js as the .htc file does, but you restrict some ppl from seeing it as some have js disabled. The .htc file works on all IE browsers as far as im aware