Bilder bei Mousover vergrössen
Sie möchten Grafiken innerhalb der Webseite vergrössert anzeigen lassen, sobald Sie mit der Maus über das Bild fahren und, wenn Sie die Mause wegbewegen, wieder zur Normalansicht zurückkehren?
Da gibt es zum einen die seitens des Autors kostenlos zur Verfügung gestellte Lösung von Nathan Smith, die im Folgenden beispielhaft umgesetzt wurde oder die "Magnify an Image"-Lösung von Stu Nicholls, der für den Einsatz auf kommerziellen Seiten neben einem Backlink eine Donation zur Aufrechterhaltung seiner CSS-Spielwiese erwartet.
Hoverbox by Nathan Smith in W2d
Für eine vergrößerte Ansicht fahren Sie bitte langsam mit der Maus über die Bilder!
Außenansicht der ehemaligen Brotfabrik in Frankfurt-Hausen.
Vorgehensweise
- erstellen Sie Ihre Grafiken möglichst in einer einheitlichen Größe
- wählen Sie eine optimale Bilderanzahl
- wählen Sie ein Bildformat, das von web to date verarbeitet werden kann: *.jpg, *.bmp, *.gif
- vergeben Sie einfache Dateinamen beispielsweise nach folgendem Muster: bild1.jpg, bild2.jpg, bild3.jpg, bild4.jpg ...
- melden Sie diese Grafiken nach dem bekannten Muster an
Dafür haben Sie mehrere Möglchkeiten
- schreiben Sie den Code direkt in einen html-Absatz
- binden Sie die Grafiken in der global.ccml ein oder
- binden Sie die Grafiken im verwendeten Substyle ein
global.ccml: CSS anmelden
- So melden Sie das benötigte Stylesheet an:
- <cc:*>für Galery Hoverbox:</cc:*>
- <cc:asset src="style_hoverbox.css" dst="s_hoverbox.css" obj="myhoverboxstyle">
navigation.ccml: CSS einbinden
- So binden Sie das benötigte Stylesheet [1 KB] ein:
- <cc:*>für Hoverbox Gallery:</cc:*>
- <link rel="stylesheet" type="text/css" href="<cc:print value="&myhoverboxstyle.url">" media="screen, projection" />
Der Code für die Bildergalerie
code ansehen
Wählen Sie einen html-Absatz aus und geben Sie den Code nach folgendem Muster ein:
<!--Author:Nathan Smith , http://host.sonspring.com/hoverbox/-->
<div class="centered">
<p><strong>Für eine vergrößerte Ansicht fahren Sie bitte langsam mit der Maus über die Bilder!</strong></p>
<ul class="hoverbox">
<li><a href="#"><cc:printpicture obj="pic.1" alt="Brotfabrik"></img><cc:printpicture obj="pic.1" alt="Brotfabrik" class="preview"></img></a></li>
<li><a href="#"><cc:printpicture obj="pic.2" alt="Brotfabrik"></img><cc:printpicture obj="pic.2" alt="Brotfabrik" class="preview"></img></a></li>
<li><a href="#"><cc:printpicture obj="pic.3" alt="Brotfabrik"></img><cc:printpicture obj="pic.3" alt="Brotfabrik" class="preview"></img></a></li>
<li><a href="#"><cc:printpicture obj="pic.4" alt="Brotfabrik"></img><cc:printpicture obj="pic.4" alt="Brotfabrik" class="preview"></img></a></li>
<li><a href="#"><cc:printpicture obj="pic.5" alt="Brotfabrik"></img><cc:printpicture obj="pic.5" alt="Brotfabrik" class="preview"></img></a></li>
<li><a href="#"><cc:printpicture obj="pic.6" alt="Brotfabrik"></img><cc:printpicture obj="pic.6" alt="Brotfabrik" class="preview"></img></a></li>
<li><a href="#"><cc:printpicture obj="pic.7" alt="Brotfabrik"></img><cc:printpicture obj="pic.7" alt="Brotfabrik" class="preview"></img></a></li>
<li><a href="#"><cc:printpicture obj="pic.8" alt="Brotfabrik"></img><cc:printpicture obj="pic.8" alt="Brotfabrik" class="preview"></img></a></li>
</ul>
<br clear="all" />
<p class="picturetext">Außenansicht der ehemaligen Brotfabrik in Frankfurt-Hausen.</p>
</div>
