Bildzoom von Stu Nicholls

Bild- und Textzoomfunktionen nach Stu Nicholls

Hier stelle ich Ihnen die "Magnify an Image "-Lösung von Stu Nicholls vor, übersetzt für die Nutzung mit Web to date. Bitte beachten Sie, dass die Verwendung dieser Variante die Zustimmung von Stu Nicholls voraussetzt - wenn sie auf einer kommerziellen Seite zum Einsatz kommt.

Warum kostenpflichtig?
Die spektakulären Ideen von Stu haben in die Tausende gehende Seitenaufrufe zur Folge - was erhebliche Traffic-Kosten verursacht. Wenn jeder, der sich auf CSSplay bedient, ein paar Euro spendiert, hilft das einer guten Sache im Web.

Zwei Beispiele

Weiter unten sehen Sie zwei Lösungen, die mit Stus Methode realisiert wurden. Einmal wird eine Grafik als Thumbnail präsentiert, das bei Mouse over die größere Ursprungsdatei einblendet .

Im Beispiel ganz unten haben wir wieder eine Grafik. Diesmal wird bei Mouse over der zugehörige Text eingeblendet .

Vorgehensweise

erstellen Sie Ihre Grafiken möglichst in einer einheitlichen Größe, wenn Sie mehrere Bilder präsentieren
wählen Sie ein Bildformat, das von web to date verarbeitet werden kann: *.jpg, *.bmp, *.gif
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 zum Einsatz kommenden Grafiken in der global.ccml ein oder
binden Sie sie im verwendeten Substyle ein

global.ccml: CSS anmelden

So melden Sie das benötigte Stylesheet an:
<cc:*>Style für Elemente von Stu Nicholls</cc:*>
<cc:asset src="style_stue_nicholls.css" dst="s_stue_nicholls.css" obj="mystyle_stue_nicholls">

navigation.ccml: CSS einbinden

So binden Sie das benötigte Stylesheet [1 KB] ein:
<cc:*>für Bildzoom von Stu Nicholls und Grafikeinrahmungen</cc:*>
cc:print value="&mystyle_stue_nicholls.url">" media="screen, projection" />

Natürlich lässt sich die beschriebene Methode auch als Standard in w2d einbinden. Als Zoomfunktion in Tabellen, des Marginalbildes etc. Wenn Sie daran interessiert sind, sprechen Sie mich bitte an .

Der Code für den Bildzoom

Um den gesamten Code ansehen zu können, nutzen Sie bitte die Markierfunktion mit Hilfe der Maus.

Wählen Sie einen html-Absatz aus und geben Sie den Code nach folgendem Muster ein:
<cc:picture obj="pic.engel.small" dst="engel_small.gif" src="pic_engel_small.gif">
<cc:picture obj="pic.engel.small2" dst="engel_small2.gif" src="pic_engel_small2.gif">
<cc:picture obj="pic.engel.small3" dst="engel_small3.gif" src="pic_engel_small3.gif">
<cc:picture obj="pic.engel.small4" dst="engel_small4.gif" src="pic_engel_small4.gif">

<div id="stu_images">
<a class="p_border" href="#v"><cc:printpicture xhtml="1" obj="pic.engel.small" alt="ein kleiner Engel" title="ein kleiner Engel" width="120" height="110"><cc:printpicture xhtml="1" obj="pic.engel" alt="ein Engel" title="ein Engel" width="360" height="330" class="large"></a>

<a class="p_border" href="#v"><cc:printpicture xhtml="1" obj="pic.engel.small2" alt="ein kleiner Engel" title="ein kleiner Engel" width="120" height="110"><cc:printpicture xhtml="1" obj="pic.engel2" alt="ein Engel" title="ein Engel" width="360" height="330" class="large"></a>

<a class="p_border" href="#v"><cc:printpicture xhtml="1" obj="pic.engel.small3" alt="ein kleiner Engel" title="ein kleiner Engel" width="120" height="110"><cc:printpicture xhtml="1" obj="pic.engel3" alt="ein Engel" title="ein Engel" width="360" height="330" class="large"></a>

<a class="p_border" href="#v"><cc:printpicture xhtml="1" obj="pic.engel.small4" alt="ein kleiner Engel" title="ein kleiner Engel" width="120" height="110"><cc:printpicture xhtml="1" obj="pic.engel4" alt="ein Engel" title="ein Engel" width="360" height="330" class="large"></a>

</div> 

Bild mit Text bei Mouse over

Hier ist die Grafik in einen Rahmen eingebunden. Auch dieser CSS-Code stammt von Stu Nicholls.

Hier steht ein Text. Hier steht ein text. Hier steht ein text. Hier steht ein text. Hier steht ein text. Hier steht ein text.

Hier steht ein text. Hier steht ein text. Hier steht ein text. Hier steht ein text. Hier steht ein text. Hier steht ein text.

Der Code für Bild mit Text bei Mouse over

Um den gesamten Code ansehen zu können, nutzen Sie bitte die Markierfunktion mit Hilfe der Maus.

Wählen Sie einen html-Absatz aus und geben Sie den Code nach folgendem Muster ein:




<div class="xsnazzy">

<div class="xboxcontent">
<a class="p1" href="#v"><cc:printpicture obj="pic.engel.small" alt="ein Engel" title="ein Engel" width="105" height="95""></img>Hier steht ein text. Hier steht ein text. Hier steht ein text. Hier steht ein text. Hier steht ein text. Hier steht ein text. Hier steht ein text. Hier steht ein text. Hier steht ein text. Hier steht ein text. Hier steht ein text. Hier steht ein text. </a>
 
</div>

</div>

Galerie von Nathan Smith