enlarge image on mouseover

[readbanana]

I have a column in a gridview that fills with images from the gridview. I am very new to javascript so I googled until I found a good javascript function that enlarges this image onmouseover.

function Large(obj)
	{
	
	 var imgbox=document.getElementById("imgbox");
	 imgbox.style.visibility='visible';
	 var img = document.createElement("img");
	 img.src=obj.src;
	 img.style.height="180px";
	 imgbox.innerHTML='';
	 imgbox.appendChild(img);
	} 
	 
	function Out(obj)
	{
	    document.getElementById("imgbox").style.visibility='hidden';
	}
	function Move(obj,e)
	{
	    var mouseY=e.clientY;
	   // alert(e.x)
	 var mouseX=e.clientX;
	 var scrollTop=document.documentElement.scrollTop;
     var scrollLeft=document.documentElement.scrollLeft;
	 var y=scrollTop+mouseY+20;
	 var x=scrollLeft+mouseX+20;
	 document.getElementById("imgbox").style.left=x + "px";
	 document.getElementById("imgbox").style.top=y + "px";
	}
	function Change(obj, evt)
	    {
	        if(evt.type=="focus")
	            obj.style.borderColor="red";
	        else if(evt.type=="blur")
	           obj.style.borderColor="green";
    }

it works great. my only problem is that this is not exactly what I want to do. I want a small image of a camera to be in the column. when they put their mouse over the image of the camera, the image that really belongs in that column should popup in the div. thanx so much.

[fastestindian]

I have a column in a gridview that fills with images from the gridview. I am very new to javascript so I googled until I found a good javascript function that enlarges this image onmouseover.

function Large(obj)
	{
	
	 var imgbox=document.getElementById("imgbox");
	 imgbox.style.visibility='visible';
	 var img = document.createElement("img");
	 img.src=obj.src;
	 img.style.height="180px";
	 imgbox.innerHTML='';
	 imgbox.appendChild(img);
	} 
	 
	function Out(obj)
	{
	    document.getElementById("imgbox").style.visibility='hidden';
	}
	function Move(obj,e)
	{
	    var mouseY=e.clientY;
	   // alert(e.x)
	 var mouseX=e.clientX;
	 var scrollTop=document.documentElement.scrollTop;
     var scrollLeft=document.documentElement.scrollLeft;
	 var y=scrollTop+mouseY+20;
	 var x=scrollLeft+mouseX+20;
	 document.getElementById("imgbox").style.left=x + "px";
	 document.getElementById("imgbox").style.top=y + "px";
	}
	function Change(obj, evt)
	    {
	        if(evt.type=="focus")
	            obj.style.borderColor="red";
	        else if(evt.type=="blur")
	           obj.style.borderColor="green";
    }

it works great. my only problem is that this is not exactly what I want to do. I want a small image of a camera to be in the column. when they put their mouse over the image of the camera, the image that really belongs in that column should popup in the div. thanx so much.

You need to explain what applicatin is it? What platform it is Web or Winforms??

[readbanana]

this is for the web

[Bassem]

Hello,

I suggest you can use JQuery instead of pure JavaScript. Just because JQuery is simpler and you will accomplish both sub-tasks(on mouse hover, resize image) in very short lines.

This is a very useful like.

Thanks,
Bassem

[readbanana]

I figured it out in case anyone else needs it, here's my code.

function Large(image)
	{
	var bigpic =image.nextElementSibling;
    bigpic.style.visibility = 'visible';
function Out(image)
	{
	var bigpic =image.nextElementSibling;
    bigpic.style.visibility = 'hidden';
function Move(image,e)
	{
	 var mouseY=e.clientY;
	 var mouseX=e.clientX;
	 var scrollTop=document.documentElement.scrollTop;
     var scrollLeft=document.documentElement.scrollLeft;
	 var y=scrollTop+mouseY+20;
	 var x=scrollLeft+mouseX+20;
	 var bigpic =image.nextElementSibling;
     bigpic.style.left=x + "px";
     bigpic.style.top=y + "px";