PDA

View Full Version : How to make an image/text rollover (example)



AgentDark
Mar 21st, 2007, 03:13 AM
On http://www.bobbavalues.com
when you rollover an image you get a new image (or box with text im not sure).
I was wondering how to do this, a tutorial would be supurb.

twodayslate
Mar 21st, 2007, 03:21 AM
Use the :hover effect in CSS. I believe you can hover over a div, I know you can for the a and li/ul attribute.


CSS

img {display: none;}
div:hover img{display: block;}

HTML

<div>Hover over me!
<img src="/toseeme.gif" />
</div>

AgentDark
Mar 21st, 2007, 03:43 AM
I dont know CSS at all so can u post a guide?
and the HTML div does not work correctly.

jlhaslip
Mar 21st, 2007, 04:48 AM
I think that is a javascript from dynamicdrive.com (or dynamicdrives.com?) to activate the "tooltips".

Here is another method to perform the same task with html/css only that might be easier to grasp.

http://www.jlhaslip.trap17.com/samples/tooltips/

To have an image displayed, hover on the "sell your house" example. Code is explained at the bottom.

twodayslate
Mar 21st, 2007, 01:45 PM
I would not recommend javascript for this (not user friendly), it can easily be done with CSS.

Instead of a div us the a or span(should work) attribute

CSS

img {display: none;}
a:hover img{display: block;}

HTML

<a href="#">Hover over me!
<img src="/toseeme.gif" />
</a>

CSS

img {display: none;}
span:hover img{display: block;}

HTML

<span href="#">Hover over me!
<img src="/toseeme.gif" />
</span>

jlhaslip
Mar 21st, 2007, 10:47 PM
IE6 needs an "a" tag in the sequence to affect the on:hover. See the link I posted.