Bildzuordnung mit Prototyp-Tooltips

Die Bereiche in normalen HTML-Bildzuordnungen unterstützen das title-Attribut, was reguläre Tooltips ermöglicht. Manchmal reichen die standardmäßigen Browser-Tooltips einfach nicht aus, besonders wegen ihrer eingebauten Verzögerungen.

Mein Lieblingspaket für ausgefallene Tooltips ist Prototip für das Prototype JavaScript-Framework. Prototip ist kostenlos herunterladbar, erfordert aber eine kleine Lizenzgebühr für die Nutzung auf Ihren Domains. Wir werden hier nur einen winzigen Bruchteil dessen nutzen, wozu Prototip fähig ist, aber hoffentlich wird diese Demo die Tür zu Möglichkeiten öffnen, falls Sie so etwas benötigen.

Demo anzeigen Dateien herunterladen

Bildzuordnung des Bildes

Das Erstellen von Bildzuordnungen ist eine der wenigen Funktionen, für die ich immer Dreamweaver öffne. Wenn Sie ein Bild auf Ihrer Seite in Dreamweaver ausgewählt haben, erhalten Sie kleine Werkzeuge, um die Bereiche direkt auf das Bild zu zeichnen.

Das ist unschlagbar einfach. Der Versuch, Bereiche ohne eine Art WYSIWYG-Editor zu erstellen, wäre ein Albtraum. Verwenden Sie diesen Code als Ausgangspunkt und fügen Sie dann eindeutige IDs zu jedem Bereich hinzu. Sie benötigen diese eindeutigen IDs, um mit Prototip darauf zuzugreifen. Ihr endgültiger Code wird etwa so aussehen:

<img src="images/image.jpg" alt="image" usemap="#Map" />
<map name="Map" id="Map">
	<area shape="circle" coords="147,131,12" href="#" id="tooltip-1"/>
	<area shape="circle" coords="178,169,12" href="#" id="tooltip-2" />
</map>

 

Prototip hinzufügen

Sie müssen die Prototype- und Prototip-JavaScript-Dateien in Ihrem Header einbinden und dann die neue `Tip`-Funktion verwenden, um die Tooltips für jede ID zu erstellen.

<script type='text/javascript' src='js/prototype.js'></script>
<script type='text/javascript' src='js/scriptaculous.js?load=effects'></script>
<script type='text/javascript' src='js/prototip.js'></script>
<script type='text/javascript'>
	function init() {
	//<![CDATA[
		new Tip('tooltip-1', '<h3>Content for Tooltip 1</h3>', {title : '', className: 'silver', effect: 'slide', showOn: 'mousemove', hideOn: 'mouseout', fixed: true, hook:{target: 'topLeft', tip: 'bottomLeft'} });
		new Tip('tooltip-2', '<h3>Content for Tooltip 2</h3>', {title : '', className: 'silver', effect: 'slide', showOn: 'mousemove', hideOn: 'mouseout', fixed: true, hook:{target: 'topLeft', tip: 'bottomLeft'} });					
	//]]>
	}
	Event.observe(window, 'load', init, false);
</script>

Im obigen Code sehen Sie einige der verschiedenen Optionen für Prototip. Zunächst zielen Sie auf die ID ab und stellen den HTML-Inhalt für den Tip bereit. Dann können Sie einen Klassennamen, die Standortausrichtung und die Ereignisse ändern, bei denen die Tooltips ausgelöst werden.

 

Tooltip CSS

Dieses Beispiel verwendet eine sehr, sehr einfache Formatierung.

.prototip 				{ position: absolute; }
.prototip .silver 			{ width: 733px; font-size: 1.8em; }
.prototip .silver .content 		{ text-align: center; padding: 10px 0; }

Am wichtigsten ist, dass Sie absolute Positionierung auf das `.prototip`-Element anwenden müssen, damit Ihre Tipps dort erscheinen können, wo sie sollen, und den Layoutfluss des Dokuments nicht beeinträchtigen. Dann können Sie über Ihre angewendete Klasse den Rest Ihrer Formatierung vornehmen. Dies ermöglicht es Ihnen, unterschiedliche Formatierungen für verschiedene Tooltips zu haben, was eine großartige Funktion ist. Beachten Sie, dass wir im Beispiel "silver" als Klassennamen haben. Dies ist das, was im JavaScript angewendet wird und worauf das CSS abzielt.

Also – der übliche Haftungsausschluss gilt hier. Es gibt viele Möglichkeiten, dies zu tun. Sie können reine CSS-Tooltips erstellen, wenn Sie möchten, und ich bin sicher, dass jedes große JavaScript-Framework eine eigene Lösung hat. Mein Fokus liegt hier darauf, Ihnen zu zeigen, wie Sie diese Tooltips über eindeutige IDs an Bildzuordnungen anhängen können, was ziemlich nützlich sein kann.