HTML POP UP TAGS

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.
magicxyzAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

xabiCommented:
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
magicxyzAuthor Commented:
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
oubelkasCommented:
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
The Ultimate Tool Kit for Technolgy Solution Provi

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy for valuable how-to assets including sample agreements, checklists, flowcharts, and more!

magicxyzAuthor Commented:
is there anyway to do this using

ALT="comment"  ???
0
oubelkasCommented:
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
magicxyzAuthor Commented:
thank you
0
knightEknightCommented:
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
oubelkasCommented:
no thanks.....did it help?

Joseph
0
magicxyzAuthor Commented:
sorry.....haven't had a cance to look at it yet. Thanks for the suggestion.  I will try it.
0
magicxyzAuthor Commented:
does this work with IE 5?
0
mkdebontCommented:
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
oubelkasCommented:
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
Nathan Stanford SrSenior ProgrammerCommented:
<!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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
knightEknightCommented:
Nathans,
That does not appear to work in either IE4 or NS4.  Did you actually try this?
0
mblaseCommented:
I use this solution all the time; it works perfectly in NS4 and IE5 on my Win95 laptop.
0
knightEknightCommented:
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
Nathan Stanford SrSenior ProgrammerCommented:

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
knightEknightCommented:
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
oubelkasCommented:
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
mblaseCommented:
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
knightEknightCommented:
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
oubelkasCommented:
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
Internet Marketing

From novice to tech pro — start learning today.