Shinji Posted September 3, 2006 Share Posted September 3, 2006 Well, here's my issue. I've got this section of my site where i have some links and its a CSS <div>. <div class="links"><a href="#">Link</a><br /><a href="#">Another</a><br /><a href="#">Another</a></div> And here is the css i have for that div .links {background : url('img\bg.jpg') repeat-x; Is there some way that i can make a different image using javascript or CSS when my mouse hovers over the section? Any help appreciated. Thanks. Link to comment Share on other sites More sharing options...
Jack McKalling Posted September 3, 2006 Share Posted September 3, 2006 Yes there is a way. :)Should this div be the only one on the page, or will there be more, and would they all have the same background? In case this is only one per page, then it can be similar to the folowing, for example. #links {background-image:url('img/bg.jpg'); background-repeat:repeat-x; <body>...<div id="links"><a href="#">Link</a><br /><a href="#">Another</a><br /><a href="#">Another</a></div>...<script type="text/javascript">var Img1 = new Image(); var Img2 = new Image();Img1.src = "img/bg.jpg"; Img2.src = "img/bg2.jpg";var myDiv = document.getElementById('links')myDiv.onmouseover = function() {this.style.backgroundImage = Img2.src;}myDiv.onmouseout = function() {this.style.backgroundImage = Img1.src;}</script></body>Note: the blue are the changes I made, the red is up to you to edit (the source of the second image) :)But this is a full javascript way of doing it, as you requested. There is also a CSS way (with less script) and I'll give it to you if you like, though it hasn't any major advantage over this one. Only the fact that the images are defined in the stylesheet, which can be better when you use those. Link to comment Share on other sites More sharing options...
Shinji Posted September 3, 2006 Author Share Posted September 3, 2006 Very cool! Thanks for not only the speedy reply but a good one too! Link to comment Share on other sites More sharing options...
Jack McKalling Posted September 3, 2006 Share Posted September 3, 2006 You're welcome, ask again any time Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now