enlarge image when mouseover using javascript

Mon Jan 28, 2013 11:55 pm

In example we enlarge image when mouse-over using JavaScript, the we have to versions of images , one is small and one is large , when mouse is over the small image a the larger version appears automatically.

javascript code

<!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>
<title>Show larger image when mouseover</title>
<script language="javascript" src="js/prototype-1.6.0.2.js" type="text/javascript"></script>
<script language="javascript" src="js/preview_templates.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
<!--

function loadPre(id,name,ref,w,h){
 new TemplatePreview(id, {
        title:  name,
        src:    ref,
        width:  w,
        height: h      });
}
// -->

</script>

</head>

<body>
<center>
 <img src='Template/Images/c1.gif' 
	 width='15' height='15' class='corner' 
	 style='display: none' /></div> <center><a href='styleview/phpbb3/TTT2/19'><strong>TTT2</strong><br /><img name='images/19.PNG' alt=TTT2 src='images/19.PNG' 
         border='1'
         style='border-color: 777777;'
         id = 'tpl_19'/></a><br /> <script  type="text/javascript">
       image = new Image;
	   image.src = 'images/19_2.PNG';	   
		new TemplatePreview('tpl_19', {
        title:  'Template 19',
        src:    image.src,
        width:  image.width,
        height:  image.height   });

    </script>

</center>

</body>


</html>

Attachments

: example of running the script; Enlarge.gif (48.58 KiB) Viewed 12732 times

Enlarge-image.rar: Enlarge image using JavaScript (Full Package); (239.9 KiB) Downloaded 1435 times

enlarge image when mouseover using javascript

enlarge image when mouseover using javascript

Topic Tags