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> </p>
</br>
</div></th>
</tr>
</table>
<p> </p>
</body>
</html>
Post a Comment for "Change Multiple Image On Hover In Different Tables"