Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Enlarge image with onMouseOver handler

Status
Not open for further replies.
cote

cote

IS-IT--Management
May 17, 2002
10
0
0
US
Hi I need help with onMouseOver event handler.
I have s list of images (in the for loop) that has link to other page on each image. When a cursor points to a certain image (i.e. image #1) I need to enlarge the image size a little bit and return to original image size when the cursor leave the image.
Can anybody show me how to do this? Thanks.

Below if the code fractions that lists images with link. No onMouseOver function yet since I don't have a clue on how to do it. The codes below will display 4 images per row.

<table border=&quot;0&quot; cellpadding=&quot;0&quot; cellspacing=&quot;0&quot; width=&quot;100%&quot; height=&quot;366&quot; style=&quot;font-family: SansSerif; font-size: 10pt&quot;>
<td height=&quot;21&quot; style=&quot;font-size: 10pt&quot;>
<p></p>
<script language=&quot;javascript1.2&quot;>
for (i=1;i<carname.length;i++) {
if ((i%4)==1) {document.writeln('<tr>');}
document.write('<td width=&quot;142&quot; height=&quot;130&quot; valign=&quot;top&quot;>');
document.write('<a href=&quot;adc_detail.html?car=' + i + '&quot;><p align=&quot;center&quot;>');
document.write('<img border=&quot;0&quot; src=&quot;images/' + carimg + '&quot; width=&quot;123&quot; height=&quot;98&quot;></a><br>');
document.write('<center>' + carname+ '</center></p></td>');
if ((i%4)==0 || (i==carname.length)) {document.write('</tr>');}
} // end for statement.
</script>
</table>


Thanks a bunch in advance.
 
Sort by date Sort by votes
Try this, Cote.

This is the line which writes the image. It resizes the image to 500 by 500.

document.write('<img border=&quot;0&quot; src=&quot;images/' + carimg + '&quot; width=&quot;123&quot; height=&quot;98&quot; onMouseOver=&quot;this.height=500; this.width=500;&quot; onMouseOut=&quot;this.height=123; this.width=98;&quot;></a><br>');

Hope this helps.

Phil


 
Upvote 0 Downvote
Thanks for the answer but it doesn't work it only work in IE but not in Netscape.

HELP!!!
My client change their request. They want to have another image displayed onMouseOver instead of resizing the image.
I need it urgently. My deadline is tomorrow.

Thanks.
 
Upvote 0 Downvote
<html><head><title>Untitled</title>
<script language=&quot;JavaScript&quot;>

function ImgChange(ImgName, ImgFile){
document
.src = ImgFile;
}

function loadImages() {
// Preloads your images when the page loads, instead of when they are accessed
// to stop there being a delay when you mouseover the picture. Add all of the
// mouseover pictures to the array below.
var yourImages = new Array(&quot;img1.gif&quot;, &quot;img2.gif&quot;)
var preImages = new Array()
for (i = 0; i < yourImages.length; i++) {
preImages = new Image();
preImages.src = yourImages
}
}

</script>
</head>
<body onload=&quot;laodImages()&quot;>
<IMG border=0 name=home src=img1.gif width=20 height=20 onmouseout=ImgChange('home','img1.gif') onmouseover=ImgChange('home','img2.gif')>
</body>
</html>
 
Upvote 0 Downvote
Sorry, I made a mistake in that code. Where it says &quot;preImages.src = yourImages&quot;, it should read &quot;preImages.src = yourImages(i)&quot;
 
Upvote 0 Downvote
I tried your code but it still doesn't work in Netscape.
I'm very desperate now!
 
Upvote 0 Downvote
Sorry, misspelt the function name in the onload of the body tag as well. I'll just get my jacket now...
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
111
waubain
waubain
edgarv
  • Locked
  • Question
Field with numbers and characters get nan
Replies
1
Views
61
ggriffit
ggriffit
Raj Kumar
  • Locked
  • Question
Attached Formula image to add in javascript
Replies
1
Views
61
gmmastros
gmmastros
JPSeo
  • Locked
  • Question
Another cjhild_process.exec issue with complex shell command
Replies
0
Views
42
JPSeo
JPSeo
waubain
  • Locked
  • Question
id tag not loading new data with new ajax call 1
Replies
4
Views
72
waubain
waubain

Part and Inventory Search

Sponsor

Back
Top