Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 17
  1. #1
    Member web101's Avatar
    Join Date
    Jan 2009
    Posts
    74
    Member #
    18165
    Hello everyone! I need some JS help. So I recently created an html file with a map that has hotspots for different states...

    HTML Code:
    <img src="media/us_map.gif" border="0" usemap="#Map" />
    <map name="Map" id="Map">
      <area shape="rect" coords="529,35,550,50" href="#maine" />
      <area shape="rect" coords="502,29,522,42" href="#nh" />
      <area shape="rect" coords="476,28,496,43" href="#vt" />
      <area shape="rect" coords="549,70,568,88" href="#ma" />
      <area shape="rect" coords="565,85,566,86" href="#" />
      <area shape="rect" coords="559,95,573,108" href="#ri" />
      <area shape="rect" coords="480,81,503,102" href="#ny" />
      <area shape="rect" coords="532,113,549,126" href="#ct" />
      <area shape="rect" coords="519,127,536,136" href="#nj" />
      <area shape="rect" coords="534,143,548,154" href="#de" />
      <area shape="rect" coords="517,160,539,174" href="#md" />
      <area shape="rect" coords="513,182,535,195" href="#dc" />
      <area shape="rect" coords="461,115,484,137" href="#pa" />
      <area shape="rect" coords="465,163,485,177" href="#va" />
      <area shape="rect" coords="462,190,486,209" href="#nc" />
      <area shape="rect" coords="452,215,469,232" href="#sc" />
      <area shape="rect" coords="419,232,447,258" href="#ga" />
      <area shape="rect" coords="448,290,470,314" href="#fl" />
      <area shape="rect" coords="412,133,434,152" href="#oh" />
      <area shape="rect" coords="436,158,456,172" href="#wv" />
      <area shape="rect" coords="399,173,422,190" href="#ky" />
      <area shape="rect" coords="375,198,410,216" href="#tn" />
      <area shape="rect" coords="380,230,408,267" href="#al" />
      <area shape="rect" coords="390,98,412,123" href="#mi" />
      <area shape="rect" coords="379,140,401,163" href="#in" />
      <area shape="rect" coords="335,74,362,103" href="#wi" />
      <area shape="rect" coords="345,140,373,166" href="#il" />
      <area shape="rect" coords="352,234,373,271" href="#ms" />
      <area shape="rect" coords="286,58,319,88" href="#mn" />
      <area shape="rect" coords="298,114,330,144" href="#ia" />
      <area shape="rect" coords="310,160,341,193" href="#mo" />
      <area shape="rect" coords="313,210,345,242" href="#ar" />
      <area shape="rect" coords="315,253,343,280" href="#la" />
      <area shape="rect" coords="225,39,274,71" href="#nd" />
      <area shape="rect" coords="219,81,277,109" href="#sd" />
      <area shape="rect" coords="238,120,277,151" href="#ne" />
      <area shape="rect" coords="240,160,297,191" href="#ks" />
      <area shape="rect" coords="255,200,298,234" href="#ok" />
      <area shape="rect" coords="218,245,292,285" href="#tx" />
      <area shape="rect" coords="138,30,197,74" href="#mt" />
      <area shape="rect" coords="156,89,203,128" href="#wy" />
      <area shape="rect" coords="166,142,219,184" href="#co" />
      <area shape="rect" coords="155,199,204,251" href="#nm" />
      <area shape="rect" coords="99,76,125,102" href="#id" />
      <area shape="rect" coords="111,135,146,171" href="#ut" />
      <area shape="rect" coords="99,197,138,242" href="#az" />
      <area shape="rect" coords="54,17,90,43" href="#wa" />
      <area shape="rect" coords="29,61,78,88" href="#or" />
      <area shape="rect" coords="60,121,97,155" href="#nv" />
      <area shape="rect" coords="27,156,59,192" href="#ca" />
      <area shape="rect" coords="2,253,92,355" href="#ak" />
      <area shape="rect" coords="142,316,223,367" href="#hi" />
    </map>
    That all worked out fine, but now I need some help. I want to have it so that when you click on one of the hotspots, it has certain text open in a box that will go next to it. Is that possible? Thanks in advance!

  2.  

  3. #2
    Member ungus's Avatar
    Join Date
    Aug 2009
    Location
    Iowa
    Posts
    72
    Member #
    19722
    Hi web,

    I'm putting together a quick example for you, I'll have it up in about 5-10 minutes.

    Ungus
    Josh

  4. #3
    Member ungus's Avatar
    Join Date
    Aug 2009
    Location
    Iowa
    Posts
    72
    Member #
    19722
    Hello,

    Ok.. that was a little longer then 10 minutes. Apologize about that if you've been waiting. Ah.. the life of a single dad freelancer. :-)

    Here is the example I put together for you, I hope it helps. Feel free to ask anything else.

    Image Map Example:
    http://dev.ungus.com/img-map-example/

    Ungus

    Quote Originally Posted by ungus
    Hi web,

    I'm putting together a quick example for you, I'll have it up in about 5-10 minutes.

    Ungus
    Josh

  5. #4
    Member web101's Avatar
    Join Date
    Jan 2009
    Posts
    74
    Member #
    18165
    Thanks ungus! I looked at your example and it looks really good, except would it be possible for when you click on one of those states, certain text will show up in a box next to it? Like when you click on a state, can it do a swap image thing but instead of an image it has text?

  6. #5
    Member ungus's Avatar
    Join Date
    Aug 2009
    Location
    Iowa
    Posts
    72
    Member #
    19722
    Web,

    Did you not see a blue box pop-up for Iowa or Texas when you hovered over them?

    Ungus

    Quote Originally Posted by web101
    Thanks ungus! I looked at your example and it looks really good, except would it be possible for when you click on one of those states, certain text will show up in a box next to it? Like when you click on a state, can it do a swap image thing but instead of an image it has text?
    Josh

  7. #6
    Member web101's Avatar
    Join Date
    Jan 2009
    Posts
    74
    Member #
    18165
    Well I wanted it to look more like this...

    http://pxlcreations.com/image.gif

  8. #7
    Member web101's Avatar
    Join Date
    Jan 2009
    Posts
    74
    Member #
    18165
    Would that be possible?

  9. #8
    Member ungus's Avatar
    Join Date
    Aug 2009
    Location
    Iowa
    Posts
    72
    Member #
    19722
    Ah... okay, I see what you're wanting. That's even easier, I'll rearrange it after work tonight and send her your way. Around 6-7pm CST

    Ungus
    Josh

  10. #9
    Member web101's Avatar
    Join Date
    Jan 2009
    Posts
    74
    Member #
    18165
    Alright, thanks dude! You've been a great help!

  11. #10
    Member web101's Avatar
    Join Date
    Jan 2009
    Posts
    74
    Member #
    18165
    Oh yeah, here's my new map..


    HTML Code:
    <img src="media/us_map.gif" border="0" usemap="#map" />
    <map name="map" id="map">
      <area shape="poly" coords="532,77,522,52,525,51,527,47,526,38,525,29,528,18,532,20,536,15,541,18,546,34,560,45" href="#me" />
      <area shape="poly" coords="517,83,517,64,523,56,532,81,519,86" href="#nh" />
      <area shape="poly" coords="502,58,505,78,508,84,511,92,519,88,516,66,520,55" href="#vt" />
      <area shape="poly" coords="511,99,512,92" href="#" />
      <area shape="poly" coords="543,91,546,94,538,98,533,94,532,92,512,100,512,93,533,81,518,86,531,85,538,87" href="#ma" />
      <area shape="poly" coords="528,95,531,104,536,98,531,94" href="#ri" />
      <area shape="poly" coords="513,101,515,111,529,104,528,96,524,97" href="#ct" />
      <area shape="poly" coords="529,110,519,118,510,119,494,104,453,114,449,109,455,104,453,97,458,94,471,92,479,85,472,78,480,75,481,67,498,61,490,62,501,61,504,78,511,92,510,100,514,110,514,114,511,112" href="#ny" />
      <area shape="poly" coords="501,134,507,140,512,125,509,123,511,114,502,109,500,112,497,121,505,127,506,125,500,132" href="#nj" />
      <area shape="poly" coords="495,136,500,152,507,148,498,134" href="#de" />
      <area shape="poly" coords="502,167,506,156,507,149,501,153,492,137,460,142,460,148,465,147,473,144,479,146,483,147" href="#md" />
      <area shape="poly" coords="448,145,443,114,449,109,453,114,494,105,500,110,497,121,503,127,497,135" href="#pa" />
      <area shape="poly" coords="436,176,429,167,432,159,447,145,458,145,447,149,459,145,461,150,470,147,464,160,457,162,452,178" href="#wwv" />
      <area shape="poly" coords="427,190,437,178,450,180,458,163,465,162,471,146,485,150,495,163,502,176" href="#va" />
      <area shape="poly" coords="418,216,431,214,439,207,450,206,455,208,468,209,484,221,487,217,497,205,501,204,511,193,505,176,446,185,441,198,432,197,420,212" href="#nc" />
      <area shape="poly" coords="430,215,436,220,445,230,457,238,459,250,485,221,470,210,449,205,438,208" href="#sc" />
      <area shape="poly" coords="415,275,415,251,405,216,429,215,445,231,455,238,459,251,456,267,451,272,450,276,445,272" href="#ga" />
      <area shape="poly" coords="387,275,386,283,398,282,409,284,416,290,429,282,439,289,445,292,445,311,456,326,462,335,470,341,463,351,471,349,479,339,481,325,476,310,470,298,462,284,458,270,452,275,445,272,418,277,413,271" href="#fl" />
      <area shape="poly" coords="377,284,374,221,403,218,412,247,413,272,389,272,384,282" href="#al" />
      <area shape="poly" coords="341,277,348,260,345,251,346,234,354,221,373,220,376,285,365,288,362,278" href="#ms" />
      <area shape="poly" coords="313,297,319,278,312,266,311,246,316,250,342,250,347,259,342,278,361,279,364,289,363,297,368,302,358,303,348,305,341,294,330,302" href="#la" />
      <area shape="poly" coords="356,220,361,200,372,199,445,187,442,198,432,196,419,216" href="#tn" />
      <area shape="poly" coords="363,198,365,191,370,191,371,182,386,178,405,160,415,165,427,164,436,178,424,189" href="#ky" />
      <area shape="poly" coords="407,160,400,124,413,121,423,125,431,123,439,116,447,143,431,159,430,163,415,162,421,163" href="#oh" />
      <area shape="poly" coords="381,124,387,112,381,101,381,89,395,68,400,73,405,76,410,86,405,95,406,103,414,91,419,101,420,111,412,122" href="#mi" />
      <area shape="poly" coords="341,62,353,70,366,74,367,85,371,70,381,70,390,64,399,66,400,54,360,46" href="#mi" />
      <area shape="poly" coords="375,180,375,129,384,125,400,124,408,160,388,177" href="#in" />
      <area shape="poly" coords="364,192,356,184,348,177,350,170,344,169,334,154,338,150,339,138,347,127,344,124,340,120,368,116,373,130,375,180,368,180,369,189" href="#il" />
      <area shape="poly" coords="339,121,335,106,319,91,316,78,324,73,322,65,336,59,364,77,365,90,373,80,367,113,368,116" href="#wi" />
      <area shape="poly" coords="286,108,286,86,280,80,283,74,280,33,298,33,323,45,343,43,322,66,324,73,316,80,318,90,337,107" href="#mn" />
      <area shape="poly" coords="285,108,284,123,292,148,337,148,338,138,346,127,341,120,335,107" href="#ia" />
      <area shape="poly" coords="293,150,301,157,299,163,309,171,305,198,354,200,352,207,360,206,365,194,347,177,349,171,344,169,334,154,339,148" href="#mo" />
      <area shape="poly" coords="309,243,307,199,352,203,348,208,358,207,356,220,346,234,344,247,314,248,341,248,318,251" href="#ar" />
      <area shape="poly" coords="215,73,219,31,278,32,281,76" href="#nd" />
      <area shape="poly" coords="209,112,216,74,279,77,285,85,282,121,276,115,270,117,264,114" href="#sd" />
      <area shape="poly" coords="209,136,210,113,264,114,267,116,275,117,282,122,292,152,294,154,229,152,226,142,228,139" href="#ne" />
      <area shape="poly" coords="227,192,227,152,294,155,301,159,294,163,309,172,304,197" href="#ks" />
      <area shape="poly" coords="213,199,214,192,306,199,309,244,291,241,271,243,256,235,246,233,247,202" href="#ok" />
      <area shape="poly" coords="168,258,170,270,184,280,188,296,201,303,212,294,224,294,242,318,253,338,274,348,273,324,312,299,317,278,310,268,311,245,290,242,276,245,255,237,245,233,246,203,213,200,209,259" href="#tx" />
      <area shape="poly" coords="115,16,110,30,120,50,115,61,123,61,129,82,148,79,211,86,218,30" href="#mt" />
      <area shape="poly" coords="137,127,145,79,213,87,209,105,209,138" href="#wy" />
      <area shape="poly" coords="153,184,161,132,227,140,228,149,226,191" href="#co" />
      <area shape="poly" coords="140,261,153,182,213,190,208,257,151,253,149,263" href="#nm" />
      <area shape="poly" coords="79,105,90,74,86,73,99,61,95,49,106,13,114,16,109,27,119,49,115,60,122,64,128,82,145,81,136,114" href="#id" />
      <area shape="poly" coords="98,175,111,112,135,113,135,125,160,130,153,184" href="#ut" />
      <area shape="poly" coords="80,236,117,255,135,263,152,186,99,174,92,192,89,191,89,214" href="#az" />
      <area shape="poly" coords="34,34,41,37,44,47,95,51,105,12,60,1,57,14,51,20,49,11,38,6" href="#wa" />
      <area shape="poly" coords="79,102,11,85,34,34,42,37,42,49,94,52,98,62,85,72,89,77" href="#or" />
      <area shape="poly" coords="53,98,42,134,87,199,89,190,93,191,97,174,110,112" href="#nv" />
      <area shape="poly" coords="78,234,51,233,41,209,30,198,21,197,21,185,13,166,14,158,7,150,6,108,12,88,53,97,42,135,87,200,85,216" href="#ca" />
      <area shape="poly" coords="0,370,133,345,101,312,84,315,69,256,26,252,6,252,0,252" href="#ak" />
      <area shape="poly" coords="139,322,159,355,193,364,221,362,197,331,158,320" href="#hi" />
      <area shape="poly" coords="515,182" href="#" />
      <area shape="rect" coords="514,182,535,196" href="#dc" />
      <area shape="rect" coords="517,160,540,174" href="#md" />
      <area shape="rect" coords="531,141,550,156" href="#de" />
      <area shape="rect" coords="519,125,538,138" href="#nj" />
      <area shape="rect" coords="532,113,549,125" href="#ct" />
      <area shape="rect" coords="558,94,571,108" href="#ri" />
      <area shape="rect" coords="549,72,568,86" href="#ma" />
      <area shape="rect" coords="502,29,522,42" href="#nh" />
      <area shape="rect" coords="476,29,496,44" href="#vt" />
    </map>
    And the map I am using...

    http://www.pxlcreations.com/us_map.gif


Page 1 of 2 1 2 LastLast

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 12:15 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com