REGIONAL INFORMATION SOCIETY INITIATIVE

Association of Regional Information Society Initiatives On 30 January 1997, 24 European regions, meeting in Brussels, agreed to create a European "Association of Regional Information Society Initiatives". The European Commission has welcomed this initiative and will support the new association. Europe is faced with the great task ... On 30 January 1997, 24 European regions, meeting in Brussels, agreed to create a European "Association of Regional Information Society Initiatives". The European Commission has welcomed this initiative and will support the new association. Europe is faced with the great task of shaping the Information Society in a sustainable fashion. This development brings new challenges to the regions of Europe which they will only master if they seek and practice new forms of cooperation. Realizing this, and strongly committed to the development of the Information Society at the regional and European levels, the 24 regions concerned have joined together to create this new association. The principal objectives of the Association are: - To shape ways to promote sustainable economic, social and cultural development of member regions in the forthcoming Information Society; - To create a common platform for the exchange of experience, know-how and projects among the regions. The majority of regions who have declared their interest in joining the association are already supported by the Commission either through Structural Funds (Art.10 of the ERDF, Art.6 of the ESF) or already engaged in the IRISI pre-pilot action (Inter-Regional Information Society Initiative, Art.10 ERDF). Membership of the association is open to other European regions interested in working together on the development of a programme of concrete actions. The association will shortly be established under Belgian Law and is expected to become operational in the very near future. A list of the regions involved is given in the text field of this article.

