Winston Wolf The quasi-blog of Łukasz Popardowski

Europe

CSS & jQuery clickable map

Free interactive map of forty-seven countries of the European continent. It's a better way to convert a list of regions into a stylish clickable map without a Flash Player or any external plug-ins ..just a well known CSS sprites ..which works in all modern browsers ..even on the mobile devices as iPhone or iPad.

  • ten maps: 250, 320, 430, 540, 650, 750, 850, 960, 1280 and 1450px wide (including gaps) with .psd source files
  • multiple click mode
  • list of agents / addresses
  • onClick / onHover custom events
  • sticky or floating tooltips
  • visible list of regions
  • marked cities
  • preloader
Free Download cssmap-europe-v4-4.zip
size: 22.1MB | script version 4.4.26

Supported browsers

Also available clickable maps of:

Interactive maps made for web designers

These clickable maps were created by using proven and well-known properties of old CSS 2.1 With a little help of jQuery (mostly to simplify the markup) the CSS style sheets available in the package, allows you to convert a simple list of links into the interactive map.

The script allows you to:
  • reference to a page in the link,
  • show or hide the addresses of agents in selected region,
  • select several regions and pass their values to the search engine,
  • onClick / onHover custom events.

Almost each element of the map can be customized by a CSS style sheets. Detailed instructions of setup, configuration, editing and nformations about updates (with a direct link to the free package with files) you will find on the demo page available in the downloaded package.

Supported devices: desktop computers, tables, smartphones, cell phones and printers

Accessibility

The script was written with a view to maximizing the accessibility on the different devices, as well as for the disabled or who use the keyboard to navigate on the page (tabindex available).

In browsers with disabled JavaScript and the old mobile phones, user will see a simple list of links. In the same way, map will be treated by screen readers and printers.

But most importantly, the map doesn't need a Flash Player or any external plugins.

Groups and layers in the .psd source files

Editable source files

In the package, except the style sheets and scripts, you will find easy to edit .psd source files for each map size, so you can adjust the appearance of the map to your needs.

To help editing, each region (shape) is placed into separate layer and grouped. Also in the source files I marked regional capitals, major cities, lakes and rivers.

Best software to editing the .psd source files is the Adobe Photoshop or Fireworks ..but you can also use a free online editor: Pixlr!

Royality Free License

Maps are distributed under royality free license and can be used (also cropped, modified or manipulated) in all kinds of web creations as websites, templates and themes (personal, commercial or client projects) without any extra fees.
Just DO NOT sub-license, resell, transfer or share maps in the downloadable format.

..and one more thing

If you have any questions about setup, licensing, payments, or would like to order a custom map of any regions, feel free to contact me at contact@winstonwolf.pl

Top