Image Viewer

[greens85]

Hi All,

I know this is a simple problem because ive done it before, but i just cant remember how i did it

What i want to do is create an image viewer, i have a number of thumbnails and a large div tag that is blank, when the user rollsover the thumbnail the large image is display in the blank div, but whats happening is the large image is displaying in the thumbnail div.

This is what i have:

Thumbnail Div:

<div id="ptmimage1"><a href="#"><img src="../../Images/shim.gif" width="59" height="88" border="0" /></a></div>

Large Div:

<div id="ptmlargeimg"></div>

Then the CSS is set like this:

#ptmimage1{
	position:absolute;
	background:url(Images/ptm1.jpg) no-repeat top left;
	width: 59px;
	height: 88px;
	left: 17px;
	top: 102px;
}

#ptmimage1 a:hover{
	background:url(Images/ptm1_large.jpg) no-repeat top left;
	width: 206px;
	height: 309px;
}

Can anyone help me jog my memory on this one?

Thanks

[greens85]

I've remembered now, for anyone who might have the same problem... I forgot to give the rollover div tag the:

position:absolute;

element

[jcdevelopment]

you could also use the visible element and just call it when rolled over, of course that may be way too much code..

[greens85]

Ive got it working now, but there is still a problem, because i have it working as a rollover. If the user rollovers over but then moves the mouse in the slightest (even within the thumb bounds) the picture disapears or flickers on an off.

If there away round this, is there a way i could make the feature onclick or something, but without the onclick loading a new page??

thanks

[Actinia]

You could try removing the onmouseout from the thumbnail and putting an onclick into the big picture div. I use something similar a lot, except that I have a 'close' button at the bottom of the picture div which closed the div when clicked.

John Rostron