westman Posted February 12, 2012 Share Posted February 12, 2012 what is the scriped called where you can hover over a small image and you can see the full size?i need to know what it is called so i can google the scriped or if you have and example that would be great Link to comment Share on other sites More sharing options...
Ingolme Posted February 12, 2012 Share Posted February 12, 2012 Scripts don't have names. The closest label you could put on it is "image gallery" If you learn Javascript you can make one yourself. Link to comment Share on other sites More sharing options...
westman Posted February 13, 2012 Author Share Posted February 13, 2012 just found some scriped from google and it works well function actionWhenMouseOver(imgName) { var img = document.getElementById(imgName); img.style['width'] = "500px"; img.style['height'] = "500px";} function actionWhenMouseOut(imgName) { var img = document.getElementById(imgName); img.style['width'] = "200px"; img.style['height'] = "200px";}//and then for every image you want this to occur add the attribute:<image id="image1" src="" onmouseover="actionWhenMouseOver(this.id)" onmouseout="actionWhenMouseOut(this.id)"/> but i must ask, how do i get the image to show its true size and not W=500 H=500 coz all images are diffrent shapes. Link to comment Share on other sites More sharing options...
justsomeguy Posted February 13, 2012 Share Posted February 13, 2012 If the img element does not have dimensions explicitly defined then it should show the image at full size. Link to comment Share on other sites More sharing options...
dsonesuk Posted February 13, 2012 Share Posted February 13, 2012 You MUST have a styling defining the width and height for the thumb nail image on page loading, otherwise it show as large on loading, and only show as a thumb nail when you hover over, and the mouse leaves the large image. You therefore need to set the size from width/height from 500px to "auto" img.style['width'] = "auto"; img.style['height'] = "auto"; But! you don't require JavaScript to achieve this, as it can all be done from using CSS only <!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><script type="text/javascript">/*<![CDATA[*//*---->*/function actionWhenMouseOver(imgName) { var img = document.getElementById(imgName); img.style['width'] = "auto"; img.style['height'] = "auto";}function actionWhenMouseOut(imgName) { var img = document.getElementById(imgName); img.style['width'] = "200px"; img.style['height'] = "200px";}//and then for every image you want this to occur add the attribute:/*--*//*]]>*/</script><style type="text/css">/* for jvascript option */#image1 { width:200px; height: 200px;}/* all css option */#image_container img { width:200px; height: 200px;}#image_container img:hover{ width: auto; height: auto;}</style></head><body><image id="image1" src="../images/myimage.jpg" onmouseover="actionWhenMouseOver(this.id)" onmouseout="actionWhenMouseOut(this.id)"/><div id="image_container"><image src="../images/myimage.jpg" /></div></body></html> Link to comment Share on other sites More sharing options...
westman Posted February 13, 2012 Author Share Posted February 13, 2012 thank you so much... img.style['width'] = "auto"; img.style['height'] = "auto"; works well Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.