How do I display text when mouse over on a image map

What I am trying to accomplish is when a user mouses over a certain part of a imagemap that has a hotspot information about that area will dropdown or show itself. I dont want to use CSS and I have tried the pop up windows but they seem so tacky now.
jinkillaAsked:
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.

Britt ThompsonSr. Systems EngineerCommented:
This article explains how to accomplish this with plain old HTML. Just rollover the link to expose the information in the same area:

http://www.ehow.com/how_4464086_create-image-rollover-using-html.html
0
selvolCommented:
You may need to explain a bit more clearer. Can you send a URL w/ an example please.
You explained what could be interpreted as several things.
Selvol
 
Possible?
http://web-graphics.com/mtarchive/BubbleTooltips.zip
 
http://web-graphics.com/mtarchive/bubbleTooltips2.html 
0
jinkillaAuthor Commented:
Here is a link to what I have been able to create thus far: http://pimpntechnology.com/imapNit.html. What I would like to do is have the user mouseover one of the red dots and then the information would be revealed to the user. I cannot figure out how to add this link info to the hot spot on the image map. At this point I am willing to abandon this idea and try the tooltip over the each red dot. Please help!
0
Big Business Goals? Which KPIs Will Help You

The most successful MSPs rely on metrics – known as key performance indicators (KPIs) – for making informed decisions that help their businesses thrive, rather than just survive. This eBook provides an overview of the most important KPIs used by top MSPs.

selvolCommented:
Here's the hotspot help.  Let me know if this gets you in the right direction.
 
Place the us-map.jpg  in a folder named images..
 
Put the code into a html file.
 
