www.gemeinde-michendorf.de - Die private Webseite für die Ortsteilen Michendorf, Wildenbruch, Langerwisch, Wilhelmshorst, Fresdorf und Stücken
Webkartographie
Kartenvergrößerung bei omMouseOver mit Hilfe von CSS
Erläuterung zum Quelltext
<style type="text/css"> Einleitung zum CSS-Teil innerhalb des <HEAD> Tags. Der erste Teil der CSS Angabe definiert die Box. Sie erhällt den Namen kartenbox. Hier werden u.a. Farbe, Größe, Abstände und der Rahmen definiert.
#kartenbox { Vergebener Namen Kartenbox
width: 600px; die Breite der Box
margin: 5px;
padding: 10px; der Innen- und Außenabstand
}
Angaben für das Vorschaubild: Lage, Größe, Rahmen, Abstände
#kartenbox a img { Deninition des Bildes
float: right; Platzierung des Bildes auf der rechten Seite, Text fließt links am Bild vorbei!
height: 120px; Höhe des Vorschaubildes
width: 120px; Breite des Vorschaubildes
margin: 0px 0px 5px 5px; Abstände
border: 3px solid #006600; einen Rahmen um das Bild legen
}
Hier kommen 3 HOVER-Anweisung für verschiedene Browser
Diese Anweisung für die Anzeige in Geckos, Safarie und Opera
#kartenbox img:hover { Außer IE von Microsoft können alle Browser die Pseudoklasse HOVER für Links als auch für Image anzeigen
width: 460px; Breite die für das vergrößerte Bild angezeigt werden soll
height: 402px; Höhe die für das vergrößerte Bild angezeigt werden soll
}
Und hier die Extraanweisung für Microsoft IE, sonst beherscht er das Zoom nicht
#kartenbox a:hover img {
width: 460px;
height: 402px;
}
Da der IE immer noch nicht reagiert muß im hover-Zustand der Abstand noch auf 0 gesetzt werden
#kartenbox a:hover {
padding: 0px;
}
Zum Schluß noch die Absatzformatierung für den laufenden Text
#kartenbox p {
padding: 0px;
margin: 0px;
}
</style> Ende der Stylsheet-Definition im <HEAD> bereich der Datei
Und hier noch die Endstruktur der Datei:
<html>
<head>
<title></title>
<style type="text/css"> hier zwischen ist der CSS-Teil platziert </style>
</head>
<body>
<h2>Überschrift 2</h2>
<div id="kartenbox"> hier wird die DIV-Box "kartenbox" aufgerufen
<h3>blabla.....babla......babla.......</h3>
<a href="jpg/1585_87kb.jpg" target="_blank"><img src="jpg/1585_87kb.jpg" alt="alte Karte" width="920" height="805" /></a>
<p>blabla.....babla......babla........</p>
<br style="clear:both;" /> Mit clear: können Sie einen Umfluss des Textes abbrechen und die Fortsetzung unterhalb des umflossenen Elements oder Bereichs erzwingen, both = erzwingt in jedem Fall die Fortsetzung unterhalb.
</div>
</body>
</html>