[Webinar] Streamline your web hosting managementRegister Today

x
?
Solved

HTML POP UP TAGS

Posted on 1999-12-15
22
Medium Priority
?
184 Views
Last Modified: 2013-11-28
I have this map created (its one image with different areas linked) where you click on a certain part of it and it brings you to the corresponding page. I want it so that when I position the cursor over a specific area of the map the area pops up in a little box. when i put my cursor on the map "clickable image" pops up.  When i checked the HTML code i see where it says "clickable image" but thats located in the main image area.  I need the individual links to do that.  please help.
0
Comment
Question by:magicxyz
  • 6
  • 5
  • 5
  • +4
22 Comments
 
LVL 8

Expert Comment

by:xabi
ID: 2283185
You can use this free script:

http://www.bosrup.com/web/overlib/

take a look about it in this page:

http://www.guggenheim-bilbao.es/caste/exposiciones/warhol/foto1.htm

xabi
0
 

Author Comment

by:magicxyz
ID: 2283196
I want a little identification tag to pop up when i positon the cursor on a certain area of the map.  Right now there is a default tag popping up.
0
 
LVL 4

Expert Comment

by:oubelkas
ID: 2283225
Are you using something like :

<area shape="rect" coords="187,115,205, 132" ONMOUSEOVER="myPopUp('mypopup.html') ; return true" href="myhtmlpage.html?x=187&y=115">

Because then this onmouseover event hanlder can call the pop up. The function myPopUp then looks something like :

function myPopUp(URL){
    popUp1 = window.open(URL, "mywin");
}

Joseph
0
Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

 

Author Comment

by:magicxyz
ID: 2283241
is there anyway to do this using

ALT="comment"  ???
0
 
LVL 4

Expert Comment

by:oubelkas
ID: 2283280
Alt is not an option, you must use layers for this :

Go to http://www.irt.org/articles/js116/

Scroll down and click on the link
"View the source code for Example 4... "
And see it work when clicked on
"Click here to see Example 4... "

This should do the trick for you

Joseph
0
 

Author Comment

by:magicxyz
ID: 2283295
thank you
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 2283310
This will work in IE4+:

<MAP name="MyMap">
 <AREA shape="rect"
           coords="0,20,49,40"
           onMouseOver='this.title="Your Message 1 Goes Here"'
           href="somefile1.htm" >
 <AREA shape="rect"
           coords="50,20,99,40"
           onMouseOver='this.title="Your Message 2 Goes Here"'
           href="somefile2.htm" >
</map>
0
 
LVL 4

Expert Comment

by:oubelkas
ID: 2283330
no thanks.....did it help?

Joseph
0
 

Author Comment

by:magicxyz
ID: 2283352
sorry.....haven't had a cance to look at it yet. Thanks for the suggestion.  I will try it.
0
 

Author Comment

by:magicxyz
ID: 2283363
does this work with IE 5?
0
 

Expert Comment

by:mkdebont
ID: 2283437
Take a look at:

http://www.thekitchen.nl/succes/main.asp

In here you see that if have used multiple layers that comes up when you're over an image.

This same affect you can make to have certain layers and that you show and hide the layers when you cross a part of the image. The title comes at one place (or more places, it depents on where you put the layer!!)

Martijn
0
 
LVL 4

Expert Comment

by:oubelkas
ID: 2283447
Like knight also mentions you can use the mouseover event hanlder, but a layer as shown in the article is both NS and IE compatible.
The example : http://www.irt.org/articles/js116/example4.htm

Then use the mouseover here, just copy paste that along with the functions needed and you're finished.

Joseph
0
 
LVL 5

Accepted Solution

by:
nathans earned 400 total points
ID: 2283510
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>
<head>
      <title>Untitled</title>
</head>

<body>

<img src="../images/aalogo4.jpg" width="620" height="77" border="0" alt="" usemap="#aalogo4">

<map name="aalogo4">
<area alt="This is to my personal Website." coords="0,-6,169,75" href="http://www.nsnd.com">
<area alt="Experts-Exchange - Get Help" coords="477,76,623,-4" href="http://www.experts-exchange.com">
</map>

</body>
</html>


This will work!!!
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 2283761
Nathans,
That does not appear to work in either IE4 or NS4.  Did you actually try this?
0
 
LVL 2

Expert Comment

by:mblase
ID: 2283975
I use this solution all the time; it works perfectly in NS4 and IE5 on my Win95 laptop.
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 2284760
Here is my code, what am I doing wrong?  Doesn't work in IE4 or NS4:

<HTML>
<BODY>

<MAP NAME="CIMap">
    <AREA alt="area1"
              SHAPE="rect"  
              COORDS="10, 12, 49, 40"  
              href="file1.htm">
    <AREA alt="area2"
              SHAPE="rect"  
              COORDS="50, 12, 99, 40"  
              href="file2.htm">
</map>

<IMG border='0' alt="" src='tab_index.gif' USEMAP="#CIMap">

</body>
</html>
0
 
LVL 5

Expert Comment

by:nathans
ID: 2285491

I tried your code and it worked fine.

Check it out at http://www.nsnd.com/test2.htm


<HTML>
<BODY>
<MAP name="CIMap">
<AREA alt="area1" shape="rect" coords="10, 12, 49, 40" href="file1.htm">
<AREA alt="area2" shape="rect" coords="50, 12, 99, 40" href="file2.htm">
</MAP>
<IMG border='0' alt="" src='images/dfw.jpg' usemap="#CIMap">
</BODY>
</HTML>
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 2286497
Hmm, I wonder if it has to do with the fact that I am using NT here.  Still doesn't work in IE or NS.  Oh well, thanks for trying.  
0
 
LVL 4

Expert Comment

by:oubelkas
ID: 2286619
knight, nathans,

I'm using NT too with IE5.0 and NS4.5 and the solution nathans gave, works for me....when my mouse is on the top left corner of the image "area1" pops up, if I go a lil' to the right "area2" appears...

Joseph
0
 
LVL 2

Expert Comment

by:mblase
ID: 2286950
It may be worth saying that you have to keep your mouse still over the imagemap area for a second or two before the ALT text pops up.
0
 
LVL 33

Expert Comment

by:knightEknight
ID: 2287090
Yes, but I get nothing.  However, if I include an alt in the IMG tag, I will always see that -- regardless of the alts in the MAP.  That's bizzare -- it is a really nice solution too, I wish I could get it to work.  Thanks again for the time spent here.
0
 
LVL 4

Expert Comment

by:oubelkas
ID: 2289254
knight,

I don't get it, why wouldn't it work with you. Maybe you should remove the alt="" in the IMG tag. Maybe then the alts of the areas will appear.

And does magicxyz have any comments on this?? It seems like we're more interested in this than magicxyz is... :/

Joseph ;)
0

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

Question has a verified solution.

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

The burden of debt that average person carries today has not only increased, but it keeps on growing. It is quite common nowadays that people find it extremely difficult to make ends meet in the face of millions of competing priorities that they hav…
Advertising is a powerful thing. The important question is, how to create advertisement people would willingly want to share on their social media? This article gives you essential tips on how to launch successful viral ad and increase substantially…
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…
Use Wufoo, an online form creation tool, to make powerful forms. Learn how to choose which pages of your form are visible to your users based on their inputs. The page rules feature provides you with an opportunity to create if:then statements for y…
Suggested Courses

591 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