3 Comments on “How can I use CSS to swap two images simultaneously with mouseover?”

1. jaxicle
   May 15th, 2008 at 3:18 pm

   I think you want the Sliding Doors method, you’re explanation gave me a headache.

2. richarduie
   May 15th, 2008 at 5:28 pm

   IF I understood…JavaScript is my answer…

   var srcX = ‘http://us.i1.yimg.com/us.yimg.com/i/us/sch/gr/ga_ans_uh_logo.gif’;
   var srcXA = ‘http://us.i1.yimg.com/us.yimg.com/i/us/sch/gr2/nophoto3_48x48.gif’;
   var srcXB = ‘http://us.i1.yimg.com/us.yimg.com/i/geo/advan/spacer.gif’;

   function swapper(objRef) {
   if (‘A’ == objRef.value) {
   objRef.value = ‘A2’;
   document.getElementById(‘X’).src = srcXA;
   return;
   }
   if (‘A2’ == objRef.value) {
   objRef.value = ‘A’;
   document.getElementById(‘X’).src = srcX;
   return;
   }
   if (‘B’ == objRef.value) {
   objRef.value = ‘B2’;
   document.getElementById(‘X’).src = srcXB;
   return;
   }
   if (‘B2’ == objRef.value) {
   objRef.value = ‘B’;
   document.getElementById(‘X’).src = srcX;
   return;
   }
   }

3. E.M.Bed
   May 18th, 2008 at 11:21 pm

   This should do what you want:

   ========================================================================

   var srcX = ‘http://us.i1.yimg.com/us.yimg.com/i/us/sch/gr2/nophoto3_48x48.gif’;
   var srcA = ‘http://us.i1.yimg.com/us.yimg.com/i/us/sch/gr2/nophoto3_48x48.gif’;
   var srcB = ‘http://us.i1.yimg.com/us.yimg.com/i/us/sch/gr2/nophoto3_48x48.gif’;
   var srcXA = ‘http://l.yimg.com/img.avatars.yahoo.com/users/1eL4I46kwAAEC_IFHlKTJBw==.medium.jpg’;
   var srcXB = ‘http://l.yimg.com/img.avatars.yahoo.com/users/1RlURm4IDAAECXeE_vKZsmUIB.medium.jpg’;
   var srcA2 = ‘http://l.yimg.com/img.avatars.yahoo.com/users/1eL4I46kwAAEC_IFHlKTJBw==.medium.jpg’;
   var srcB2 = ‘http://l.yimg.com/img.avatars.yahoo.com/users/1RlURm4IDAAECXeE_vKZsmUIB.medium.jpg’;

   function swap(button , val , img) {
   button.src = val;
   document.getElementById( ‘X’).src = img;
   }

   function load() {
   document.getElementById( ‘X’).src = srcX;
   document.getElementById( ‘A’).src = srcA;
   document.getElementById( ‘B’).src = srcB;
   }

   function clickevent(button) {
   alert(“Button clicked: ” + button.id);
   }

   ========================================================================
   1. On page load, the default images are loaded with the function load.
   2. The images are swapped exactly as you mentioned with the function swap
   3. The images are turned into button using the clickevent function which you can modify to do what you need when the button is clicked – the code above just alerts which button has been clicked.

   This code is written so that all you need to do is change the 6 images at the top and the clickevent function:

   src A , src X , src B – default images (no hover and startup)
   srcXA , srcA2 images to change to when A is hovered over.
   srcXB , srcB2 images to change to when A is hovered over.

   You haven’t told us what actually happens when the buttons are clicked so you can still use the above code by filling in the clickevent function.

   Note: yahoo truncates URLs so right click on the URLS and click on properties to get the full URL.

Leave a Reply

You must be logged in to post a comment.