Solved

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

Posted on 2004-03-30
10
323 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
SharePoint Admin?

Enable Your Employees To Focus On The Core With Intuitive Onscreen Guidance That is With You At The Moment of Need.

 

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

Enroll in June's Course of the Month

June's Course of the Month is now available! Every 10 seconds, a consumer gets hit with ransomware. Refresh your knowledge of ransomware best practices by enrolling in this month's complimentary course for Premium Members, Team Accounts, and Qualified Experts.

Question has a verified solution.

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

Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

717 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