Connecting Tech Pros Worldwide Forums | Help | Site Map

MouseOver Image sizes????

Member
 
Join Date: Oct 2006
Posts: 55
#1: Aug 12 '08
Is there a (Simple) way to make the image produced by the mouseover command - to be a specific size? I have several different pictures - and depending on what it is the size can vary alot - is there anyway to make the mouseover command dictate that the image is 50% of its original size - so that it automatically adjusts to each picture being displayed?

Example of what I mean about the pictures:






Right now when the mouseover action takes place - the displayed image is 371 X 580 which really distorts the 2nd image.

Just looking for a "prettier" way to do this.

Thanks!

Sophie

acoder's Avatar
Site Moderator
 
Join Date: Nov 2006
Location: UK
Posts: 14,581
#2: Aug 12 '08

re: MouseOver Image sizes????


If you preload the images, e.g.
Expand|Select|Wrap|Line Numbers
  1. var img = new Image();
  2. img.src = "theURL.png";
then you can get the height and width of the images, with the img.height and img.width properties.
Member
 
Join Date: Oct 2006
Posts: 55
#3: Aug 31 '08

re: MouseOver Image sizes????


I am very green at this Java - where exactly would I put this code? - I have tried dictating what the height and width would be - but it hasn't worked yet.

Expand|Select|Wrap|Line Numbers
  1.  
  2. <a onmouseover="MAINIMG('393LOGI5')" href="http://i157.photobucket.com/albums/t58/olivas_enterprises/393LOGI5.jpg" alt="OLIVAS ENTERPRISES" width = "182" height = "151">
  3.        <img border="0" src="http://i157.photobucket.com/albums/t58/olivas_enterprises/393LOGI5.jpg" width="82" height="51"></A>
  4.  
  5.  
I want the MAINIMG to be correctly sized. Right now it is a standard size based on the main image - but my images are not all the same size so many of them get stretched and skewed funny.

Thanks again for your assistance! and sorry for the delay getting back to you.
acoder's Avatar
Site Moderator
 
Join Date: Nov 2006
Location: UK
Posts: 14,581
#4: Aug 31 '08

re: MouseOver Image sizes????


Put the earlier code in the head. Then in the MAINIMG function, get the corresponding pre-loaded image variable to work out its height/width. From that you can work out what height and width to set the img tag to.
Reply


Similar JavaScript / Ajax / DHTML bytes