How Do I Get 2 Images To Switch Positions Upon Mouse Over Using Html?

4 Comments

1. Doug V says:

   July 5, 2009 at 2:28 am

   
   
   
2. Ruck says:

   July 5, 2009 at 6:57 am

   Not with pure HTML. You would have to use something like JavaScript to achieve this:
   Once you have assembled your images, place this JavaScript onto your page. You should put it in the of the document, so that it is already working before it has a chance to be called.
   Code for :
   
   Now we just need to add the images. This is done like any other image, but with some extra JS attributes thrown in:
   
   This HTML creates the image. The script will then wait for the user to trigger it. The onMouseOver event handler ‘listens’ for certain user actions; in this case their mouse passing over the image. When this happens it fires the over function, and sends the image’s number along with it. It’s the first rollover image on the page so it sends a 0. The second image would send a 1 etc. Always remember, the first object in an array is numbered with a zero.
   When the user’s mouse moves away from the image again, onMouseOut notices and fires out, again adding in the image’s number so the function knows which image it has to work on.
   The name attribute we add to our images should be exactly the same as the names we gave the image in the inames array in the script. This is used to construct the rolled-over image’s filename. If we call our first image image, as I have done, the script decides that the corresponding rolled-over filename will be media/image2.gif. The initial image can be called anything you want, but it would be a good idea to name it similarly to the second, ending with a 1.
3. Tech109 says:

   July 5, 2009 at 12:50 pm

   I believe you have to use JavaScript for that. That’s the only way I’ve done it before. It’s been years since I dabbled in that – so do a web search for Javscript image rollovers and you should find some tutorials – fairly easy to do if you are already proficient at updating your HTML files (the JavaScript is inserted into your HTML) and managing files on your server.
4. Smartphone Software says:

   July 5, 2009 at 2:28 pm

   
   
   onmouseover="roll('sub_but', 'movedown.gif')"
   onmouseout="roll('sub_but', 'movetup.gif')">
   alt="Move your mouse over me" name="sub_but" />
   
   
   onmouseover="roll('sub1', 'movedown.gif', 'sub2', 'an1.gif')"
   onmouseout="roll('sub1', 'moveup.gif', 'sub2', 'an2.gif')">
   height="39" border="0" />