Submit your widget

Europe clickable map with jQuery

Created 12 years ago   Views 18358   downloads 3685    Author winstonwolf
Europe clickable map with jQuery
View DemoDownload
78
Share |

Warning! Basic knowledge of HTML/xHTML, CSS and JavaScript is required for proper installation and editing the map.

Paste the following list to your HTML/xHTML code:

<div id="map-eu">
  <ul id="europe">
    <li id="eu1"><a href="#albania">Albania</a></li>
    <li id="eu2"><a href="#andorra">Andorra</a></li>
    <li id="eu3"><a href="#austria">Austria</a></li>
    <li id="eu4"><a href="#belarus">Belarus</a></li>
    <li id="eu5"><a href="#belgium">Belgium</a></li>
    <li id="eu6"><a href="#bosnia-and-herzegovina">Bosnia and Herzegovina</a></li>
    <li id="eu7"><a href="#bulgaria">Bulgaria</a></li>
    <li id="eu8"><a href="#croatia">Croatia</a></li>
    <li id="eu9"><a href="#cyprus">Cyprus</a></li>
    <li id="eu10"><a href="#czech-republic">Czech Republic</a></li>
    <li id="eu11"><a href="#denmark">Denmark</a></li>
    <li id="eu12"><a href="#estonia">Estonia</a></li>
    <li id="eu13"><a href="#france">France</a></li>
    <li id="eu14"><a href="#finland">Finland</a></li>
    <li id="eu15"><a href="#georgia">Georgia</a></li>
    <li id="eu16"><a href="#germany">Germany</a></li>
    <li id="eu17"><a href="#greece">Greece</a></li>
    <li id="eu18"><a href="#hungary">Hungary</a></li>
    <li id="eu19"><a href="#iceland">Iceland</a></li>
    <li id="eu20"><a href="#ireland">Ireland</a></li>
    <li id="eu22"><a href="#italy">Italy</a></li>
    <li id="eu23"><a href="#kosovo">Kosovo</a></li>
    <li id="eu24"><a href="#latvia">Latvia</a></li>
    <li id="eu25"><a href="#liechtenstein">Liechtenstein</a></li>
    <li id="eu26"><a href="#lithuania">Lithuania</a></li>
    <li id="eu27"><a href="#luxembourg">Luxembourg</a></li>
    <li id="eu28"><a href="#macedonia">Macedonia</a></li>
    <li id="eu29"><a href="#malta">Malta</a></li>
    <li id="eu30"><a href="#moldova">Moldova</a></li>
    <li id="eu31"><a href="#monaco">Monaco</a></li>
    <li id="eu32"><a href="#montenegro">Montenegro</a></li>
    <li id="eu33"><a href="#netherlands">Netherlands</a></li>
    <li id="eu34"><a href="#norway">Norway</a></li>
    <li id="eu35"><a href="#poland">Poland</a></li>
    <li id="eu36"><a href="#portugal">Portugal</a></li>
    <li id="eu37"><a href="#romania">Romania</a></li>
    <li id="eu38"><a href="#russia">Russia</a></li>
    <li id="eu21"><a href="#san-marino">San Marino</a></li>
    <li id="eu39"><a href="#serbia">Serbia</a></li>
    <li id="eu40"><a href="#slovakia">Slovakia</a></li>
    <li id="eu41"><a href="#slovenia">Slovenia</a></li>
    <li id="eu42"><a href="#spain">Spain</a></li>
    <li id="eu43"><a href="#sweden">Sweden</a></li>
    <li id="eu44"><a href="#switzerland">Switzerland</a></li>
    <li id="eu45"><a href="#turkey">Turkey</a></li>
    <li id="eu46"><a href="#ukraine">Ukraine</a></li>
    <li id="eu47"><a href="#united-kingdom">United Kingdom</a></li>
  </ul>
 </div>

..in the page header <head/> add the CSS file (must be loaded before scripts):

<link rel="stylesheet" type="text/css" media="screen,projection" href="eu-map-810px.css" />

..and the jQuery library (if it hasn't been yet) and the map script:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
    <script type="text/javascript" src="eu-map.js"></script> 

..of course, you can put calls to the scripts just before the </body> closing tag.

read more,please download it.