...

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



jknoxy123
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.

Thanks
Jonathon

jmrker
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
:)

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

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

jknoxy123
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?

Jonathon

radamsiii
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.

css


.thumbnail{
position: relative;
z-index: 20;
}

.thumbnail:hover{
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;
}



html


<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>

jknoxy123
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

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


<html>
<head>
<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/fortunato_canter.jpg','Canter'],
['http://www.westsierrahanoverians.com/images/forunato_trot.jpg','Trot'],
['http://www.westsierrahanoverians.com/images/wakanova_conf.jpg','Wakanova'],
['http://www.westsierrahanoverians.com/images/princess_canter.jpg','Princess'],
['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).src=ImageList[imgPtr][0];
document.getElementById(ids).alt=ImageList[imgPtr][0];
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>');
}
}
</script>
</head>
<body>
<table border="0"><tr>
<th>
<div style="height:360;width:100;overflow:auto">
<script type="text/javascript">InitHorses()</script>
</div>
</th>
<td style="width:100">&nbsp;</td>
<td>
<img id="BigHorses" height="425" width="600"
src='http://www.westsierrahanoverians.com/images/fortunato_foal2.jpg'
alt='http://www.westsierrahanoverians.com/images/fortunato_foal2.jpg'
>
<br><span id="BigHorsesCaption">Horses Caption</span>
<br>
</td>
</tr></table>
</body>
</html>

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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum