A CSS question...

monty · 05-20-2006, 02:58 AM

Hey y'all

For the CSS expert around here, this should be an easy one!

A have a small image on some page and when the curser passes over it, a bigger image should display in a <div> tag somewhere else on the page. Inside the <div> tag, I've already put the img element but without source, when the mouse passes the first one, a source gets set for the <img> and all should be well.

The problem is that Opera shows the placeholder for this picture all the time which doesn't look nice!

Any suggestions would be greatly appriciated!

-monty

PoorDoggie · 05-20-2006, 11:57 AM

heya!

I think that you should have the div like this:

Code:

<div id="imageViewer" style="visibility: hidden"><img src="http://mywebsite.com/image.gif" /></div>

and then for the thumbnail image have this code:

Code:

<img src="http://mywebsite.com/thumbnail.gif" onMouseOver="document.getElementById('imageViewer').style.visibility='visible'" onMouseOut="document.getElementById('imageViewer').style.visibility='hidden'" />

That will show and hide the DIV with the image in it.
????: NamePros.com http://www.namepros.com/programming/199165-a-css-question.html

Hope this helps!

Tom

monty · 05-20-2006, 10:08 PM

It sure does Tom, tnx a million!

rep added!

-monty

PoorDoggie · 05-21-2006, 09:26 AM

My pleasure!

05-20-2006, 02:58 AM	THREAD STARTER #1 (permalink)
monty NamePros Member Join Date: Jun 2005 Location: Hat Yai, Thailand Posts: 165	A CSS question... Hey y'all For the CSS expert around here, this should be an easy one! A have a small image on some page and when the curser passes over it, a bigger image should display in a <div> tag somewhere else on the page. Inside the <div> tag, I've already put the img element but without source, when the mouse passes the first one, a source gets set for the <img> and all should be well. The problem is that Opera shows the placeholder for this picture all the time which doesn't look nice! Any suggestions would be greatly appriciated! -monty __________________ ReportATerrorist.net -- myBlog -- Peaches International

05-20-2006, 11:57 AM	#2 (permalink)
PoorDoggie Soon to be RICHdoggie! Join Date: Jan 2005 Location: UK Posts: 2,408	heya! I think that you should have the div like this: Code: <div id="imageViewer" style="visibility: hidden"><img src="http://mywebsite.com/image.gif" /></div> and then for the thumbnail image have this code: Code: <img src="http://mywebsite.com/thumbnail.gif" onMouseOver="document.getElementById('imageViewer').style.visibility='visible'" onMouseOut="document.getElementById('imageViewer').style.visibility='hidden'" /> That will show and hide the DIV with the image in it. ????: NamePros.com http://www.namepros.com/programming/199165-a-css-question.html Hope this helps! Tom

05-20-2006, 10:08 PM	THREAD STARTER #3 (permalink)
monty NamePros Member Join Date: Jun 2005 Location: Hat Yai, Thailand Posts: 165	It sure does Tom, tnx a million! rep added! -monty __________________ ReportATerrorist.net -- myBlog -- Peaches International

05-21-2006, 09:26 AM	#4 (permalink)
PoorDoggie Soon to be RICHdoggie! Join Date: Jan 2005 Location: UK Posts: 2,408	My pleasure!

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)