• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 331
  • Last Modified:

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

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
nomoreself
Asked:
nomoreself
  • 4
  • 3
  • 2
  • +1
1 Solution
 
dfu23Commented:
Would something like this work for you?

http://webfx.eae.net/dhtml/helptip/helptip.html
0
 
nomoreselfAuthor Commented:
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
 
COBOLdinosaurCommented:
Just add a title to each of the area tags:

<AREA title="whatever text you want"

Cd&
0
Easily Design & Build Your Next Website

Squarespace’s all-in-one platform gives you everything you need to express yourself creatively online, whether it is with a domain, website, or online store. Get started with your free trial today, and when ready, take 10% off your first purchase with offer code 'EXPERTS'.

 
nomoreselfAuthor Commented:
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
 
COBOLdinosaurCommented:
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
 
COBOLdinosaurCommented:
BTW, I don't see the green links or any other ads.  The premium interface does not have any ads.

Cd&
0
 
nomoreselfAuthor Commented:
>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
 
COBOLdinosaurCommented:
Glad we could help.  Thanks for the A. :^)

Cd&
0
 
trumpet11Commented:
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
 
dfu23Commented:
css z-index
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

  • 4
  • 3
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now