Solved

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

Posted on 2004-03-30
10
319 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
 

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
DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

 
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

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

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.
Any business that wants to seriously grow needs to keep the needs and desires of an international audience of their websites in mind. Making a website friendly to international users isn’t prohibitively expensive and can provide an incredible return…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

911 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

Need Help in Real-Time?

Connect with top rated Experts

23 Experts available now in Live!

Get 1:1 Help Now