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)
<divclass='right'><divclass='img'><imgid='1'src='img1-small.png'></div><divclass='img'><imgid='2'src='img2-small.png'></div><divclass='img'><imgid='3'src='img3-small.png'></div></div><divclass='left'><divclass='img ui-helper-hidden'><imgid='1'src='img1-large.png'></div><divclass='img ui-helper-hidden'><imgid='2'src='img2-large.png'></div><divclass='img ui-helper-hidden'><imgid='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(
//overfunction() {
var $this = $(this),
id = $('img', $this).attr("id");
$(".left #" + id).fadeIn(200);
},
//outfunction() {
var $this = $(this),
id = $('img', $this).attr("id");
$(".left #" + id).fadeOut(200);
}
)
});
Solution 2:
Based on Michael's post
<divclass='imgcontainer'><imgsrc='img1-small.png'class='swapme'><imgsrc='img2-small.png'class='swapme'><imgsrc='img3-small.png'class='swapme'></div><divid='image_here'></div><!--delete the next line if you've already included jquery --><scriptsrc='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 overvar 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 overfunction(){//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 htmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns="http://www.w3.org/1999/xhtml"><head><metahttp-equiv="Content-Type"content="text/html; charset=utf-8" /><title>Untitled Document</title><br /></head><body><p><scripttype="text/javascript"language="javascript">functionchangeImage(img){
document.getElementById('bigImage').src=img;
}
</script><tablewidth="45%"border="1"cellspacing="0"cellpadding="0"style="float:left;"><tr><thheight="380"scope="col"><imgsrc="../Pictures/Bigcircle.png"alt=""width="284"height="156"id="bigImage" /></th></tr></table><tablewidth="45%"border="1"cellspacing="0"cellpadding="0"style="float:left;"><tr><thscope="col"><div><p><imgsrc="../Pictures/lightcircle1.png"height="79"width="78"onmouseover="changeImage('../Pictures/lightcircle2.png')"onmouseout="changeImage('../Pictures/Bigcircle.png')"/></p><p><imgsrc="../Pictures/lightcircle2.png"alt=""width="120"height="100"onmouseover="changeImage('../Pictures/lightcircle.png')"onmouseout="changeImage('../Pictures/Bigcircle.png')"/></p><p><imgsrc="../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"