Solved

Using javascript and/or CSS to pop-up an information window for a link

Posted on 2004-03-30
10
321 Views
Last Modified: 2013-11-19
If you have a look at any question on this website, you'll see the occasional hyperlink with green double-underlining.  If you mouseover it, a nice, clean "info box" pops up where your mouse is that you can click to visit a sponsor (e.g. the words "website" and "javascript" in this question).

That said, I have an image map on my site with 9 links defined on it (see it here: http://bama.ua.edu/~hayes029/test.html ).  I'd like to have a mouseover property for each link on the map that acts as close to the aforementioned "info box" as possible.  What's the best way to do this?  I've looked at the HTML for the questions here, as well as the style sheet EE is using, but I can't figure out exactly how they're doing it.  Any answer that produces a similar effect will be appreciated.  I'm comfortable with javascript, php (which I'm sure won't be used for this), & CSS.  Thanks!
0
Comment
Question by:nomoreself
  • 4
  • 3
  • 2
  • +1
10 Comments
 
LVL 14

Expert Comment

by:dfu23
ID: 10714525
Would something like this work for you?

http://webfx.eae.net/dhtml/helptip/helptip.html
0
 

Author Comment

by:nomoreself
ID: 10715458
That's a nice resource, but not quite what I'm looking for.  Actually, I think I've figured it out myself while this question has been sitting here!  :)  I'll post my answer and close the question if I decide my method is best, but the question remains open for other solutions for now.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 10715651
Just add a title to each of the area tags:

<AREA title="whatever text you want"

Cd&
0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 

Author Comment

by:nomoreself
ID: 10717342
Titles aren't what I'm looking for.  More like a little window, containing any HTML you want, that pops up on mouseover.  Again, reference the green, double-underlined links on this page.
0
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 500 total points
ID: 10718725
Okay, maybe something free form like this.  Just stick in your own image:

Cd&


<html>
<head>
<script language="JavaScript">
<!--
function tipUP(EL)
{
CURREL=document.getElementById(EL);
CURREL.style.visibility="visible";
}

function tipDN()
{
CURREL.style.visibility="hidden";
CURREL=false;
}
//-->
</script>

</head>
<body>
<IMG USEMAP="#menuMap" src="palm_tree.gif" WIDTH=104 HEIGHT=130 ></span>

<map NAME="menuMap">
<!--
     to eliminate the dotted line add onfocus="blur(this)after href
     In IE the area will also support mouse events
-->
<area shape=rect coords="0,30, 103,59"
         onmouseover="tipUP('div1')" onmouseout="tipDN()"
         href=page1.html">
<area shape=rect coords="0,60, 103,89"
onmouseover="tipUP('div2')" onmouseout="tipDN()"
         href=page2.html">
<area shape=rect coords="0,90, 103,129"
onmouseover="tipUP('div3')" onmouseout="tipDN()"
         href=page3.html">
</map>
<div id="div1"
style="position:absolute;top:40px;left:250px;width:125px;border:4px double

blue;visibility:hidden">
<h2>link 1</h2>
<marquee>This is the <span style="color:red">text for link 1</span></marquee>
</div>
<div id="div2"
style="position:absolute;top:40px;left:250px;width:125px;border:4px double

blue;visibility:hidden">
<h2>link 2</h2>
<marquee>This is the <span style="color:red">text for link 2</span></marquee>
</div><div id="div3"
style="position:absolute;top:40px;left:250px;width:125px;border:4px double

blue;visibility:hidden">
<h2>link 3</h2>
<marquee>This is the <span style="color:red">text for link 3</span></marquee>
</div>
</body>
</html>

0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 10718750
BTW, I don't see the green links or any other ads.  The premium interface does not have any ads.

Cd&
0
 

Author Comment

by:nomoreself
ID: 10723846
>The premium interface does not have any ads.

I see!  Well, what COBOLdinosaur offered up is exactly what I came up with myself last night, and with a little styling, is exactly what I needed.  Thanks, Cd&.
0
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 10732349
Glad we could help.  Thanks for the A. :^)

Cd&
0
 

Expert Comment

by:trumpet11
ID: 34441952
I'm doing something simlar to this, but I'd like to make the pop up box show up on top of the area selected in the image map. Is there a way to achieve this with CSS?  I can't seem to get behave the way I want. The help box shows up UNDER the image.

Thanks in advance for any assistance!
0
 
LVL 14

Expert Comment

by:dfu23
ID: 34441982
css z-index
0

Featured Post

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Learn by example how to specify CSS selectors for Selenium WebDriver test automation software.
There’s a good reason for why it’s called a homepage – it closely resembles that of a physical house and the only real difference is that it’s online. Your website’s homepage is where people come to visit you. It’s the family room of your website wh…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

820 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question