View Full Version : Thumbnail images - on mouse over larger image appears

05-16-2009, 02:37 PM
Hi, every1, new to the forum.

I was wondering if someone could assist me with a problem, i am trying to use the simple mouseover function to to able for my user to mouse over an thumbnail image and them the full size image apears in a black space on the webpage!

plus, is there a way to have only 1 image instead of having a small one and a large one. i.e a large image can be resized for the thumbnail and appears normal in the mouseover.


05-16-2009, 06:09 PM
Change to the sizes you need and replace the image links.
See: http://www.nova.edu/optometry/pharmacy/old/EnlargeMO.html

05-16-2009, 06:23 PM
Thanks for the info

05-16-2009, 07:01 PM
You're most welcome.
Let us know if you have any implementation problems.
Good Luck!

05-17-2009, 06:24 PM
hey surely there has to be code that is much simpler then that, to just make an image appear in a different place on the webpage?


05-17-2009, 06:49 PM
I worked on a simular issue not long ago.
Between internet searches and this forum this is what I came up with... Hope it helps.


position: relative;
z-index: 20;

background-color: #FFFFFF;
z-index: 60;

.thumbnail span{
position: absolute;
background-color: #FFFFFF;
padding: 5px;
left: -1000px;
border: 4px double #000099;
visibility: hidden;
color: blue;
text-decoration: none;

.thumbnail span img{
border: solid 2px #000099;
background-color: #FFFFFF;
padding: 2px;

.thumbnail:hover span{ /*CSS for enlarged image on hover*/
visibility: visible;
background-color: #FFFFF;
top: -120px;
left: 115px; /*adjust the position where enlarged image should offset horizontally */
text-align: center;


<a class="thumbnail" href="#thumb" onclick="javascript:window.open (href=file.jpg','null','toolbar=no,status=no,scrollbars=yes,resizable=yes, width=450,height=600'); return false;">

<img src="file.jpg" class="gallery-border" alt="" /><span> discription <img src ="file.jpg" class="gallery-height300" alt="" /></span></a>

05-17-2009, 08:05 PM
hi, i am very new to all of this and i sort of understand the code but cant rework it to my spec!

Im sure it is possible to get it much simpler! hope someone will understand ill try explain what i require!

Imagine a shopping website, on a product page there is a set of thumbnails of images underneath the product content with a black space to the right of it when i mouse over on one of the images, a larger image appears in the blank space beside it, then disppears on mouse out/another thumbnail enlarges there! Do you get what i mean? and can you write code to help me?

regards Jonathon

05-17-2009, 10:34 PM
Don't like the earlier post, then try this:

<title>Single Gallery</title>
<script type="text/javascript">
// From: http://www.codingforums.com/showthread.php?t=154649
// and: http://www.webdeveloper.com/forum/newreply.php?do=postreply&t=204715
// and: http://www.webdeveloper.com/forum/showthread.php?t=205077

var Horses = [
['http://www.westsierrahanoverians.com/images/fortunato_foal2.jpg','3 days old'],
['http://www.westsierrahanoverians.com/images/fortunato_foal.jpg','3 monhs old'],
['http://www.westsierrahanoverians.com/images/dona_fran_trot.jpg','Dona Fran trot'],
['http://www.westsierrahanoverians.com/images/wakanova_trot2.jpg','Wakanova trot'] // Note: no comma

function SetImage(IDS,imgPtr) {
var ids = '';
var ImageList = new Array();
if (IDS.indexOf('F') == 0) { ImageList = Horses; ids = 'BigHorses'; }
document.getElementById(ids+'Caption').innerHTML = ImageList[imgPtr][1];
function InitHorses() {
for (var i=0; i<Horses.length; i++) {
document.write('<img id="FC'+i+'" src="'+Horses[i][0]+'" alt="'+Horses[i][0]+'"'
+ ' height="75" width="75" onMouseOver="SetImage(this.id,'+i+')"><p>');
<table border="0"><tr>
<div style="height:360;width:100;overflow:auto">
<script type="text/javascript">InitHorses()</script>
<td style="width:100">&nbsp;</td>
<img id="BigHorses" height="425" width="600"
<br><span id="BigHorsesCaption">Horses Caption</span>

Doesn't get much simpler and still do something!

If you cannot modify, then post where the images are located and we'll try to modify.