Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

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

Posted on 2004-03-30
10
Medium Priority
?
326 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 

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 2000 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

Simplify Your Workload with One Tool

How do you combat today’s intelligent hacker while managing multiple domains and platforms? By simplifying your workload with one tool. With Lunarpages hosting through Plesk Onyx, you can:

Automate SSL generation and installation with two clicks
Experience total server control

Question has a verified solution.

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

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

610 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