SElvol


  
  <center><img src="images/us_map.jpg" width="460" height="337" border="0" alt="United States Map" usemap="#us_map_Map" border="0"></center> 
  <map name="us_map_Map">
  <area shape="poly" alt="ME" coords="431,13, 434,13, 439,13, 447,28, 451,32, 454,35, 443,46, 443,42, 439,42, 439,47, 436,52, 431,57, 431,55, 431,57, 425,39, 425,31" href="javascript:void(0);" id="me" onClick="javascript:lf(this);"> 
  <area shape="poly" alt="NH" coords="420,68, 431,65, 431,62, 429,57, 423,39, 420,39, 420,51" href="javascript:void(0);" id="nh" onClick="javascript:lf(this);">
  <area shape="poly" alt="VT" coords="407,46, 419,42, 420,46, 419,51, 418,52, 417,68, 414,68, 411,57" href="javascript:void(0);" id="vt" onClick="javascript:lf(this);">
  <area shape="poly" alt="MA" coords="414,70, 431,65, 431,71, 439,74, 443,74, 439,74, 434,77, 429,74, 414,77" href="javascript:void(0);" id="ma" onClick="javascript:lf(this);"> 
  <area shape="poly" alt="MD" coords="409,126, 411,120, 405,120, 401,111, 400,107, 372,113, 372,117, 377,115, 380,113, 389,115, 397,123, 397,115, 397,109, 400,112, 401,120, 405,121, 405,126" href="javascript:void(0);" id="md" onClick="javascript:lf(this);">
  <area shape="poly" alt="NY" coords="429,86, 414,94, 413,94, 413,89, 406,87, 403,85, 403,83, 400,81, 397,81, 391,83, 365,88, 365,86, 369,80, 369,77, 368,75, 370,73, 374,72, 380,72, 385,71, 389,68, 387,60, 395,49, 405,47, 407,48, 407,51, 408,52, 408,57, 409,60, 409,62, 411,62, 411,65, 413,69, 413,82, 414,82, 414,89, 414,91,426,85, 428,85" href="javascript:void(0);" id="ny" onClick="javascript:lf(this);">
  <area shape="poly" alt="NJ" coords="406,88, 413,91, 411,94, 412,96, 414,96, 414,105, 413,107, 411,112, 409,110, 405,107, 407,103, 409,101, 408,98, 405,96, 405,89" href="javascript:void(0);" id="nj" onClick="javascript:lf(this);">
  <area shape="poly" alt="RI" coords="431,98, 447,98, 447,109, 431,109" href="javascript:void(0);" id="ri" onClick="javascript:lf(this);"> 
  <area shape="poly" alt="CT" coords="431,112, 447,112, 447,123, 431,123" href="javascript:void(0);" id="ct" onClick="javascript:lf(this);">
  <area shape="poly" alt="DE" coords="431,126, 447,126, 447,137, 431,137" href="javascript:void(0);" id="de" onClick="javascript:lf(this);">
  <area shape="poly" alt="PA" coords="359,91, 363,113, 404,105, 411,103, 403,97, 403,91, 404,91, 404,87, 399,83, 395,83, 365,90, 363,87, 359,89, 359,92" href="javascript:void(0);" id="pa" onClick="javascript:lf(this);"> 
  <area shape="poly" alt="VA" coords="347,150, 353,142, 358,144, 369,139, 372,127, 375,127, 377,126, 377,123, 381,118, 384,116, 389,117, 391,119, 391,123, 392,125, 399,127, 397,128, 399,132, 399,134, 394,135, 395,137, 400,137, 402,139, 407,138, 407,141, 387,144, 354,149" href="javascript:void(0);" id="va" onClick="javascript:lf(this);">
  <area shape="poly" alt="WV" coords="349,132, 350,135, 352,138, 358,142, 363,140, 367,138, 368,136, 368,133, 371,125, 372,125, 374,126, 375,125, 376,122, 379,119, 380,114, 378,114, 374,117, 372,119, 371,114, 363,114, 362,111, 361,112, 361,116, 358,119, 353,124, 351,128" href="javascript:void(0);" id="wv" onClick="javascript:lf(this);">
  <area shape="poly" alt="NC" coords="357,151, 406,142, 407,144, 406,146, 402,144, 400,147, 402,149, 408,149, 411,149, 410,154, 407,154, 403,154, 401,154, 405,157, 407,160, 405,162, 401,163, 396,168, 396,172, 389,172, 380,166, 374,166, 372,166, 369,166, 362,163, 357,166, 352,166, 349,168, 339,170, 341,166, 360,151" href="javascript:void(0);" id="nc" onClick="javascript:lf(this);">
  <area shape="poly" alt="FL" coords="315,218, 336,216, 339,218, 365,216, 367,212, 372,216, 379,230, 381,235, 391,252, 392,264, 391,271, 385,272, 381,265, 377,263, 372,257, 372,253, 366,247, 365,243, 363,233, 357,230, 352,223, 345,223, 339,229, 333,224, 332,223, 327,222, 320,220, 317,223" href="javascript:void(0);" id="fl" onClick="javascript:lf(this);"> 
  <area shape="poly" alt="SC" coords="349,170, 360,166, 369,166, 370,168, 378,167, 389,175, 374,197, 368,191" href="javascript:void(0);" id="sc" onClick="javascript:lf(this);">
  <area shape="poly" alt="GA" coords="327,172, 347,170, 372,199, 370,212, 366,212, 364,215, 339,216, 336,210, 336,200, 336,195" href="javascript:void(0);" id="ga" onClick="javascript:lf(this);">
  <area shape="poly" alt="AL" coords="305,175, 327,175, 335,200, 336,214, 315,216, 313,218, 315,223, 312,226, 311,220, 309,222, 309,226, 307,224" href="javascript:void(0);" id="al" onClick="javascript:lf(this);">
  <area shape="poly" alt="MS" coords="287,177, 305,175, 305,225, 297,226, 295,222, 295,218, 291,218, 277,217, 283,206, 281,201, 280,191" href="javascript:void(0);" id="ms" onClick="javascript:lf(this);"> 
  <area shape="poly" alt="TN" coords="289,175, 338,169, 341,164, 345,162, 357,151, 305,157, 303,160, 293,160, 291,164, 289,169" href="javascript:void(0);" id="tn" onClick="javascript:lf(this);">
  <area shape="poly" alt="KY" coords="329,127, 337,130, 341,130, 347,130, 349,136, 352,139, 351,141, 341,151, 303,154, 301,157, 295,157, 295,151, 299,154, 301,147, 305,144, 320,139" href="javascript:void(0);" id="ky" onClick="javascript:lf(this);">
  <area shape="poly" alt="OH" coords="327,100, 336,98, 347,98, 357,92, 360,109, 359,117, 355,120, 351,123, 349,129, 348,130, 344,129, 339,129, 335,127, 330,125, 329,121" href="javascript:void(0);" id="oh" onClick="javascript:lf(this);">
  <area shape="poly" alt="IN" coords="305,102, 323,100, 327,129, 323,130, 320,136, 317,138, 309,141, 303,141, 305,138, 307,130, 305,129" href="javascript:void(0);" id="in" onClick="javascript:lf(this);"> 
  <area shape="poly" alt="IL" coords="280,95, 298,94, 303,100, 303,117, 305,127, 305,134, 301,139, 301,144, 298,149, 293,149, 291,146, 289,144, 285,139, 284,134, 280,130, 277,127, 273,121, 274,115, 277,111, 277,107, 281,105, 281,102, 281,98" href="javascript:void(0);" id="il" onClick="javascript:lf(this);">
  <area shape="poly" alt="WI" coords="263,49, 269,49, 272,46, 272,49, 277,51, 277,52, 293,57, 297,62, 296,71, 298,71, 303,62, 298,77, 299,92, 277,92, 275,92, 273,85, 272,80, 260,71, 259,62, 259,60, 263,57" href="javascript:void(0);" id="wi" onClick="javascript:lf(this);">
  <area shape="poly" alt="MI" coords="277,51, 283,52, 291,55, 296,55, 299,62, 301,59, 301,55, 306,55, 312,52, 315,51, 318,52, 318,55, 317,59, 316,65, 314,65, 313,65, 310,71, 311,83, 312,92, 310,98, 336,95, 339,87, 340,83, 341,85, 338,71, 335,71, 331,76, 328,74, 329,71, 332,67, 330,60, 328,57, 320,52, 329,51, 323,49, 321,47,316,47, 315,45, 307,46, 305,49, 301,49, 295,45, 291,45, 289,42, 295,39, 293,39" href="javascript:void(0);" id="mi" onClick="javascript:lf(this);">
  <area shape="poly" alt="IA" coords="232,85, 271,85, 272,89, 275,92, 277,95, 280,98, 280,103, 275,105, 274,107, 275,109, 273,113, 272,114, 247,115, 239,115, 237,115, 237,109, 235,107, 235,101, 230,98" href="javascript:void(0);" id="ia" onClick="javascript:lf(this);"> 
  <area shape="poly" alt="MN" coords="227,26, 239,26, 241,21, 243,21, 243,28, 252,30, 254,28, 262,33, 269,35, 272,34, 280,34, 266,46, 261,48, 261,51, 261,55, 257,59, 257,62, 259,71, 269,80, 271,83, 257,83, 254,83, 233,83, 232,65, 230,62, 230,59, 230,57" href="javascript:void(0);" id="mn" onClick="javascript:lf(this);"> 
  <area shape="poly" alt="MO" coords="239,117, 269,117, 271,123, 281,135, 283,134, 282,140, 289,147, 292,154, 293,154, 292,158, 289,162, 287,162, 287,160, 286,160, 271,160, 247,160, 249,133, 245,129, 245,123, 242,123" href="javascript:void(0);" id="mo" onClick="javascript:lf(this);">
  <area shape="poly" alt="AR" coords="249,162, 259,162, 286,160, 284,165, 286,166, 289,166, 287,170, 286,172, 285,177, 283,177, 281,181, 281,184, 277,191, 279,197, 254,197, 254,194, 251,191, 249,169" href="javascript:void(0);" id="ar" onClick="javascript:lf(this);">
  <area shape="poly" alt="LA" coords="254,199, 279,199, 279,203, 280,205, 278,210, 275,220, 276,220, 292,220, 293,223, 294,227, 289,226, 288,229, 295,230, 298,230, 296,234, 301,238, 301,241, 293,235, 291,237, 292,240, 288,238, 285,238, 282,239, 280,235, 274,232, 272,236, 257,233, 257,224, 260,220, 257,212, 254,210" href="javascript:void(0);" id="la" onClick="javascript:lf(this);"> 
  <area shape="poly" alt="HI" coords="174,290, 185,288, 201,296, 221,304, 235,318, 225,327, 221,318, 216,306, 211,305, 197,297" href="javascript:void(0);" id="hi" onClick="javascript:lf(this);">
  <area shape="poly" alt="AK" coords="85,225, 101,278, 107,278, 116,283, 119,282, 119,278, 128,281, 138,289, 145,292, 148,298, 143,298, 143,292, 134,291, 125,283, 116,286, 110,283, 94,282, 89,278, 84,278, 81,284, 73,292, 73,286, 69,289, 69,295, 54,310, 39,318, 39,315, 57,303, 57,293, 49,294, 45,295, 42,285, 39,289, 33,283,37,283, 33,278, 37,271, 45,266, 45,259, 33,260, 32,253, 37,249, 45,252, 48,248, 37,239, 37,235, 39,234, 54,220, 63,223, 79,224" href="javascript:void(0);" id="ak" onClick="javascript:lf(this);">
  <area shape="poly" alt="TX" coords="174,162, 201,162, 201,181, 201,184, 205,187, 211,187, 220,191, 230,191, 239,191, 253,195, 253,210, 255,215, 257,219, 257,223, 256,230, 256,234, 249,237, 247,234, 244,235, 247,239, 233,247, 230,247, 230,250, 223,257, 220,264, 224,274, 222,278, 216,274, 205,271, 202,264, 198,251, 193,244,185,233, 174,232, 172,240, 163,240, 155,234, 155,226, 139,210, 138,207, 172,210" href="javascript:void(0);" id="tx" onClick="javascript:lf(this);">
  <area shape="poly" alt="OK" coords="174,154, 247,156, 247,168, 247,174, 249,174, 249,191, 247,191, 244,189, 242,189, 239,189, 235,190, 230,189, 228,187, 225,189, 219,189, 216,187, 211,187, 205,184, 202,183, 201,181, 201,162, 201,160, 177,159, 176,159" href="javascript:void(0);" id="ok" onClick="javascript:lf(this);"> 
  <area shape="poly" alt="KS" coords="185,123, 239,124, 243,125, 241,129, 246,134, 247,154, 185,154" href="javascript:void(0);" id="ks" onClick="javascript:lf(this);">
  <area shape="poly" alt="NE" coords="172,89, 215,92, 227,94, 234,105, 236,116, 239,121, 187,121, 187,115, 185,109, 172,109" href="javascript:void(0);" id="ne" onClick="javascript:lf(this);">
  <area shape="poly" alt="SD" coords="174,57, 230,59, 227,62, 227,65, 230,65, 230,83, 230,92, 228,92, 224,92, 221,92, 218,92, 215,90, 210,89, 185,89, 185,88, 172,88" href="javascript:void(0);" id="sd" onClick="javascript:lf(this);">
  <area shape="poly" alt="ND" coords="174,55, 230,55, 225,26, 176,24" href="javascript:void(0);" id="nd" onClick="javascript:lf(this);"> 
  <area shape="poly" alt="MT" coords="92,13, 174,24, 172,65, 128,62, 123,60, 119,60, 116,62, 116,64, 104,64, 100,51, 96,51, 94,51, 98,38, 92,31, 89,28, 89,13" href="javascript:void(0);" id="mt" onClick="javascript:lf(this);">
  <area shape="poly" alt="WY" coords="119,62, 172,67, 169,109, 114,102" href="javascript:void(0);" id="wy" onClick="javascript:lf(this);">
  <area shape="poly" alt="CO" coords="125,149, 183,154, 185,112, 130,107" href="javascript:void(0);" id="co" onClick="javascript:lf(this);"> 
  <area shape="poly" alt="NM" coords="123,151, 174,155, 171,207, 140,206, 137,206, 137,208, 131,207, 123,207, 123,212, 116,212, 118,202, 120,191, 123,172" href="javascript:void(0);" id="nm" onClick="javascript:lf(this);"> 
  <area shape="poly" alt="AZ" coords="81,144, 123,151, 114,210, 108,210, 106,209, 96,207, 66,190, 67,187, 69,187, 69,185, 69,182, 76,172, 73,167, 73,152, 79,154, 79,153, 81,149" href="javascript:void(0);" id="az" onClick="javascript:lf(this);">
  <area shape="poly" alt="UT" coords="92,92, 112,94, 112,103, 112,104, 128,106, 123,149, 81,142" href="javascript:void(0);" id="ut" onClick="javascript:lf(this);">
  <area shape="poly" alt="NV" coords="45,80, 89,90, 79,152, 76,151, 73,151, 73,161, 73,162, 37,111" href="javascript:void(0);" id="nv" onClick="javascript:lf(this);">
  <area shape="poly" alt="CA" coords="11,71, 43,79, 35,111, 69,162, 72,169, 73,171, 72,174, 66,183, 69,185, 67,187, 45,186, 45,177, 36,166, 27,160, 19,156, 20,148, 14,132, 16,128, 13,127, 13,121, 15,124, 15,117, 19,118, 15,114, 13,118, 7,99, 7,92, 6,87, 11,79" href="javascript:void(0);" id="ca" onClick="javascript:lf(this);"> 
  <area shape="poly" alt="OR" coords="25,28, 32,30, 33,37, 78,44, 79,46, 71,58, 66,83, 11,69, 13,59, 27,28" href="javascript:void(0);" id="or" onClick="javascript:lf(this);">
  <area shape="poly" alt="ID" coords="83,10, 89,12, 87,28, 96,39, 93,51, 97,52, 98,51, 101,62, 103,64, 116,66, 114,92, 69,84, 74,61, 72,59, 81,47, 79,42" href="javascript:void(0);" id="id" onClick="javascript:lf(this);">
  <area shape="poly" alt="WA" coords="27,0, 38,11, 32,18, 39,18, 43,0, 81,9, 74,42, 55,37, 45,37, 33,33, 31,26, 27,19"  href="javascript:void(0);" id="wa" onClick="javascript:lf(this);">
  </map> 
  <div id="dest">
  </div>

