CSS or Javascript rollover pop-up

@greencodeApr 13.2007

Please forgive me for a start as I’m just getting stuck into CSS and Javascript.

What I’d like is when I rollover a link on the page for a little explanation box containing either html text or sometimes an image to popup next to the cursor. Now i’ve seen these created in both CSS and Javascript so what’s the best and most compatible one to use.

Any help would be much appreciated.?

to post a comment

CSS

@jasonahouleApr 13.2007 — #You will need to use JavaScript to trigger your CSS rollovers. So...both.

@greencodeauthorApr 13.2007 — #But I've noticed this one which states he only used CSS? http://www.cssplay.co.uk/menu/pop_ups.html

@dirt29Apr 13.2007 — #He's right, you need to use a combination. The Javascript will cause the action to either show or hide the element and the CSS can be used to set it's initial visibility and other things like positioning.

Here's a sample of some JS to show/hide a element:

[CODE]
 <script language=javascript type='text/javascript'>
 function hideDiv() {
 if (document.getElementById) { // DOM3 = IE5, NS6
 document.getElementById('hideShow').style.visibility = 'hidden';
 }
 else {
 if (document.layers) { // Netscape 4
 document.hideShow.visibility = 'hidden';
 }
 else { // IE 4
 document.all.hideShow.style.visibility = 'hidden';
 }
 }
 }
 
 function showDiv() {
 if (document.getElementById) { // DOM3 = IE5, NS6
 document.getElementById('hideShow').style.visibility = 'visible';
 }
 else {
 if (document.layers) { // Netscape 4
 document.hideShow.visibility = 'visible';
 }
 else { // IE 4
 document.all.hideShow.style.visibility = 'visible';
 }
 }
 }
 </script> 
 [/CODE]

Then in your document put in your Div element the id name hideShow you can change this of course

<i>
 </i>&lt;div id="hideShow"&gt;
 My content
 &lt;/div&gt;

And then add your hyperlink like so:

<i>
 </i>&lt;a href="#" onmouseover="showDiv()" onmouseout="hideDiv()"&gt;Your link&lt;/a&gt;

That's pretty much it, if you do a Google search for Javascript Show/Hide you might be able to find a better example, but you need the JS to make it happen.

@greencodeauthorApr 13.2007 — #Thanks for your help with this. Is it fairly stable across platforms and browsers?

@ToonMarinerApr 13.2007 — #You don't need javascript to achive this. Its all in the mark up.

you see on the css play page that the anchor tag has some child elements

<a class="screen" href="http://lab.arc90.com/2006/07/link_thumbnail.php">Link Thumbnails<b><img src="http://webdesignbook.net/snapper.php?url=lab.arc90.com&w=200&h=150" alt="website image" title="website image" /></b></a>

or more simply

<a href="image.gif>Link Thumnails<b><img src="image.gif"></b></a>

the css simply uses the a and a:hover to dictate when b (which is not actually nesseccary IMO) is displayed or not.

@jasonahouleApr 13.2007 — #Toon - Why are you surrounding the image with a bold text tag? This does not make any sense. And how is that supposed to hide the image?

I would put the image in a <div> and set display:none. Then do as dirt said and show the div on rollover of your link.

CSS or Javascript rollover pop-up

6 Comments(s) _↴

Also in #CSS _↴

Success!

Social

Version

CSS or Javascript rollover pop-up

6 Comments(s) ↴

Also in #CSS ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

6 Comments(s) _↴

Also in #CSS _↴