A CSS question...

monty · 05-20-2006, 01: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, 10: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.

Hope this helps!

Tom

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

It sure does Tom, tnx a million!

rep added!

-monty

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

My pleasure!

05-20-2006, 01:58 AM	#1 (permalink)
monty NamePros Member Join Date: Jun 2005 Location: Hat Yai, Thailand Posts: 165 104.00 NP$ (Donate)	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, 10:57 AM	#2 (permalink)
PoorDoggie Soon to be RICHdoggie! Join Date: Jan 2005 Location: UK Posts: 2,390 316.50 NP$ (Donate)	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. Hope this helps! Tom __________________ █ Exchange your long URL for a much smaller one! █ Free Anonymizer/Proxy █ Taz Martin's blog - Learn all about internet marketing, promoting your website and much more!

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

05-21-2006, 08:26 AM	#4 (permalink)
PoorDoggie Soon to be RICHdoggie! Join Date: Jan 2005 Location: UK Posts: 2,390 316.50 NP$ (Donate)	My pleasure! __________________ █ Exchange your long URL for a much smaller one! █ Free Anonymizer/Proxy █ Taz Martin's blog - Learn all about internet marketing, promoting your website and much more!

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