Javascript or CSS for hover effect?

blue_harvester · 13 Jan 2007 at 00:00

I'm looking to implement a small popup component whereby when a user hovers over a link a description will appear. This is best demonstrated on the popurls.com site. When you hover over one of the story titles you see a short description of the story popup in a gold window. How is this done, CSS or Javascript?

Any pointers to relevant tutorials would be much apreciated.

lozza · 13 Jan 2007 at 00:30

that particular site is done with javascript.

Have a look at these links: plenty more out there if you google css pop up

Pure CSS popups

Pop-up Notes with CSS and Javascript

joeyjojo · 13 Jan 2007 at 03:04

That second link is exactly what I've been looking for for the collage. Cheers

lozza · 13 Jan 2007 at 09:41

joeyjojo said:
That second link is exactly what I've been looking for for the collage. Cheers

Your welcome!

Augmented · 13 Jan 2007 at 13:42

The second link works with a pretty laughable example.

Code:

<p>For web development, <a href="#" id="a1" class="special">PHP</a> is just great.</p>

<div id="note1">PHP: PHP Hypertext Preprocessor</div>

Seriously, does this guy not know that there is an <acronym> element.

Code:

<p>For web development, <acronym title="PHP Hypertext Preprocessor">PHP</acronym> is just great.</p>

I can somewhat understand the justification for his markup if you're 'popping' lots of additional content on something that isn't an acronym, but personally I would ignore an article consisting of a blunder like that.

Yes, I do know that PHP, as it is defined now, is a backronym, and technically an <abbr>, but bite me.

blue_harvester · 15 Jan 2007 at 09:10

Harib0 said:
that particular site is done with javascript.

Have a look at these links: plenty more out there if you google css pop up

Pure CSS popups

Pop-up Notes with CSS and Javascript

Yes this is exaclty what I'm after, thank you.

blue_harvester · 18 Jan 2007 at 12:41

Harib0 said:
that particular site is done with javascript.

Have a look at these links: plenty more out there if you google css pop up

Pure CSS popups

Pop-up Notes with CSS and Javascript

Ok I gave the second one a try and it works fine in IE but not in Firefox. I get an "event is not defined" error at line 13 of the JavaScript which is as follows:

Code:

note1.style.left=event.clientX;

I'm assuming that this is not available in Firefox? If so is there anyway to make it cross-browser compatible?

robmiller · 18 Jan 2007 at 14:14

Augmented said:
Yes, I do know that PHP, as it is defined now, is a backronym, and technically an <abbr>, but bite me.

It's an initialism mate surely

A recursive back-initialism, awesome

Augmented · 18 Jan 2007 at 14:27

robmiller said:
It's an initialism mate surely

A recursive back-initialism, awesome

It's a word. Do you not say 'fffup'?

Yeah, you're quite right, it is an initialism and a weird one at that. But in the strange world of HTML, it's an <acronym>... maybe

.

blue_harvester · 18 Jan 2007 at 15:10

Below is the entire code. I believe I need to pass the window.event object to the JavaScript code in order to get it to work in Firefox. How do I go about doing this? I'm quite new to JavaScript and am not familiar with the way the functions are defined i.e. createNotes=function(){...

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
	<head>
		<title>DYNAMIC POP-UP NOTE</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	
		<script language="javascript">
			createNotes=function(){
			            showNote=function(){
	                        // gets note1 element
	                        var note1=document.getElementById('note1');
	                        // assigns X,Y mouse coordinates to 'note1' element
	                        note1.style.left=event.clientX;
	                        note1.style.top=event.clientY;
	                        // makes note1 element visible
	                        note1.style.visibility='visible';
			            }
			
			            hideNote=function(){
	                        // gets note1 element
	                        var note1=document.getElementById('note1');
	                        // hides note1 element
	                        note1.style.visibility='hidden';
			            }
			
			            var a1=document.getElementById('a1');
			            // shows note1 element when mouse is over
			            a1.onmouseover=showNote;
			            // hides note element when mouse is out 
			            a1.onmouseout=hideNote;
			}
	
			// execute code once page is loaded
			window.onload=createNotes;
		</script>
	
		<style type="text/css">
			p {
			            font: normal 11px "Verdana", Arial, Helvetica, sans-serif;
			            color: #000;
			}
			
			a.special:link,a.special:visited {
			            font: bold 11px "Verdana", Arial, Helvetica, sans-serif;
			            color: #00f;
			            text-decoration: underline;
			}
			
			a.special:hover {
			            color: #f00;
			}
			
			#note1 {
			            position: absolute;
			            top: 0px;
			            left: 0px;
			            background: #ffc;
			            padding: 10px;
			            border: 1px solid #000;
			            z-index: 1;
			            visibility: hidden;
			            font: bold 11px "Verdana", Arial, Helvetica, sans-serif;
			            color: #000;
			}
		</style>
	</head>
	<body>
		<p>For web development, <a href="#" id="a1" class="special">PHP</a> is just great.</p>
		<div id="note1">PHP: PHP Hypertext Preprocessor</div>
	</body>
</html>

joeyjojo · 18 Jan 2007 at 17:30

http://boinc.berkeley.edu/wz_tooltip.js
Might work nicely.

Used to good effect at http://boinc.berkeley.edu/projects.php

blue_harvester · 22 Jan 2007 at 20:46

joeyjojo said:
http://boinc.berkeley.edu/wz_tooltip.js
Might work nicely.

Used to good effect at http://boinc.berkeley.edu/projects.php

Thanks for this. I have tried this and I'm able to get it to work on a static web page, but when I generate the content dynamically the tooltips don't work but there are no errors in the Error Console. When I use 'Save As' to save the dynamically created content and then launch the saved page the tooltips work!! What's going on here?

blue_harvester · 22 Jan 2007 at 21:45

blue_harvester said:
Thanks for this. I have tried this and I'm able to get it to work on a static web page, but when I generate the content dynamically the tooltips don't work but there are no errors in the Error Console. When I use 'Save As' to save the dynamically created content and then launch the saved page the tooltips work!! What's going on here?

Yup, just as I suspected, this doesn't work with dynamically created elements. See http://www.webdeveloper.com/forum/showthread.php?threadid=109239