Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:create:popup [16.01.2015 17:20] – Aktualisiert admin
+++ de:create:popup [19.01.2016 17:48] – [Tooltip bei Berührung II] soz13hud
@@ Zeile 27: / Zeile 27: @@
-===== Tooltip bei Berührung II =====
+Facebook ermöglicht es mir, mich über meinen <span title="Ein &quot;**News-Feed**&quot; ist ein Nachrichtenstrom, der sich aus bestimmten Quellen speist (=engl. to feed). Welche Quellen das sind, bestimmen Sie durch die Vernetzungen, die Sie eingehen. Als Synonym sind Ihnen wahrscheinlich die Begriffe Chronik und Startseite bekannt." style="border-bottom: 1px dotted">News-Feed</span> über Nachrichten zu informieren, die mich interessieren.
-Eine weitere Lösung besteht darin, das HTML-Attribut //title// für zusätzliche Informationen zu verwenden. Hierbei wird ebenfalls eine kurze Information angezeigt, wenn der Teilnehmer mit der Maus über einem Wort verweilt -- allerdings erst nach einer kurzen Verzögerung. Das Wort selbst kann ggf. mittels ''style''-Attribut visuell hervorgehoben werden.
-<code html>
-<p>Hier ist der Text mit einem <span title="Ein Wort, dessen Bedeutung nicht direkt ersichtlich ist" style="border-bottom: 1px dotted">erklärungsbedürftigen</span> Wort.</p>
-</code>
-Wenn die Information direkt in einem Item erscheinen soll, setzen Sie das ''<span>''-Tag einfach direkt in den Itemtext an die passende Stelle.
-<code html>
-Bei Sonnenschein bin ich lieber <span title="Mit &quot;draußen&quot; ist gemeint, dass Sie sich außerhalb geschlossener Räume aufhalten" style="border-bottom: 1px dotted">draußen</span> als dass ich an Onlinebefragungen teilnehme.
-</code>
-**Hinweis:** Die Darstellung der ''title''-Information obliegt dem Browser des Teilnehmers. Sie haben keinen Einfluss darauf, wie schnell die Information angezeigt wird und in welcher Formatierung.
 ===== Information per Mausklick =====
@@ Zeile 260: / Zeile 245: @@
 </script>
 </code>
+==== Bilder vergrößern ====
+Wenn Sie ein Bild als Knopf verwenden und beim Klick eine größere Version desselben Bilds anzeigen, können Sie mit der Funktion auch ein Bild vergrößern. Sie müssen sich lediglich um HTML-IDs für die Bilder und die Positionierung der großen Bildversion kümmern:
+<code html>
+<div style="position: relative; left: -100px; top: -100px">
+  <img src="grosses-bild.jpg" id="large1" />
+</div>
+<img src="kleines-bild.jpg" id="image1" />
+<script type="text/javascript">
+<!--
+var info = new infoButton();
+info.registerInfo("image1", "large1", "large1");
+//-->
+</script>
+</code>
+Das obige Beispiel verzichtet auf einen gesonderten Knopf zum Schließen des großen Bildes -- ein Klick auf die vergrößerte Version reicht.