-1

I have a column in my gridview that loads images from a database. Right now, I have the image in the column and when you have your mouse over the image, a div with a larger image pops up next to it. What I want to do is have an image of a camera in the column and when you hover over the camera then the div with the proper image shows up. I am going to attach my code at it is. if there is anyone who can help me alter this i would really appreciate it. I don't know anything about javascript! The imgbox is the div. ask of now it is passing in obj which is the image their hovering over (lagrge(this))

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";
	}
2
Contributors
1
Reply
2
Views
7 Years
Discussion Span
Last Post by peter_budo
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.