Skip to content Skip to sidebar Skip to footer

Change Multiple Image On Hover In Different Tables

I am trying to link images in one table to another(bigger) images in the other table Basically I have 2 tables, left and right. in the left table I have two small images. in the ri

Solution 1:

Well.. There is a simple way of doing this in javascript. So javascript is simple.

Your html (this is obviously not yours but its a scenario)

<div class='right'>
    <div class='img'>
        <img id='1' src='img1-small.png'>
    </div>
    <div class='img'>
        <img id='2' src='img2-small.png'>
    </div>
    <div class='img'>
        <img id='3' src='img3-small.png'>
    </div>
</div>
<div class='left'>
    <div class='img ui-helper-hidden'>
        <img id='1' src='img1-large.png'>
    </div>
    <div class='img ui-helper-hidden'>
        <img id='2' src='img2-large.png'>
    </div>
    <div class='img ui-helper-hidden'>
        <img id='3' src='img3-large.png'>
    </div>
</div>

Now i am assuming you have jQuery (sorry if you do not, but the idea is similar).

$(function() {
        $('.right .img').hover(
        //over
        function() {
            var $this = $(this),
                id = $('img', $this).attr("id");

            $(".left #" + id).fadeIn(200);
        },
        //out
        function() {
            var $this = $(this),
                id = $('img', $this).attr("id");

            $(".left #" + id).fadeOut(200);
        }
    )
});

Solution 2:

Based on Michael's post

<div class='imgcontainer'>

        <img src='img1-small.png' class='swapme'>

        <img src='img2-small.png' class='swapme'>

        <img src='img3-small.png' class='swapme'>

</div>
<div id='image_here'>

</div>

<!--delete the next line if you've already included jquery  -->
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'
           type="text/javascript"></script>
<script> 
   //this runs when the document is ready, if you're new to jquery, just ignore this and take it for granted 
$(document).ready(function(){ 
   $(".swapme").hover(
     function(){ //on mouse over
        var newSrc = $(this).attr("src");
        newSrc= newSrc.replace('/small/','large'); 
        // this assumes that files are named like so
        // small file : img3-small.png 
        // large file : img3-large.png
        $("#image_here").html("<img src='" + newSrc + "' id='deleteMe'/>")
     },//end mouse over
     function(){//on mouse out
        $("#deleteMe").remove(); // show image only on mouse over
     }//end mouse out
)//end hover
})//end document.ready

</script>

And yes, this depends on jQuery too, but i think it's the easiest to understand and code way to do it


Solution 3:

Try this,Here I have a big image on the left and 3 images right.

On mouse hover sll 3 images they will replace big one. on mouse out old image will come back

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title><br />

</head>

<body>
<p>
  <script type="text/javascript" language="javascript">
function changeImage(img){
   document.getElementById('bigImage').src=img;

}
</script>


<table width="45%" border="1" cellspacing="0" cellpadding="0" style="float:left;">
  <tr>
    <th height="380" scope="col"><img src="../Pictures/Bigcircle.png" alt="" width="284" height="156" id="bigImage" /></th>
  </tr>
</table>
<table width="45%" border="1" cellspacing="0" cellpadding="0" style="float:left;">
  <tr>
    <th scope="col"><div>
      <p> <img src="../Pictures/lightcircle1.png" height="79" width="78" onmouseover="changeImage('../Pictures/lightcircle2.png')" onmouseout="changeImage('../Pictures/Bigcircle.png')"/> </p>
      <p><img src="../Pictures/lightcircle2.png" alt="" width="120" height="100" onmouseover="changeImage('../Pictures/lightcircle.png')" onmouseout="changeImage('../Pictures/Bigcircle.png')"/></p>
      <p><img src="../Pictures/lightcircle3.png" alt="" width="78" height="79" onmouseover="changeImage('../Pictures/lightcircle2.png')" onmouseout="changeImage('../Pictures/Bigcircle.png')"/></p>
      <p>&nbsp;</p>
      </br>
    </div></th>
  </tr>
</table>
<p>&nbsp; </p>
</body>
</html>

Post a Comment for "Change Multiple Image On Hover In Different Tables"