Europe

CSS & jQuery clickable map

960 x 790px

Setup

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-960px.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.

Settings

You can set aditional features or hide the names of regions by adding a class to the <div id="map" />, example:

class="no-tooltip"
hiding regions names
class="multiple-click"
activate the multiple-click mode

You can modify the appearance of the region names ('bubbles') in any way in the map CSS file (eu-map-960px.css) or your default style sheet:

#map.script #europe a
name of the region ('bubble')
#loader
pre-loader
#search-link
search link (in the Multiple-click mode)

By default, 'balloon' with the name of the region is an anchor, so you can insert any allowed HTML/xHTML tag, like: <img/>, <span/>, <strong/>, <em/>, <b/>, <i/>, <abbr/>, <del/>, <ins/>, <sub/>, <sup/>, <mark/>, <time/> ..in the HTML5 also block-level elements are allowed, like paragraphs <p/> or headers <h1/> .. <h6/>

Of course, the appearance of links ('bubbles') including contents can be freely edited by the CSS.

Warning! When you inserting image into an anchor, don't forget about its dimensions! Dimensions can be set in the HTML code, example:

<img src="image.jpg" height="100" width="200" />

or in the CSS file: #europe img{height:100px;width:200px}

The Multiple-click mode

Allows activation of several regions, and pass their values to the PHP script by the region variable.
Below the map will be shown a link to a search engine, by default:

<a href="search.php" id="search-link">Search</a>

..the values will be assigned to the link, according to the scheme:

search.php?region=value1|value2|value7

Variables sent to the PHP file can be easily get by the explode() function:

<?php
$regions=$_GET['region'];
 print_r(explode('|',$regions));
?>

Warning! In the list of regions (map) use the secure links, example: search.php?region=germany instead of #germany. This will allow to pass the variables to a search engine for users with disabled JavaScript.

Detailed information about the multiple-click mode and more settings you can find in the eu-map.js file by the 16th line.

The list of addresses

To create a list of addresses of agents or offices in the regions, just below the map (after closing tag of <div id="map"> ... </div> <!-- list of agents goes here -->) create a list, according to the scheme:

 <div id="addresses">
  <ul>
   <li id="albania">
   <!-- agent address in Albania -->
   </li>
   <li id="andorra">
   <!-- agent in Andorra -->
   </li>
  </ul>
 </div>

..where <li id="albania" /> must be same as the link in the list of regions (map).

Warning! The list of addresses doesn't work in the multiple-click mode!

Custom script configuration

In the eu-map.js file you can change a standard script settings, as: the path to the map file, the pre-loader and the loading error text, the ID for the list of agents etc.

Editing the map

Best software for editing the .psd map file is the Adobe Photoshop or the Adobe Fireworks ..also, you can use the free online editor: Pixlr!

The appearance of the map can be freely edited, but follow some restrictions:

  1. Do not change the position of layers and shapes!
    Default position of all elements are locked.
  2. The appearance of each region (shape) change using the style of the Layer Style tool.
  3. Position of line (stroke) must be set to the center!
  4. The shadow (Drop Shadow) and the outer glow (Outer Glow) of regions can be no wider than 10px!
    In the case of the whole map (layer 'map > map.bg') no wider than 30px!
  5. Remember to hide the background (layer: 'bg') before saving the .png file.
  6. File with a map, save [Ctrl+Alt+Shift+S] as: PNG-24 Transparent!
  7. The saved file must be named: eu-960px.png
  8. Do not remove 'signature' group!

..of course you can also hide or show layers with rivers, lakes or cities, if any.

Troubleshooting

I don't see the map, just a list of regions

Scripts are not loaded..

  1. Check a path to the eu-map.js script file and jQuery library.
  2. If you use another JS library, like MooTools or Prototype make sure there is no conflict between them. For more information, see the jQuery documentation: Using jQuery with other libraries.
  3. Check if there are no errors in other scripts and see if your code is written correctly.

Errors in the scripts can be found in 'Error Console' in your browser or by the add-ons like Firebug for Firefox. Also use the W3C Validator to check your code.

Message: No map!

The script couldn't locate the eu-960px.png file..

By default, the path to the map file is automatically taken by the script, but sometimes (for unknown reasons), this file is not located. In this case the best solution is to provide a direct path to the file:

Open the eu-map.js file; in line #3 in the mapUrl variable set a direct path to the map:

var mapUrl='http://example.com/map/eu-960px.png';
TOP