Pastebin launched a little side project called VERYVIRAL.com, check it out ;-) Want more features on Pastebin? Sign Up, it's FREE!

PayneLess Designs - Image Map as Background

By: PayneLess_Designs on Dec 5th, 2011  |  syntax: HTML  |  size: 15.89 KB  |  views: 480  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"  "http://www.w3.org/TR/html4/strict.dtd">
  2. <html><head>
  3. <title>USA Image Map as Background</title>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5. <meta name="description" content="Your Website description goes here">
  6. <meta name="keywords" content="Your Website keywords go here, separated by commas">
  7.  
  8. <style type="text/css">
  9. /* Copyrighted by PayneLess Designs 5 August 2010 to Present | All Rights Reserved */
  10. * { margin: 0; padding: 0; border: 0; }
  11. /* START Image Map USA Styling */
  12. div#map-wrap {
  13. width: 1024px;
  14. height: 633px;
  15. margin: 0 auto;
  16. /*margin-top: 3%;*/
  17. background: url(http://i1087.photobucket.com/albums/j473/Stutter_Bug/usa-map-with-state-namesjpg1024x633.jpg) no-repeat center scroll;
  18. }
  19.  
  20. div#map-wrap img#map {
  21. width: 1024px;
  22. height: 633px;
  23. }
  24.  
  25. p {
  26. width: 1024px;
  27. margin: 1% auto;
  28. text-align: center;
  29. }
  30. /* END Image Map USA Styling */
  31.  
  32. h1, h3 { text-align: center; }
  33. </style>
  34. </head>
  35. <body><div><a name="top"></a></div>
  36. <h1>Image Map as Background Image While Retaining Clickable Areas</h1>
  37. <h3>Client Side Image Map</h3>
  38. <div id="logo"><a href="http://PayneLessDesigns.com/" title="Back to Home Page"><img src="http://PayneLessDesigns.com/imgs/logos/logo_pld-vertical001.png" alt="Back to Home Page"></a></div>
  39.  
  40. <p>This image map was made using the rectangular tool where only the name of the state is used to produce the clickable area. Anywhere off these areas will produce a clickable link back to home page. The original image map is being used as a background image with a clear image map over it which retains the clickable areas. You must have a good graphics editor which allows you to set a copy of your image map to full transparency. Be sure to save as a PNG/GIF image. May have to tweak to re-align the clickable areas..</p>
  41. <p>Clicking on the state names will open new tab to Wikipedia for that state.</p>
  42.  
  43. <div id="map-wrap">
  44. <img src="http://i1087.photobucket.com/albums/j473/Stutter_Bug/usa-map-with-state-namesjpg1024x633-1.png"  alt="Image Map USA - Transparent"  usemap="#Map-USA">
  45. <map name="Map-USA">
  46.  
  47. <area shape="rect" coords="727,42,835,60" href="http://en.wikipedia.org/wiki/New_hampshire"alt="New Hampshire" title="New Hampshire" onmouseover="window.status='Maine'; return true" onmouseout="window.status=''; return true" onclick="window.open (this.href, ''); return false">
  48.  
  49. <area shape="rect" coords="733,96,832,114" href="http://en.wikipedia.org/wiki/Massachusetts"alt="Massachusetts" title="Massachusetts" onmouseover="window.status='Massachusetts'; return true" onmouseout="window.status=''; return true" onclick="window.open (this.href, ''); return false">
  50.  
  51. <area shape="rect" coords="776,70,833,88" href="http://en.wikipedia.org/wiki/Vermont"alt="Vermont" title="Vermont" onmouseover="window.status='Vermont'; return true" onmouseout="window.status=''; return true" onclick="window.open (this.href, ''); return false">
  52.  
  53. <area shape="rect" coords="899,98,953,115" href="http://en.wikipedia.org/wiki/Maine"alt="Maine" title="Maine" onmouseover="window.status='Maine'; return true" onmouseout="window.status=''; return true" onclick="window.open (this.href, ''); return false">
  54.  
  55. <area shape="rect" coords="924,210,1011,228" href="http://en.wikipedia.org/wiki/Rhode_island"alt="Rhode Island" title="Rhode Island" onmouseover="window.status='Rhode Island'; return true" onmouseout="window.status=''; return true" onclick="window.open (this.href, ''); return false">
  56.  
  57. <area shape="rect" coords="790,186,857,201" href="http://en.wikipedia.org/wiki/New_york"alt="New York" title="New York" onmouseover="window.status='New York'; return true" onmouseout="window.status=''; return true" onclick="window.open (this.href, ''); return false">
  58.  
  59. <area shape="rect" coords="761,230,847,247" href="http://en.wikipedia.org/wiki/Pennsylvania"alt="Pennsylvania" title="Pennsylvania" onmouseover="window.status='Pennsylvania'; return true" onmouseout="window.status=''; return true" onclick="window.open (this.href, ''); return false">
  60.  
  61. <area shape="rect" coords="932,238,1010,254" href="http://en.wikipedia.org/wiki/Connecticut"alt="Connecticut" title="Connecticut" onmouseover="window.status='Connecticut'; return true" onmouseout="window.status=''; return true" onclick="window.open (this.href, ''); return false">
  62.  
  63. <area shape="rect" coords="934,263,1013,282" href="http://en.wikipedia.org/wiki/New_jersey"alt="New Jersey" title="New Jersey" onmouseover="window.status='New Jersey'; return true" onmouseout="window.status=''; return true" onclick="window.open (this.href, ''); return false">
  64.  
  65. <area shape="rect" coords="949,290,1010,307" href="http://en.wikipedia.org/wiki/Delaware"alt="Delaware" title="Delaware" onmouseover="window.status='Delaware'; return true" onmouseout="window.status=''; return true" onclick="window.open (this.href, ''); return false">
  66.  
  67. <area shape="rect" coords="950,315,1012,335" href="http://en.wikipedia.org/wiki/Maryland"alt="Maryland" title="Maryland" onmouseover="window.status='Maryland'; return true" onmouseout="window.status=''; return true" onclick="window.open (this.href, ''); return false">
  68.  
  69. <area shape="rect" coords="933,344,1011,359" href="http://en.wikipedia.org/wiki/Washington,_D.C."alt="Washington D.C." title="Washington D.C." onmouseover="window.status='Washington D.C.'; return true" onmouseout="window.status=''; return true" onclick="window.open (this.href, ''); return false">
  70.  
  71. <area shape="rect" coords="928,364,1010,385" href="http://en.wikipedia.org/wiki/West_virginia"alt="West Virginia" title="West Virginia" onmouseover="window.status='West Virginia'; return true" onmouseout="window.status=''; return true" onclick="window.open (this.href, ''); return false">
  72.  
  73. <area shape="rect" coords="777,316,828,334" href="http://en.wikipedia.org/wiki/Virginia"alt="Virginia" title="Virginia" onmouseover="window.status='Virginia'; return true" onmouseout="window.status=''; return true" onclick="window.open (this.href, ''); return false">
  74.  
  75. <area shape="rect" coords="748,358,843,373" href="http://en.wikipedia.org/wiki/North_carolina"alt="North Carolina" title="North Carolina" onmouseover="window.status='North Carolina'; return true" onmouseout="window.status=''; return true" onclick="window.open (this.href, ''); return false">
  76.  
  77. <area shape="rect" coords="752,386,810,416" href="http://en.wikipedia.org/wiki/South_carolina"alt="South Carolina" title="South Carolina" onmouseover="window.status='South Carolina'; return true" onmouseout="window.status=''; return true" onclick="window.open (this.href, ''); return false">
  78.  
  79. <area shape="rect" coords="711,433,765,450" href="http://en.wikipedia.org/wiki/Georgia_(U.S._state)"alt="Georgia" title="Georgia" onmouseover="window.status='Georgia'; return true" onmouseout="window.status=''; return true" onclick="window.open (this.href, ''); return false">
  80.  
  81. <area shape="rect" coords="764,544,814,561" href="http://en.wikipedia.org/wiki/Florida"alt="Florida" title="Florida" onmouseover="window.status='Florida'; return true" onmouseout="window.status=''; return true" onclick="window.open (this.href, ''); return false">
  82.  
  83. <area shape="rect" coords="642,424,699,440" href="http://en.wikipedia.org/wiki/Alabama"alt="Alabama" title="Alabama" onmouseover="window.status='Alabama'; return true" onmouseout="window.status=''; return true" onclick="window.open (this.href, ''); return false">
  84.  
  85. <area shape="rect" coords="579,439,651,457" href="http://en.wikipedia.org/wiki/Mississippi"alt="Mississippi" title="Mississippi" onmouseover="window.status='Mississippi'; return true" onmouseout="window.status=''; return true" onclick="window.open (this.href, ''); return false">
  86.  
  87. <area shape="rect" coords="545,496,608,511" href="http://en.wikipedia.org/wiki/Louisiana"alt="Louisiana" title="Louisiana" onmouseover="window.status='Louisiana'; return true" onmouseout="window.status=''; return true" onclick="window.open (this.href, ''); return false">
  88.  
  89. <area shape="rect" coords="418,473,458,489" href="http://en.wikipedia.org/wiki/Texas"alt="Texas" title="Texas" onmouseover="window.status='Texas'; return true" onmouseout="window.status=''; return true" onclick="window.open (this.href, ''); return false">
  90.  
  91. <area shape="rect" coords="625,367,699,384" href="http://en.wikipedia.org/wiki/Tennessee"alt="Tennessee" title="Tennessee" onmouseover="window.status='Tennessee'; return true" onmouseout="window.status=''; return true" onclick="window.open (this.href, ''); return false">
  92.  
  93. <area shape="rect" coords="654,330,717,348" href="http://en.wikipedia.org/wiki/Kentucky"alt="Kentucky" title="Kentucky" onmouseover="window.status='Kentucky'; return true" onmouseout="window.status=''; return true" onclick="window.open (this.href, ''); return false">
  94.  
  95. <area shape="rect" coords="705,256,737,274" href="http://en.wikipedia.org/wiki/Ohio"alt="Ohio" title="Ohio" onmouseover="window.status='Ohio'; return true" onmouseout="window.status=''; return true" onclick="window.open (this.href, ''); return false">
  96.  
  97. <area shape="rect" coords="638,274,689,288" href="http://en.wikipedia.org/wiki/Indiana"alt="Indiana" title="Indiana" onmouseover="window.status='Indiana'; return true" onmouseout="window.status=''; return true" onclick="window.open (this.href, ''); return false">
  98.  
  99. <area shape="rect" coords="655,194,714,213" href="http://en.wikipedia.org/wiki/Michigan"alt="Michigan" title="Michigan" onmouseover="window.status='Michigan'; return true" onmouseout="window.status=''; return true" onclick="window.open (this.href, ''); return false">
  100.  
  101. <area shape="rect" coords="591,275,633,289" href="http://en.wikipedia.org/wiki/Illinois"alt="Illinois" title="Illinois" onmouseover="window.status='Illinois'; return true" onmouseout="window.status=''; return true" onclick="window.open (this.href, ''); return false">
  102.  
  103. <area shape="rect" coords="556,161,624,177" href="http://en.wikipedia.org/wiki/Wisconsin"alt="Wisconsin" title="Wisconsin" onmouseover="window.status='Wisconsin'; return true" onmouseout="window.status=''; return true" onclick="window.open (this.href, ''); return false">
  104.  
  105. <area shape="rect" coords="484,135,553,151" href="http://en.wikipedia.org/wiki/Minnesota"alt="Minnesota" title="Minnesota" onmouseover="window.status='Minnesota'; return true" onmouseout="window.status=''; return true" onclick="window.open (this.href, ''); return false">
  106.  
  107. <area shape="rect" coords="519,234,553,250" href="http://en.wikipedia.org/wiki/Iowa"alt="Iowa" title="Iowa" onmouseover="window.status='Iowa'; return true" onmouseout="window.status=''; return true" onclick="window.open (this.href, ''); return false">
  108.  
  109. <area shape="rect" coords="527,309,585,327" href="http://en.wikipedia.org/wiki/Missouri"alt="Missouri" title="Missouri" onmouseover="window.status='Missouri'; return true" onmouseout="window.status=''; return true" onclick="window.open (this.href, ''); return false">
  110.  
  111. <area shape="rect" coords="529,387,591,402" href="http://en.wikipedia.org/wiki/Arkansas"alt="Arkansas" title="Arkansas" onmouseover="window.status='Arkansas'; return true" onmouseout="window.status=''; return true" onclick="window.open (this.href, ''); return false">
  112.  
  113. <area shape="rect" coords="437,377,503,393" href="http://en.wikipedia.org/wiki/Oklahoma"alt="Oklahoma" title="Oklahoma" onmouseover="window.status='Oklahoma'; return true" onmouseout="window.status=''; return true" onclick="window.open (this.href, ''); return false">
  114.  
  115. <area shape="rect" coords="420,312,472,329" href="http://en.wikipedia.org/wiki/Kansas"alt="Kansas" title="Kansas" onmouseover="window.status='Kansas'; return true" onmouseout="window.status=''; return true" onclick="window.open (this.href, ''); return false">
  116.  
  117. <area shape="rect" coords="403,237,466,259" href="http://en.wikipedia.org/wiki/Nebraska"alt="Nebraska" title="Nebraska" onmouseover="window.status='Nebraska'; return true" onmouseout="window.status=''; return true" onclick="window.open (this.href, ''); return false">
  118.  
  119. <area shape="rect" coords="385,176,472,193" href="http://en.wikipedia.org/wiki/South_dakota"alt="South Dakota" title="South Dakota" onmouseover="window.status='South Dakota'; return true" onmouseout="window.status=''; return true" onclick="window.open (this.href, ''); return false">
  120.  
  121. <area shape="rect" coords="380,107,466,127" href="http://en.wikipedia.org/wiki/North_dakota"alt="North Dakota" title="North Dakota" onmouseover="window.status='North Dakota'; return true" onmouseout="window.status=''; return true" onclick="window.open (this.href, ''); return false">
  122.  
  123. <area shape="rect" coords="255,105,312,122" href="http://en.wikipedia.org/wiki/Montana"alt="Montana" title="Montana" onmouseover="window.status='Montana'; return true" onmouseout="window.status=''; return true" onclick="window.open (this.href, ''); return false">
  124.  
  125. <area shape="rect" coords="269,202,335,221" href="http://en.wikipedia.org/wiki/Wyoming"alt="Wyoming" title="Wyoming" onmouseover="window.status='Wyoming'; return true" onmouseout="window.status=''; return true" onclick="window.open (this.href, ''); return false">
  126.  
  127. <area shape="rect" coords="298,293,356,313" href="http://en.wikipedia.org/wiki/Colorado"alt="Colorado" title="Colorado" onmouseover="window.status='Colorado'; return true" onmouseout="window.status=''; return true" onclick="window.open (this.href, ''); return false">
  128.  
  129. <area shape="rect" coords="272,395,352,416" href="http://en.wikipedia.org/wiki/New_mexico"alt="New Mexico" title="New Mexico" onmouseover="window.status='New Mexico'; return true" onmouseout="window.status=''; return true" onclick="window.open (this.href, ''); return false">
  130.  
  131. <area shape="rect" coords="175,382,231,401" href="http://en.wikipedia.org/wiki/Arizona"alt="Arizona" title="Arizona" onmouseover="window.status='Arizona'; return true" onmouseout="window.status=''; return true" onclick="window.open (this.href, ''); return false">
  132.  
  133. <area shape="rect" coords="203,269,237,289" href="http://en.wikipedia.org/wiki/Utah"alt="Utah" title="Utah" onmouseover="window.status='Utah'; return true" onmouseout="window.status=''; return true" onclick="window.open (this.href, ''); return false">
  134.  
  135. <area shape="rect" coords="176,172,215,190" href="http://en.wikipedia.org/wiki/Idaho"alt="Idaho" title="Idaho" onmouseover="window.status='Idaho'; return true" onmouseout="window.status=''; return true" onclick="window.open (this.href, ''); return false">
  136.  
  137. <area shape="rect" coords="79,59,159,79" href="http://en.wikipedia.org/wiki/Washington_(U.S._state)"alt="Washington" title="Washington" onmouseover="window.status='Washington'; return true" onmouseout="window.status=''; return true" onclick="window.open (this.href, ''); return false">
  138.  
  139. <area shape="rect" coords="69,140,121,158" href="http://en.wikipedia.org/wiki/Oregon"alt="Oregon" title="Oregon" onmouseover="window.status='Oregon'; return true" onmouseout="window.status=''; return true" onclick="window.open (this.href, ''); return false">
  140.  
  141. <area shape="rect" coords="104,246,159,267" href="http://en.wikipedia.org/wiki/Nevada"alt="Nevada" title="Nevada" onmouseover="window.status='Nevada'; return true" onmouseout="window.status=''; return true" onclick="window.open (this.href, ''); return false">
  142.  
  143. <area shape="rect" coords="47,316,110,334" href="http://en.wikipedia.org/wiki/California"alt="California" title="California" onmouseover="window.status='California'; return true" onmouseout="window.status=''; return true" onclick="window.open (this.href, ''); return false">
  144.  
  145. <area shape="rect" coords="98,521,140,541" href="http://en.wikipedia.org/wiki/Alaska"alt="Alaska" title="Alaska" onmouseover="window.status='Alaska'; return true" onmouseout="window.status=''; return true" onclick="window.open (this.href, ''); return false">
  146.  
  147. <area shape="rect" coords="259,578,306,601" href="http://en.wikipedia.org/wiki/Hawaii"alt="Hawaii" title="Hawaii" onmouseover="window.status='Hawaii'; return true" onmouseout="window.status=''; return true" onclick="window.open (this.href, ''); return false">
  148.  
  149. <area shape="default" href="http://PayneLessDesigns.com/" alt="Default URL" title="Default URL">
  150. </map>
  151. </div>
  152. <!-- End of Client Side Image Map -->
  153. </body></html>
  154.