Help with Javascript code

ebranes · 08-06-2009, 01:59 AM

Hi there,

I'm sure someone can help me with this simple fix. I am putting a site together for a friend and I found a Javascript code that I'm using which basically causes an image to enlarge on mouse rollover.

The website, which I just started, is: Home 2

What I'm trying to do is get the larger image to appear a little more to the right than it currently does, so it is not right on top of the thumbnails.

I hope someone can tell me what code (and where) I need to add to accomplish this. I'm quite new at this so I really need specific instruction.

Thanks in advance for your help!

Here is the code for the onmouseover routine:

Code:

<head> 
<script language="JavaScript"> 
function showlargeimage(imgshow) 
{document.getElementById('image').src=imgshow;} 
function showlargeimage(imgshow) 
{document.getElementById('image').src=imgshow; 
document.getElementById('image').style.display='block'; 
} 



</script> 
</head> 
<body> 
<TABLE> 
<TR> 
<TD> 
<!--THUMBNAILS--> 
<img src="thumbnail1.jpg" onmouseover=showlargeimage('image1.jpg')><br> <br> 
<img src="thumbnail2.jpg" onmouseover=showlargeimage('image2.jpg')><br> <br> 
<img src="thumbnail3.jpg" onmouseover=showlargeimage('image3.jpg')><br> <br> 
<img src="thumbnail4.jpg" onmouseover=showlargeimage('image4.jpg')><br> <br> 
<img src="thumbnail5.jpg" onmouseover=showlargeimage('image5.jpg')><br> <br> 
</TD> 
<TD> 
<!--image SCREEN--> 
<img src='#' id='image'> 
<img src='#' id='image' style='display:none'>
</TD> 
</TR> 
</TABLE> 
</body>

Baez · 08-06-2009, 08:21 AM

First I would use divs instead of tables. Then create a style sheet and make two id's. One for the thumbnails and one for the main picture.

So your style sheet would go something like:

Code:

#thumbs
{min-width: 200px;}

#main
{margin: 0 0 0 225px;}

That would place a 25 pixel gap in between your thumbnails on the left and the big picture on the right.

CrazeD · 08-08-2009, 12:14 PM

You need to preload those large images into the browser cache, so there is no delay when you hover over them.

Code:

<img src="image1jpg" style="display:none;" />
<img src="image2.jpg" style="display:none;" /> 
<img src="image3.jpg" style="display:none;" />
<img src="image4.jpg" style="display:none;" /> 
<img src="image5.jpg" style="display:none;" />

Member Login