Open in new window

us-map.jpg
0
jinkillaAuthor Commented:
What program did you use to create that? I would like to try it on the map I have. For some reason they are really stuck on that map. I did as you directed but I am getting errors when I click on any of the states. Heres the link: http://pimpntechnology.com/map.html
0
jinkillaAuthor Commented:
renazonse:
The link you sent me was for image rollovers. I am sorry if I wasnt exactly clear on what I wanted, but I need to display text when the user mouseovers on a imagemap
0
selvolCommented:
Here you go....  I did not make that... I could say I did.  But I found it a few months ago..
I always recommend it to people.  I feel it helps people grasps web developement better them many programs out their,
 http://www.wysiwygwebbuilder.com/     Free 30 day unrestricted trial
It is sort of based on VIsual Web Developer (Microsoft) .
But it is more straight Forward.  
On the add menu. Select imagemap and draw a square on the page select the image and left click and add circle hotspot.
Selvol
 
0
jinkillaAuthor Commented:
downloading it and will tri it now. give a few minutes. thanx bro!
0
jinkillaAuthor Commented:
selvol:

Is there any way you can help me with the following: http://pimpntechnology.com/imapNit.html
When you moseover the link it display the text, but I do not know how to add it to the image map.
0
jinkillaAuthor Commented:
Nevermind I figured it out on my own. I needed to add "onMouseOver="toggleDiv('div1',1)" onMouseOut="toggleDiv('div1',0)" after the href code and it works proper now. but thanks for the help though
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
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
Web Development

From novice to tech pro — start learning today.