large image on thumnail mouseover

Forum Moderators: open

Message Too Old, No Replies

large image on thumnail mouseover

woodyjon

8:04 pm on Jan 31, 2005 (gmt 0)

I am looking for a way of displaying a larger image of a thumbnail when clicked or with mouseover. Ideally I would like the larger image to appear near to the thumbnail either as a sort of pop up or as a layer on top of the page, but not located/fixed within the page area.

Any ideas?

Thanks

Jon

orion_rus

1:01 pm on Feb 1, 2005 (gmt 0)

And where is your problem then?

woodyjon

4:32 pm on Feb 1, 2005 (gmt 0)

Grateful for any tips on how to do it.

orion_rus

6:39 pm on Feb 1, 2005 (gmt 0)

Ok let's take a look of it. U have two ways of doing it.
1 way, ur small image is just a big image but fixed to small size with style width and height. and u should call a function with this.src and ur function recieves needed path to show image.
2 way u'll need to know big image path, how u can do it -
it's ur business.
Now we need to make a function which shows a large image
(elem is an <img> tag which mouseovered or mouseclicked.


function ShowBigImage(elem,bigimagesrc)
{
smallleft=elem.style.left;
smalltop=elem.style.top;
newelement=document.createElement('img');
newelement.src=bigimagesrc;
document.body.appendChild(newelement);
newelement.style.left=smallleft+80;
newelement.style.top=smalltop;
newelement.style.position='absolute';
}
<body>
<img src='small.jpg' onmouseover=ShowBigImage(this,'bigimage.jpg') onclick=ShowBigImage(this,'bigimage.jpg')
</body>

This should place big image 80 pixels lefter smallimage.
I hope i was clear here) if something wrong, ask about it)
Good luck to you

woodyjon

8:42 pm on Feb 1, 2005 (gmt 0)

Magic - I'll give it a try later.

Many Thanks