Jump to content

image hover


westman
 Share

Recommended Posts

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

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

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...