Fmdpa Posted March 29, 2010 Share Posted March 29, 2010 I am attempting to create mouseover animations for a webpage using JS, but with little success. Here is the sample code I am trying to use: <html><head><script type="text/javascript">function mouseOver(){document.getElementById("b1").src ="b_blue.gif";}function mouseOut(){document.getElementById("b1").src ="b_pink.gif";}</script></head><body><a href="http://www.w3schools.com" target="_blank"><img border="0" alt="Visit W3Schools!" src="b_pink.gif" id="b1" width="26" height="26" onmouseover="mouseOver()" onmouseout="mouseOut()" /></a></body><!--second mouseover animation (or should-be-animation)--><head><script type="text/javascript">function mouseOver(){document.getElementById("b1").src ="b_blue.gif";}function mouseOut(){document.getElementById("b1").src ="b_pink.gif";}</script></head><body><a href="http://www.w3schools.com" target="_blank"><img border="0" alt="Visit W3Schools!" src="b_pink.gif" id="b1" width="26" height="26" onmouseover="mouseOver()" onmouseout="mouseOut()" /></a></body></html> My problem is that only one object is performing the animation. What code do I use to allow infinite numbers of animations on a page? Is there an alternative way to write mouseover animations?P.S. I do not care for "more convenient" methods, such as using a web design program. The main purpose of this is to learn web programming languages, and create a sample "webpage" (probably offline) demonstrating what I've learned. Link to comment Share on other sites More sharing options...
justsomeguy Posted March 29, 2010 Share Posted March 29, 2010 First, you can only have 1 head and body in your document, it doesn't make sense to have a head, then a body, then another head, then another body.You can build functions to take parameters, so you can have a function that takes an ID and an image URL as parameters, and it sets the element with the given ID to use the give image source. e.g.: <html><head><script type="text/javascript">function changeImage(id, src){ document.getElementById(id).src = src;}</script></head><body><a href="http://www.w3schools.com" target="_blank"><img border="0" alt="Visit W3Schools!" src="b_pink.gif" id="b1" width="26" height="26" onmouseover="changeImage('b1', 'b_blue.gif')" onmouseout="changeImage('b1', 'b_pink.gif')" /><br /><img border="0" alt="Visit W3Schools!" src="b_pink.gif" id="b2" width="26" height="26" onmouseover="changeImage('b2', 'b_blue.gif')" onmouseout="changeImage('b2', 'b_pink.gif')" /></a></body></html> Link to comment Share on other sites More sharing options...
Fmdpa Posted March 29, 2010 Author Share Posted March 29, 2010 Thanks. That worked perfectly. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.