Association d'initiatives régionales relatives à la société de l'information Le 30 janvier 1997, des représentants de 24 régions européennes, réunis à Bruxelles, se sont mis d'accord pour créer une Association européenne d'initiatives régionales relatives à la société de l'information. La Commission européenne s'est félicitée de cette initiative et acc... Le 30 janvier 1997, des représentants de 24 régions européennes, réunis à Bruxelles, se sont mis d'accord pour créer une Association européenne d'initiatives régionales relatives à la société de l'information. La Commission européenne s'est félicitée de cette initiative et accordera son soutien à la nouvelle association. L'Europe est confrontée à la difficile tâche que représente la construction de la société de l'information d'une manière durable. Cette évolution induit de nouveaux défis que les régions européennes ne pourront relever que si elles cherchent et mettent en oeuvre de nouvelles formes de coopération. Conscientes de cette nécessité, les 24 régions concernées, qui se sont résolument engagées en faveur du développement de la société de l'information aux niveaux régional et européen, ont décidé de s'unir pour créer cette nouvelle association. Les principaux objectifs de l'association sont les suivants: - trouver des moyens de promouvoir le développement économique, social et culturel durable des régions membres dans la nouvelle société de l'information - mettre en place une plate-forme commune pour l'échange d'expériences et de savoir-faire entre les régions et la construction de projets communs. La majorité des régions qui ont fait savoir qu'elles souhaitaient adhérer à l'association sont déjà soutenues par la Commission soit au titre des Fonds structurels (article 10 du FEDER, article 6 du FSE) soit dans le cadre de leur participation à l'action pré-pilote IRISI (Initiative interrégionale relative à la société de l'information, article 10 du FEDER). L'adhésion à l'association est ouverte aux autres régions européennes désirant travailler ensemble à l'élaboration d'un programme d'actions concrètes. L'association sera constituée sous peu selon le droit belge et devrait devenir opérationnelle dans un très proche avenir. La liste des régions concernées figure dans la partie "texte" (TXT) de cet article.

Verband regionaler Informationsgesellschaftsinitiativen 24 europäische Regionen haben bei einem Treffen am 30. Januar 1997 in Brüssel beschlossen, einen europäische "Verband regionaler Informationsgesellschaftsinitiativen" zu gründen. Die Europäische Kommission hat diesen Beschluß begrüßt und wird den neuen Verband unterstützen. E... 24 europäische Regionen haben bei einem Treffen am 30. Januar 1997 in Brüssel beschlossen, einen europäische "Verband regionaler Informationsgesellschaftsinitiativen" zu gründen. Die Europäische Kommission hat diesen Beschluß begrüßt und wird den neuen Verband unterstützen. Europa steht vor der bedeutenden Aufgabe, die Informationsgesellschaft in nachhaltiger Weise zu gestalten. Diese Entwicklung bringt neue Herausforderungen für die europäischen Regionen mit sich, denen diese nur durch die Suche nach neuen Kooperationsformen und deren Anwendung gerecht werden können. Im Bewußtsein dessen und angesichts ihres starken Engagements zur Entwicklung der Informationsgesellschaft auf regionaler und europäischer Ebene, haben sich die betreffenden 24 Regionen zusammengeschlossen und diesen neuen Verband ins Leben gerufen. Seine Hauptziele sind, - Wege zur Förderung einer nachhaltigen wirtschaftlichen, sozialen und kulturellen Entwicklung der Mitgliedregionen in der zukünftigen Informationsgesellschaft zu finden; - eine gemeinsame Plattform für den Austausch von Erfahrungen, Know-how und Projekten zwischen den Regionen zu schaffen. Die Mehrzahl der Regionen, die Interesse an einem Beitritt zu der Vereinigung gezeigt haben, wird von der Kommission bereits unterstützt, und zwar entweder im Rahmen von Strukturfonds (Art. 10 des EFRE, Art. 6 des ESF) oder durch Einbeziehung in die Vorpilotaktion IRISI (Inter-Regional Information Society Initiative, Art.10 EFRE). Die Mitgliedschaft im Verband steht anderen an der Mitarbeit bei der Entwicklung eines konkreten Aktionsprogramms interessierten europäischen Regionen offen. Die Vereinigung wird in Kürze nach belgischem Recht gegründet werden und ihre Arbeit in allernächster Zeit aufnehmen. Ein Verzeichnis der beteiligten Regionen ist in dem Textfeld dieses Artikels zu finden.

Select dropdown
Input field

Albania
Some info about Albania, or list of addresses, or anything else you want to display here.
Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor.
Andorra
Some info about Andorra, or list of addresses, or anything else you want to display here.
Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper.
Austria
Some info about Austria, or list of addresses, or anything else you want to display here.
Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor.
Belarus
Some info about Belarus, or list of addresses, or anything else you want to display here.
Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut.
Belgium
Some info about Belgium, or list of addresses, or anything else you want to display here.
Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed.
Bosnia and Herzegovina
Some info about Bosnia and Herzegovina, or list of addresses, or anything else you want to display here.
In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam.
Bulgaria
Some info about Bulgaria, or list of addresses, or anything else you want to display here.
Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper.
Croatia
Some info about Croatia, or list of addresses, or anything else you want to display here.
Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper.
Cyprus
Some info about Cyprus, or list of addresses, or anything else you want to display here.
Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper.
Czech Republic
Some info about Czech Republic, or list of addresses, or anything else you want to display here.
Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper.
Denmark
Some info about Denmark, or list of addresses, or anything else you want to display here.
Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed.
Estonia
Some info about Estonia, or list of addresses, or anything else you want to display here.
Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor.
France
Some info about France, or list of addresses, or anything else you want to display here.
In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam.
Finland
Some info about Finland, or list of addresses, or anything else you want to display here.
Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat.
Georgia
Some info about Georgia, or list of addresses, or anything else you want to display here.
In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam.
Germany
Some info about Germany, or list of addresses, or anything else you want to display here.
Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut.
Greece
Some info about Greece, or list of addresses, or anything else you want to display here.
Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut.
Hungary
Some info about Hungary, or list of addresses, or anything else you want to display here.
In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam.
Iceland
Some info about Iceland, or list of addresses, or anything else you want to display here.
Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed.
Ireland
Some info about Ireland, or list of addresses, or anything else you want to display here.
Phasellus quis est sed turpis sollicitudin venenatis sed eu odio. Praesent eget neque eu eros interdum.
San Marino
Some info about San Marino, or list of addresses, or anything else you want to display here.
Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper.
Italy
Some info about Italy, or list of addresses, or anything else you want to display here.
Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper.
Kosovo
Some info about Kosovo, or list of addresses, or anything else you want to display here.
Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed.
Latvia
Some info about Latvia, or list of addresses, or anything else you want to display here.
Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat.
Liechtenstein
Some info about Liechtenstein, or list of addresses, or anything else you want to display here.
Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut.
Lithuania
Some info about Lithuania, or list of addresses, or anything else you want to display here.
In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam.
Luxembourg
Some info about Luxembourg, or list of addresses, or anything else you want to display here.
Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat.
Macedonia F.Y.R.O.M.
Some info about Macedonia F.Y.R.O.M., or list of addresses, or anything else you want to display here.
Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed.
Malta
Some info about Malta, or list of addresses, or anything else you want to display here.
Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor.
Moldova
Some info about Moldova, or list of addresses, or anything else you want to display here.
Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor.
Monaco
Some info about Monaco, or list of addresses, or anything else you want to display here.
Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper.
Montenegro
Some info about Montenegro, or list of addresses, or anything else you want to display here.
In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam.
Netherlands
Some info about Netherlands, or list of addresses, or anything else you want to display here.
In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam.
Norway
Some info about Norway, or list of addresses, or anything else you want to display here.
Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper.
Poland
Some info about Poland, or list of addresses, or anything else you want to display here.
In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam.
Portugal
Some info about Portugal, or list of addresses, or anything else you want to display here.
Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper.
Romania
Some info about Romania, or list of addresses, or anything else you want to display here.
Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper.
Russian Federation
Some info about Russian Federation, or list of addresses, or anything else you want to display here.
Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor.
Serbia
Some info about Serbia, or list of addresses, or anything else you want to display here.
Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut.
Slovakia
Some info about Slovakia, or list of addresses, or anything else you want to display here.
Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut.
Slovenia
Some info about Slovenia, or list of addresses, or anything else you want to display here.
Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor.
Spain
Some info about Spain, or list of addresses, or anything else you want to display here.
Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat.
Sweden
Some info about Sweden, or list of addresses, or anything else you want to display here.
Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed.
Switzerland
Some info about Switzerland, or list of addresses, or anything else you want to display here.
In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam.
Turkey
Some info about Turkey, or list of addresses, or anything else you want to display here.
In hac habitasse platea dictumst. Nam pulvinar, odio sed rhoncus suscipit, sem diam.
Ukraine
Some info about Ukraine, or list of addresses, or anything else you want to display here.
Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed.
United Kingdom
Some info about United Kingdom, or list of addresses, or anything else you want to display here.
Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat.
England
Some info about England, or list of addresses, or anything else you want to display here.
Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut.
Isle of Man
Some info about Isle of Man, or list of addresses, or anything else you want to display here.
Vivamus rutrum nunc non neque consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat.
Northern Ireland
Some info about Northern Ireland, or list of addresses, or anything else you want to display here.
Donec viverra auctor lobortis. Pellentesque eu est a nulla placerat dignissim. Morbi a enim in magna semper.
Scotland
Some info about Scotland, or list of addresses, or anything else you want to display here.
Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a porttitor.
Wales
Some info about Wales, or list of addresses, or anything else you want to display here.
Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae urna tincidunt congue sed.

Vivamus rutrum consectetur quis placerat neque lobortis. Nam vestibulum, arcu sodales feugiat.
Proin quis tortor orci. Etiam at risus et justo dignissim congue.

get the code

Use the "CSSMap settings" form to play with the demo map and generate the sample script code below.

Save settings to generate the code and apply changes to the demo map.

Generated code must be pasted after the CSSMap script declaration.

Check out the "Setup & settings" section for details.

Setup & settings

Load the CSSMap stylesheet

First, copy the "cssmap-europe" folder to your location and link the map's CSS file inside the <head> of your page.

<!-- CSSMap STYLESHEET - EUROPE -->
<link rel="stylesheet" type="text/css" href="cssmap-europe/cssmap-europe.css" media="screen" />

Load jQuery and the CSSMap script

Just before the </body> closing tag*, link to the jQuery and CSSMap script. Make sure you're not loading script files multiple times.

<!-- jQuery -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<!-- CSSMap SCRIPT -->
<script type="text/javascript" src="https://cssmapsplugin.com/5/jquery.cssmap.min.js"></script>

The CSSMap script file is loaded from the cloud, so you'll always have access to the latest version. Of course, you can store it locally as well.

* if you prefer, you can add the scripts in the <head> as well.

Run the script

Now you can invoke the $.CSSMap(); function.

Copy the code below and put it just after the links to jQuery and the CSSMap script.
The script may be also invoked under the list of regions in the page content.

The code above has been generated by the "CSSMap settings" form

The markup

The CSSMap script is based on the unordered list of regions presented below. You can modify all links and text as you need.

Label (text) of the link will be presented in the tooltip and the HTML markup may be used as well*.

<!-- CSSMap - Europe -->
<div id="map-europe">
 <ul class="europe">
  <li class="eu1"><a href="#albania">Albania</a></li>
  <li class="eu2"><a href="#andorra">Andorra</a></li>
  <li class="eu3"><a href="#austria">Austria</a></li>
  <li class="eu4"><a href="#belarus">Belarus</a></li>
  <li class="eu5"><a href="#belgium">Belgium</a></li>
  <li class="eu6"><a href="#bosnia-and-herzegovina">Bosnia and Herzegovina</a></li>
  <li class="eu7"><a href="#bulgaria">Bulgaria</a></li>
  <li class="eu8"><a href="#croatia">Croatia</a></li>
  <li class="eu9"><a href="#cyprus">Cyprus</a></li>
  <li class="eu10"><a href="#czech-republic">Czech Republic</a></li>
  <li class="eu11"><a href="#denmark">Denmark</a></li>
  <li class="eu12"><a href="#estonia">Estonia</a></li>
  <li class="eu13"><a href="#france">France</a></li>
  <li class="eu14"><a href="#finland">Finland</a></li>
  <li class="eu15"><a href="#georgia">Georgia</a></li>
  <li class="eu16"><a href="#germany">Germany</a></li>
  <li class="eu17"><a href="#greece">Greece</a></li>
  <li class="eu18"><a href="#hungary">Hungary</a></li>
  <li class="eu19"><a href="#iceland">Iceland</a></li>
  <li class="eu20"><a href="#ireland">Ireland</a></li>
  <li class="eu21"><a href="#san-marino">San Marino</a></li>
  <li class="eu22"><a href="#italy">Italy</a></li>
  <li class="eu23"><a href="#kosovo">Kosovo</a></li>
  <li class="eu24"><a href="#latvia">Latvia</a></li>
  <li class="eu25"><a href="#liechtenstein">Liechtenstein</a></li>
  <li class="eu26"><a href="#lithuania">Lithuania</a></li>
  <li class="eu27"><a href="#luxembourg">Luxembourg</a></li>
  <li class="eu28"><a href="#macedonia">Macedonia <abbr title="The Former Yugoslav Republic of Macedonia">(F.Y.R.O.M.)</abbr></a></li>
  <li class="eu29"><a href="#malta">Malta</a></li>
  <li class="eu30"><a href="#moldova">Moldova</a></li>
  <li class="eu31"><a href="#monaco">Monaco</a></li>
  <li class="eu32"><a href="#montenegro">Montenegro</a></li>
  <li class="eu33"><a href="#netherlands">Netherlands</a></li>
  <li class="eu34"><a href="#norway">Norway</a></li>
  <li class="eu35"><a href="#poland">Poland</a></li>
  <li class="eu36"><a href="#portugal">Portugal</a></li>
  <li class="eu37"><a href="#romania">Romania</a></li>
  <li class="eu38"><a href="#russian-federation">Russian Federation</a></li>
  <li class="eu39"><a href="#serbia">Serbia</a></li>
  <li class="eu40"><a href="#slovakia">Slovakia</a></li>
  <li class="eu41"><a href="#slovenia">Slovenia</a></li>
  <li class="eu42"><a href="#spain">Spain</a></li>
  <li class="eu43"><a href="#sweden">Sweden</a></li>
  <li class="eu44"><a href="#switzerland">Switzerland</a></li>
  <li class="eu45"><a href="#turkey">Turkey</a></li>
  <li class="eu46"><a href="#ukraine">Ukraine</a></li>
  <li class="eu47"><a href="#united-kingdom">United Kingdom</a></li>
<!-- 
  <li class="eu48"><a href="#england">England</a></li>
  <li class="eu49"><a href="#isle-of-man">Isle of Man</a></li>
  <li class="eu50"><a href="#northern-ireland">Northern Ireland</a></li>
  <li class="eu51"><a href="#scotland">Scotland</a></li>
  <li class="eu52"><a href="#wales">Wales</a></li>
-->
 </ul>
</div>
<!-- END OF THE CSSMap - Europe -->

View source code

* some elements, like: <UL /> and <span /> need to be reseted after the CSSMap's style sheet. Check out the "Customizing map in CSS" section for deatils.

Options

Options object must be pass as the first parameter of the $.CSSMap(); function.

The "size" option must be set, all other options add as shown:

$("#map-europe").CSSMap({
  // MAP SIZE MUST BE SET;
  "size": 1450,

  // OTHER OPTIONS;
  "cities": true
});

Ready to use script code may be generated by the "CSSMap settings" form

Defaults:

size: 0

Integer

width of the map (in pixels);

available sizes: 250, 320, 430, 540, 650, 750, 850, 960, 1280, 1450

mapStyle: "default"

String

appearance of the map

available styles: "default", "blue", "dark", "vintage" and "custom"

Learn more about the "custom" option in the editing map style section.

tooltips: true

Boolean

show tooltip of the region

String

"floating" - tooltip follows the mouse pointer

"sticky" - tooltip stick to the center of region

"visible" - always visible tooltips

tooltipArrowHeight: 5

Integer

increase bottom offset of the "sticky" tooltips

cities: false

Boolean

display cities layer over the map

responsive: "auto"

String

"auto" - map is resized to fit parent container's width

The main "size" option is the maximum map width

Object

resizing steps may be set by an Object:
{min_window_width: map_size, min_window_width: map_size}

Boolean

false - disable map resizing

fitHeight: false

Boolean

resize map to fit parent container's height

activateOnLoad: []

Array

classes of the list items to activate when the map is loaded, example:

["eu14", "eu16", "eu47"]

tapOnce: false

Boolean

on the touch devices single tap activate region

mobileSupport: false

Boolean

hides an error message and display list of regions when the map image couldn't be loaded

loadingText: "Loading ..."

String [HTML]

markup for the preloader

authorInfo: false

Boolean

display credits and link to the CSSMap plugin website under the map

disableClicks: false

Boolean

disables ability to click on regions;
regions can be activated using the activateOnLoad or URL hashtags

Visible list of regions

Display list of regions next to the map.

The script duplicate the main list of regions with all its content and functionality.

visibleList: {

enable: false

Boolean

show the list of regions

listPosition: "bottom"

String

position of the list: "bottom" or "left", "right" side of the map

columns: 1

Integer

divide list into columns

columnWidth: 0

Integer

width of the columns (in pixels)
must be set to show list next to the map

columnsGap: 0

Integer

gap between the columns (in pixels)

containerId: ""

Selector

ID of the list container OUTSIDE the map;
must start with the hash (#) mark

hideItems: []

Array

classes of the list items to hide in the visible list of regions, example:

["eu23"]

}

Multiple Clicks mode

Allows to activate (click) several regions, and pass their values to the search engine script.

multipleClick: {

enable: false

Boolean

allows to select multiple regions

searchUrl: "search.php"

String

URL of the search engine

searchLink: "Search"

String

label of the search link

searchLinkVar: "region"

String

variable passed to the search engine (example: ?region=)

separator: "+"

String

separator of the values passed to the search engine

hideSearchLink: false

Boolean

hide search link

clicksLimit: 0

Integer

limited number of clicks

0 - unlimited

clicksLimitAlert: "You can select only %d region! || regions!"

String

error (alert) message when the clicks limit is reached

syntax: [beginning of sentence] %d [singular] || [plural]

%d is a number of clicks (filled by the script)

}

List of addresses

Allows to show/hide any informations assigned to the region.

agentsList: {

enable: false

Boolean

display the list of addresses (informations assigned to the regions)

agentsListId: ""

Selector

ID of the addresses' list container;
must start with the hash (#) mark

agentsListSpeed: 0

Integer

fade delay in miliseconds;
doesn't work with: agentsListOnHover: true

0 - no fade effect

agentsListOnHover: false

Boolean

show and hide agent/address on hover, instead of click

}

</ > Additional markup required

The list of addresses may be used to show address of the office, or distributor, or any other region related informations ... and even other CSSMap.

There's a second list required, where ID attribute of each list item is the same as the hash link in the main list of regions. That should works as any other internal navigation when JavaScript is disabled.

List may be freely styled with CSS as any other unordered list*.

* nested <UL /> and/or <OL /> list items should be reseted first.

<!-- CSSMap - list of addresses -->
<div id="demo-agents">
 <ul>
  <li id="albania">

    <!-- Albania -->

  </li>
  <li id="andorra">

    <!-- Andorra -->

  </li>
  <li id="austria">

    <!-- Austria -->

  </li>
  <li id="belarus">

    <!-- Belarus -->

  </li>
  <li id="belgium">

    <!-- Belgium -->

  </li>
  <li id="bosnia-and-herzegovina">

    <!-- Bosnia and Herzegovina -->

  </li>
  <li id="bulgaria">

    <!-- Bulgaria -->

  </li>
  <li id="croatia">

    <!-- Croatia -->

  </li>
  <li id="cyprus">

    <!-- Cyprus -->

  </li>
  <li id="czech-republic">

    <!-- Czech Republic -->

  </li>
  <li id="denmark">

    <!-- Denmark -->

  </li>
  <li id="estonia">

    <!-- Estonia -->

  </li>
  <li id="france">

    <!-- France -->

  </li>
  <li id="finland">

    <!-- Finland -->

  </li>
  <li id="georgia">

    <!-- Georgia -->

  </li>
  <li id="germany">

    <!-- Germany -->

  </li>
  <li id="greece">

    <!-- Greece -->

  </li>
  <li id="hungary">

    <!-- Hungary -->

  </li>
  <li id="iceland">

    <!-- Iceland -->

  </li>
  <li id="ireland">

    <!-- Ireland -->

  </li>
  <li id="san-marino">

    <!-- San Marino -->

  </li>
  <li id="italy">

    <!-- Italy -->

  </li>
  <li id="kosovo">

    <!-- Kosovo -->

  </li>
  <li id="latvia">

    <!-- Latvia -->

  </li>
  <li id="liechtenstein">

    <!-- Liechtenstein -->

  </li>
  <li id="lithuania">

    <!-- Lithuania -->

  </li>
  <li id="luxembourg">

    <!-- Luxembourg -->

  </li>
  <li id="macedonia">

    <!-- Macedonia F.Y.R.O.M. -->

  </li>
  <li id="malta">

    <!-- Malta -->

  </li>
  <li id="moldova">

    <!-- Moldova -->

  </li>
  <li id="monaco">

    <!-- Monaco -->

  </li>
  <li id="montenegro">

    <!-- Montenegro -->

  </li>
  <li id="netherlands">

    <!-- Netherlands -->

  </li>
  <li id="norway">

    <!-- Norway -->

  </li>
  <li id="poland">

    <!-- Poland -->

  </li>
  <li id="portugal">

    <!-- Portugal -->

  </li>
  <li id="romania">

    <!-- Romania -->

  </li>
  <li id="russian-federation">

    <!-- Russian Federation -->

  </li>
  <li id="serbia">

    <!-- Serbia -->

  </li>
  <li id="slovakia">

    <!-- Slovakia -->

  </li>
  <li id="slovenia">

    <!-- Slovenia -->

  </li>
  <li id="spain">

    <!-- Spain -->

  </li>
  <li id="sweden">

    <!-- Sweden -->

  </li>
  <li id="switzerland">

    <!-- Switzerland -->

  </li>
  <li id="turkey">

    <!-- Turkey -->

  </li>
  <li id="ukraine">

    <!-- Ukraine -->

  </li>
  <li id="united-kingdom">

    <!-- United Kingdom -->

  </li>
  <li id="england">

    <!-- England -->

  </li>
  <li id="isle-of-man">

    <!-- Isle of Man -->

  </li>
  <li id="northern-ireland">

    <!-- Northern Ireland -->

  </li>
  <li id="scotland">

    <!-- Scotland -->

  </li>
  <li id="wales">

    <!-- Wales -->

  </li>
 </ul>
</div>
<!-- END OF THE CSSMap - list of addresses -->

View source code

Markers over the map

Allows to display markers (pins) over the map.

pins: {

enable: false

Boolean

display markers (pins) over the map

pinsId: ""

Selector

ID of the markers container;
must start with the hash (#) mark

mapSize: 0

Integer

size of the map for which markers were set;
required for the responsive map

markerPosition: "middle"

String

position of the marker relative to the coords - "top", "middle", "bottom"

tooltipPosition: "top"

String

position of the marker tooltip - "top", "bottom", "hidden"

tooltipOnClick: false

Boolean

shows marker tooltip only when the marker (pin) is clicked;
disable external link if set to the marker's anchor element

clickableRegions: true

Boolean

enable clicking on regions

false - only markers clickable

}

</ > Additional markup required

Sample list of markers:

<!-- CSSMap MARKERS -->
<div id="demo-markers">
 <ul class="cssmap-pins">
  <li class="cssmap-pin" data-cssmap-coords="780,700">

   <div class="cssmap-tooltip-content">
    Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae.
   </div>
   <a href="#" class="cssmap-marker"><img src="includes/pin.png" width="20" height="25" alt="pin"/></a>

  </li>
  <li class="cssmap-pin" data-cssmap-coords="480,785">

   <div class="cssmap-tooltip-content">
    Quisque lacus quam, egestas ac tincidunt a, lacinia vel velit. Aenean facilisis nulla vitae.
   </div>
   <a href="#" class="cssmap-marker"><img src="includes/pin.png" width="20" height="25" alt="pin"/></a>

  </li>
 </ul>
</div>
<!-- END OF THE CSSMap MARKERS -->

View source code

Each list item with the .cssmap-pin class is a marker and must be manually positioned over the map using the data-cssmap-coords attribute:

data-cssmap-coords="left_position, top_position"

Position of the marker may be set only in pixels for the specified map size.

It's recommended to wrap content of the marker's tooltip into the <div />:

<div class="cssmap-tooltip-content"></div>

The most important is a link with the .cssmap-marker class where you can set a pin. It can be an image or text.

Form support

Allows to control the input and/or select form fields, and set values assigned to the active region.

formSupport: {
enable: false: Boolean; allows map to control the form items
inputId: "": Selector; ID of the input field;
must start with the hash (#) mark
selectId: "": Selector; ID of the select dropdown field;
must start with the hash (#) mark
selectLabel: "": String; label of the first (default) option of the select dropdown
value: "name": String; value of the field: "name", "slug" (the href attribute) or "class" of the region; }

Allows to navigate through regions using next/prev links under the map.

This option doesn't work when the Multiple Clicks mode is enabled.

navigation: {
enable: false: Boolean; enables the navigation controls
loop: false: Boolean; allows to navigate within infinite loop of all regions
next: "Next »": String; label of the next region link
prev: "« Previous": String; label of the previous region link
separator: "|": String; separator of the navigation links; Boolean; false - remove separator
label: "": String; Adds <H5> header above the navigation links
description: "": String; Adds paragraph above the navigation links; }

Custom events

onClick: function(listItem){}

Function

function called when region is clicked

to prevent default click actions add the rel="nofollow" attribute to the links

onSecondClick: function(listItem){}

Function

function called when region is clicked second time

to prevent default click actions add the rel="nofollow" attribute to the links

onHover: function(listItem){}

Function

function called when the mouse pointer enters a region

unHover: function(listItem){}

Function

function called when the mouse pointer leaves a region

onLoad: function(mapObject){}

Function

function called when map is fully loaded

Script options (except the "Custom events") may be generated by the "CSSMap settings" form.

Requirements

Basic knowledge of the web

HTML, CSS and JavaScript knowledge is required for a proper installation.

Your page should be valid HTML/XHTML and contain no script errors.

If you're trying to put a map script onto your page using CMS and/or don't want to use the dedicated CSSMap Joomla module or WordPress plugin check out documentation of your CMS. Especially how to add a custom script and style sheet to the page.

The CSSMap plugin requires jQuery 1.7+

It's always recommended to use the most recent version of the jQuery.

Software

Text/code editor: Any text/code editor will be fine. Just don't use any WYSIWYG editors.
.PSD file editor: To customize the map appearance you'll need an editor which can handle layered .psd source files properly. Adobe® Photoshop® is recommended.
Image optimizer: To reduce weight of the transparent .PNG images pngquant or/and ImageOptim are recommended.

Supported browsers:

Google Chrome 1+
Firefox 4+
Internet Explorer 7+
Opera 9+
Safari 3+
+ all major mobile browsers

Appearance of the map may vary in different web browsers and/or OS.

Known issues

IE >8: "responsive" option doesn't work.; In the "auto" mode the "size" option is the map width. When using custom steps object, only the first size is set.

IE 7: The cities layer can't be displayed over the map.

Mobile devices support

There's an issue with the map image size (dimensions too) that can be downloaded by the mobile devices.

Set the "mobileSupport": true option to display the list of regions when the map image can't be loaded and hide an error message.

Size of the map image will increase the cellular data transfer.

Limitations

The map is hand-coded in specific sizes, which can't be changed. The only way to change the size of the map is to rewrite most of the CSS file.

Colors of the map can't be changed dynamically via the JavaScript function etc. Learn more about editing map style.

Of course there are several limitations caused by lack of the CSS support in older browsers. For example in the IE7 cities layer can't be displayed, also there's a bug with arrows under tooltips in the IE7 and Firefox below 3.6.

Customizing map in CSS

You can customize some elements using the CSS style sheets.

Check out the cssmap-europe/cssmap-themes.css file for default CSS rules and modify them as you need.
All custom CSS rules must be set after the map's style sheet file.

Editable elements

Tooltips

Use these selectors to customize the tooltips:

.cssmap > li a,.cssmap > li a:hover{}

If "sticky" tooltips are enabled, you can customize tooltips for specified map size:

.cssmap-[MAPSIZE] .cssmap > li a{}

..and arrow under the tooltip:

.cssmap > li a .tooltip-arrow{}

Arrows are displayed only if the tooltips: "sticky" option is set.

Visible list of regions

Visible list of regions may be styled using the selector:

.cssmap-visible-list{}

Links of the visible list:

.cssmap-visible-list a{}
 .cssmap-visible-list a:hover{}

Search link

In the Multiple Clicks mode the search link may be styled by:

.cssmap-search-link{}

The search link can be hidden by hideSearchLink: true option of the multipleClick{} object.

Marker (pin) tooltip

By default all tooltips are styled the same, but you can customize appearance of the marker tooltip using:

.cssmap-tooltip-content{}

Navigation controls

Customize each element of the navigation using selectors listed below (defaults shown). Navigation controls elements are centered by default.

/* NAVIGATION CONTAINER */
.cssmap-navigation{ text-align: center }

/* LIST OF NAVIGATION CONTROLS */
.cssmap-nav-list{}
 .cssmap-nav-list li{
   display:inline-block;
   margin: 0 .5em;
  }
  .cssmap-nav-next{} /* LIST ITEM */
  .cssmap-nav-prev{} /* LIST ITEM */
  .cssmap-nav-separator{} /* LIST ITEM */

/* LABEL OF THE NAVIGATION - THE H5 HEADER (OPTIONAL) */
.cssmap-nav-label{}

/* DESCRIPTION SHOWN ABOVE THE NAVIGATION (OPTIONAL) */
.cssmap-nav-description{}

Preloader

.cssmap-loader{}

Reserved classes

List of classes used by the CSSMap script:

.cssmap-container
.cssmap
.cssmap-[0-9]
.bg
.m
.s[0-9]
.focus
.active-region

.europe
.europe-cities
.eu[0-9]

.cssmap-blue
.cssmap-dark
.cssmap-vintage
.cssmap-custom

.cssmap-tooltip-content
.tooltip-arrow
.tooltip-top
.tooltip-left
.tooltip-right
.tooltip-middle

.cssmap-visible-list-container
.cssmap-visible-list
.cssmap-search-link
.cssmap-markers-container
.cssmap-marker

.cssmap-navigation
.cssmap-nav-label
.cssmap-nav-description
.cssmap-nav-list
.cssmap-nav-next
.cssmap-nav-prev
.cssmap-nav-separator

.cssmap-loader
.cssmap-cities
.cssmap-error
.cssmap-signature

Cropping the map

You can easily crop the map using few CSS rules.

Set new dimentions

Dimensions of the map may be set like any other element, i.e.:

.cssmap-container{
  height: 300px;
  width: 400px
 }

Move the map inside its container

Use negative values to move the map left and up, i.e.:

.cssmap-container .cssmap{
  left: -100px;
  top: -250px
 }

Hide list elements

Hide list of regions before map is loaded

.cssmap > li a{
  margin: -9999em 0 0 0;
  position: absolute
 }

Use responsibly! It must be set before map's style sheet. Users will be unable to see and use links when the map doesn't load!

Disable regions

To disable (remove) regions just delete their links or wrap entire list items into comments.

Editing map style

To customize map style use the editable .PSD source files available in the downloaded package.
The Adobe® Photoshop® is recommended to edit.

Colors of the map can't be changed dynamically via the JavaScript function etc.

Do not change position of the locked layers and shapes!

Changing colors and layer styles

Color of the region

To change color of the regions just double click on the layer's thumbnail and use the "Color Picker".

Modify multiple layers

Certainly you will need to change color of all layers at once. There're two ways to do that:

select all layers you want to change and use the "Fill" option of shape tool U
merge all shapes (layers) of the map's state (:hover or :active) as shown below.

Layer color — Changing fill color using shape tool options (left) or double clicking on the layer's thumbnail (right)

Layer Style

Stroke

Position

Must be set to "Center", otherwise outlines of the regions will not overlap.

Color

Double click on the color's square and use "Color Picker" to change it as you need.

"Fill Type" should be set:"Color".

Other options

You can set any other options like gradients, shadows and glows ..just as you want to.

Each region has 10px gap around (5px in maps less than 300px wide), so the outer glow and shadow shouldn't be larger than that.

Merge shapes (optional)

Inside one of the map's states (:hover or :active) select all layers you want to merge, but without masks if any.

If you're using an old version of Photoshop® and you don't have that option, you can use the Path Selection tool A and merge all shapes manually.

Merged shapes may be styled as shown above, you can add: outline, glows and shadows, but not the gradients. Gradients may be set properly only for the single shapes (layers).

Merge shapes — Merge Shapes option in the Adobe®Photoshop® CC

Saving map files

Hide background of the .psd file ("bg" layer).
Map image must be transparent!
In the menu select: File > Save for Web...
or press: Ctrl + Alt + Shift + S
Choose "Preset: PNG-24"
"Transparency" option must be checked
Save an image in the map's directory
Do not change name of the .png file!

Optimize .PNG files

The CSSMap plugin is based on the CSS sprites and it's recommended to optimize map images to reduce their weight and save bandwidth.

Recommended .PNG optimizers

pngquant: Command-line utility for Linux, Mac and Windows. Photoshop® plugin available.
ImageOptim: Mac OS X application.

Using the mapStyle: "custom" option

Upload/Save your custom map images into the /cssmap-europe/custom folder.
Set the mapStyle: "custom" option of the $.CSSMap(); function.

Of course you can overwrite existing files of the default map styles.

Troubleshooting

The map doesn't appear

Make sure you've uploaded the cssmap-europe folder onto your server.
Check version of jQuery linked. The CSSMap plugin requires jQuery 1.7+
Check if there're no other versions of jQuery loaded.
Check if there're no conflicts with other JavaScript libraries as Mootools or Prototype. Learn more about the jQuery.noConflict() mode.
Check if your website isn't in the quirks mode. The !doctype must be set!
Check if there're no errors in the "Error console" of your browser.
Check if your source code is valid and contains no errors.
Check paths to the included files. Back to the "Setup & settings" section.
Check paths to the map images - .PNG files must be in the same folder as the map's style sheet.

Doesn't work on mobile devices

Most mobile devices limits the size of an image that can be downloaded.
If you're not using the responsive: "auto" option, the size of map's image may be too large to download.

License

Using the CSSMap plugin is simple as that:

DO

use in personal or commercial project
use in all kinds of web projects
use in the mobile/desktop application
customize, crop and modify to your needs

DO NOT

sub-license, resell or share in the downloadable format
remove or hide the "signature" layer on the images
remove author info from stylesheets and scripts
use anything from the source code of this demo page
share that demo page

Changelog

5.6.0 June 16th, 2020

Fixed jQuery 3.5 bugs

Fixed static tooltips hover issue - requires cssmap-themes.css file update

5.5.6 March 23rd, 2019

Fixed mobile devices reloading on scroll

5.5.5 December 27th, 2018

Maps of Mexico, Romania, Lithuania and Ukraine support added

5.5.4 June 10th, 2017

Fixed reload bug

5.5.3.1 May 3rd, 2017

Updated names of Franch regions.

5.5.3 December 11th, 2016

Fixed a bug that caused reload of the map after resizing the window.

5.5.2 September 7th, 2016

Maps of Norway and Finland support added.

5.5.1 August 31st, 2016

Maps of Sweden and combined maps of the United States and Canada support added.

Added cssmap-mapstyle.psd source file into the download package with ready to use layer styles of default maps.

5.5 August 13th, 2016

Navigation controls added - allows to navigate through regions using next/prev links under the map - requires cssmap-themes.css file update

5.4 July 28th, 2016

Map of Switzerland support added.

Added .cssmap-markers-container class to the markers container.

Fixed positioning of the markers over the map when using Bootstrap framework - requires cssmap-themes.css file update

5.3.1 July 25th, 2016

Maps of Hungary and The Netherlands support added

5.3 July 5th, 2016

Maps of Czech Republic and Slovakia support added.

Fixed jumping to the page top when using keyboard navigation - requires cssmap-themes.css file update

5.2.2 May 30th, 2016

Map of Greece support added

5.2.1 May 24th, 2016

Map of the French departments support added

5.2 May 20th, 2016

disableClicks option added

5.1 May 19th, 2016

Fixed onClick method in the Multiple Clicks mode

5.0.2 May 7th, 2016

Map of the autonomous communities of Spain support added

5.0.1 May 5th, 2016

Map of Spain support added

5.0 April 20th, 2016

New script and style sheets relased - requires update of all files and source code.

New features:

Four default map styles
Fit width and/or height of the browser window or map's container
Touch devices support
Improved visible list of regions
Markers over the map
Allows to fill in input fields with name, class or URL of regions
Allows to convert list of regions into select dropdown menu
Setup and options generator
Rewritten script for better performance

Support & contact

If you have any questions regarding setup, licensing, payments, or would like to order a custom map of any region, don't hesitate to write.

But, if your setup doesn't work, check out the "Troubleshooting" section once again and/or visit the CSSMap FAQ page before you ask for help.