CSS Beispiel einer Karte auf einem Detektivportal

Html Definition:
Hier wird mit Javascript gearbeitet, wobei die “Klassen” Definition und der Style auch in der Html Datei angegeben werden.

Die Karte ist lediglich ein Bild, in das “Links”, also Html Adressen mit den entsprechenden Verweisen eingebaut wurde.
Diese Karte ist unendlich erweiterbar.

“href” ist ein Verweis zu einer definierten Adresse, zu der weitergeleitet wird. Da in diesem Fall kein “target” angegeben ist, öffnet sich die entsprechende Seite im gleichen Browserfenster.

Das Attribut “circle” sagt aus, dass hier mit mehreren Positionswerten, also als zum Beispiel Rechteck, oder Kreis gearbeitet wird.

Durch das Attribut “title” wird beim berühren mit dem Mauscursor des Links, in diesem Fall, dem Punkt, ein Text angezeigt. In diesem Fall eine Stadt.
Die jeweiligen Punkte-Positionen werden anhand “coords” Werten bestimmt.

<div id=”overDiv” style=”position:absolute; visibility:hidden; z-index:1000;”></div>
<script language=”JavaScript” src=”fileadmin/templates/overlib/overlib.js”></script>
<div id=”centerColumn”>

<div id=”header”><a id=”logo” href=”/”> </a>
<div id=”karte”>
<img src=”/fileadmin/templates/images/karte.jpg” alt=”Einsatzorte” usemap=”#Karte”/>
<map name=”Karte”>
<area shape=”circle” coords=”125,100,10″ rel=”nofollow” href=”index.php?id=berlin” alt=”Berlin” title=”Berlin”>
<area shape=”circle” coords=”66,103,10″ rel=”nofollow” href=”index.php?id=hannover” alt=”Hannover” title=”Hannover”>
<area shape=”circle” coords=”47,80,10″ rel=”nofollow” href=”index.php?id=bremen” alt=”Bremen” title=”Bremen”>
<area shape=”circle” coords=”80,62,10″ rel=”nofollow” href=”index.php?id=hamburg” alt=”Hamburg” title=”Hamburg”>
<area shape=”circle” coords=”145,140,10″ rel=”nofollow” href=”index.php?id=dresden” alt=”Dresden” title=”Dresden”>
<area shape=”circle” coords=”120,134,10″ rel=”nofollow” href=”index.php?id=leipzig” alt=”Leipzig” title=”Leipzig”>
<area shape=”circle” coords=”54,164,10″ rel=”nofollow” href=”index.php?id=frankfurt-am-main” alt=”Frankfurt” title=”Frankfurt”>
<area shape=”circle” coords=”108,212,10″ rel=”nofollow” href=”index.php?id=muenchen” alt=”München” title=”München”>
<area shape=”circle” coords=”64,206,10″ rel=”nofollow” href=”index.php?id=stuttgart” alt=”Stuttgart” title=”Stuttgart”>
<area shape=”circle” coords=”100,144,10″ rel=”nofollow” href=”index.php?id=erfurt” alt=”Erfurt” title=”Erfurt”>
<area shape=”circle” coords=”22,192,10″ rel=”nofollow” href=”index.php?id=saarbruecken” alt=”Saarbrücken” title=”Saarbrücken”>
<area shape=”circle” coords=”20,144,10″ rel=”nofollow” href=”index.php?id=koeln” alt=”Köln” title=”Köln”>
<area shape=”circle” coords=”120,200,10″ rel=”nofollow” href=”index.php?id=regensburg” alt=”Regensburg” title=”Regensburg”>
<area shape=”circle” coords=”34,160,10″ rel=”nofollow” href=”index.php?id=koblenz” alt=”Koblenz” title=”Koblenz”>
<area shape=”circle” coords=”68,133,10″ rel=”nofollow” href=”index.php?id=kassel” alt=”Kassel” title=”Kassel”>
</map>
</div>

Ein Suchformular:
Hier wird ein Ortsname, so wie die dazu gehörige Postleitzahl eingegeben.
Ist die Suche erfolgreich, wird nebst einer Karte Deutschlandkarte eine Erklärung angezeigt.

Html Definition
<form id=”einsatzorte-form” method=”POST” action=”weiteres/unsere-einsatzorte.html”>
<label>Stadt:</label>
<input type=”text” value=”" name=”tx_e2mstadtsuche_pi1[city]“/>
<br/>
<br/>
<label>PLZ:</label>
<input type=”text” value=”" name=”tx_e2mstadtsuche_pi1[zip]“/>
<br/>
<input type=”hidden” value=”result” name=”tx_e2mstadtsuche_pi1[mode]“/>
<br/>
<input type=”submit” value=”suchen”/>
</form>

Css Definition:
#einsatzorte-form {margin-left:27px;float:left;}
#image-einsatzorte {height:130px;margin-left:-15px;}

.tx-e2mstadtsuche-pi1 label
{
display:block;
font-size:13px;
font-weight:bold;
width:120px;
}

Wie schon einmal erwähnt, arbeitet die Detektei mit modernster Technik, sei per Video oder Kameraüberwachung, oder GPS-Ortungssystem. Noch zu betonen wäre, dass die Detektei S.E.S. mit einer kundefreundlichen 0800 Telefonnummer, so wie auch per E-Mail zu erreichen ist.

Comments are closed.