Universität Bielefeld

© Universität Bielefeld

Interaktive Karte

Wenn Sie auf die Städtenamen klicken, öffnen sich die jeweiligen beschreibenden Texte.
Das Hintergrundbild kann ausgetauscht und die klickbaren Koordinaten angepasst werden.

Umrisskarte von NRWBonnKölnDüsseldorfDuisburgEssenBochumDortmundMünsterPaderbornBielefeldOsnabrück

Bonn

Text

Köln

Text

Düsseldorf

Text

Duisburg

Text

Essen

Text

Bochum

Text

Dortmund

Text

Münster

Text

Bielefeld

Text

Osnabrück

Text

Code-Schnipsel



<div class="content_full citymap-typ1">
  <h1>Map
  <p>Beschreibung</p>

  <p class="footer" id="stadtklick">Klicken Sie auf die Städte!</p>

  <img alt="Karte von NRW" src="/kommunikation/internet/images/nrwkarte.png" usemap="#NRWmap" id="nrwkarte" width="727" />
  <map id="NRWmap" name="NRWmap">
    <area shape="rect" coords="256,561,303,531" class="cityname" id="bonn" title="Bonn" alt="Bonn" />
    <area shape="rect" coords="230,501,277,474" class="cityname" id="koeln" title="Köln" alt="Köln" />
    <area shape="rect" coords="195,428,288,400" class="cityname" id="duesseldorf" title="Düsseldorf" alt="Düsseldorf" />
    <area shape="rect" coords="204,363,117,338" class="cityname" id="duisburg" title="Duisburg" alt="Duisburg" />
    <area shape="rect" coords="264,340,219,370" class="cityname" id="essen" title="Essen" alt="Essen" />
    <area shape="rect" coords="276,335,336,359" class="cityname" id="bochum" title="Bochum" alt="Bochum" />
    <area shape="rect" coords="322,333,409,319" class="cityname" id="dortmund" title="Dortmund" alt="Dortmund" />
    <area shape="rect" coords="350,194,420,216" class="cityname" id="muenster" title="Münster" alt="Münster" />
    <area shape="rect" coords="554,263,634,283" class="cityname" id="paderborn" title="Paderborn" alt="Paderborn" />
    <area shape="rect" coords="512,190,576,152" class="cityname" id="bielefeld" title="Bielefeld" alt="Bielefeld" />
    <area shape="rect" coords="421,127,500,106" class="cityname" id="osnabrueck" title="Osnabrück" alt="Osnabrück" />
  </map>

  <div class="citytext contentbox gray" id="bonn-text">
    <h2>Bonn</h2>
    <p>Text</p>
  </div>
  <!-- Bonn ende -->

  <div class="citytext contentbox gray" id="koeln-text">
    <h2>Köln</h2>
    <p>Text</p>
  </div>
  <!-- Köln ende -->

  <div class="citytext contentbox gray" id="duesseldorf-text">
    <h2>Düsseldorf</h2>
    <p>Text</p>
  </div>
  <!-- Düsseldorf ende -->

  <div class="citytext contentbox gray" id="duisburg-text">
    <h2>Duisburg</h2>
    <p>Text</p>
  </div>
  <!-- Duisburg ende -->
  <div class="citytext contentbox gray" id="essen-text">
    <h2>Essen</h2>
    <p>Text</p>
  </div>
  <!-- Essen ende -->

  <div class="citytext contentbox gray" id="bochum-text">
    <h2>Bochum</h2>
    <p>Text</p>
  </div>
  <!-- Bochum ende -->

  <div class="citytext contentbox gray" id="dortmund-text">
    <h2>Dortmund</h2>
    <p>Text</p>
  </div>
  <!-- Dortmund ende -->

  <div class="citytext contentbox gray" id="muenster-text">
    <h2>Münster</h2>
    <p>Text</p>
  </div>
  <!-- Paderborn ende -->

  <div class="citytext contentbox gray" id="bielefeld-text">
    <h2>Bielefeld</h2>
    <p>Text</p>
  </div>
  <!-- Bielefeld ende -->

  <div class="citytext contentbox gray" id="osnabrueck-text">
    <h2>Osnabrück</h2>
    <p>Text</p>
  </div>
  <!-- Osnabrück ende -->

</div> <!-- content_full ende -->

Hinweis:

Wenn Sie die IDs der Städte verändern oder weitere Städte hinzufügen, achten Sie darauf, dass der Stadtname in dem <area>-Tag exakt so geschrieben wird wie in dem zugehörigen <div>-Tag weiter unten:
  <area ... id="bonn" />
  <div class="citytext" id="bonn-text"> ... </div>