Programm Hilfe Website X5

Manch einer möchte gerne in einem Bild verschiedene Bereiche anklickbar gestalten.
Dies funktioniert mit einer map Anweisung.

Was man dazu benötigt ist ein Grafikprogramm (kein muss aber leichter) welches Bereiche in einem Bild mit einem Link belegen kann.

Ich benutze dazu Ulead Photo Impact X3 oder Adobe Photoshop.

In dieser Anleitung erkläre ich es anhand des Ulead Programms. Da dies auch für Anfänger sehr gut geeignet ist.

<TABLE BORDER="0" CELLPADDING="0" CELLSPACING="0">
<TR>
<TD><IMG SRC="upi5510_1.jpg" WIDTH="600" BORDER="0" HEIGHT="300" USEMAP="#Map1"></TD>
</TR>
</TABLE>
<MAP NAME="Map1">
<AREA ALT="Titel" title="das was als Tooltip angezeigt werden soll" HREF="http://www.websitex5.kmp-design.de" SHAPE="circle" COORDS="66,28,19" TARGET="_blank"></AREA>
</MAP>

Dazu möchte ich noch eine kleine Erklärung abgeben....


IMG SRC="upi5510_1.jpg" = Der Speicherort und der Name des Bildes. Dies kann auch eine vollständige URL sein. Das Bild muss manuell auf den Webspace geladen werden.


WIDTH="600" BORDER="0" HEIGHT="300" = Breite des Bildes 600px - Rahmen 0px - Höhe 300px

ALT="Titel" = Durch den Alt-Tag wird ein alternativer, umschreibender Bild-Text (bspw. für den Fall, dass die Seite mit einem reinen Textbrowser ohne Bildunterstützung aufgerufen wird) festgelegt. Das Attribut alt ist Pflichtangabe für jede Grafikeinbindung um einen validen Quellcode zu bekommen.
Der Internet Explorer zeigt den Alternativtext als Tooltip an, wenn man mit dem Mauszeiger länger über der Grafik verweilt. Dies macht der Firefox aber nicht dieser benötigt noch den Title-Tag. Dieser Tag ist ein Universalattribut und für den Tooltip zuständig.

title="das was als Tooltip angezeigt werden soll" = dieser Satz muss hinter den Alt-Tag um den Tooltip anzuzeigen.

HREF="http://www.websitex5.kmp-design.de" = Der Link für den Bereich des Bildes

SHAPE="circle" COORDS="66,28,19" = Koordinaten des Bereiches und die Form

TARGET="_blank"> = Wie der Link geöffnet werden soll also
_blank, um den Verweis in einem neuen Fenster zu öffnen,
_self, um den Verweis im aktuellen Fenster zu öffnen,
_parent, um bei verschachtelten Framesets das aktuelle Frameset zu sprengen,
_top, um bei verschachtelten Framesets alle Framesets zu sprengen.


Dies ist jetzt die einfachste Art. Möchte man noch Hover Effekte oder sonstiges in die map mit einbauen dann muss man sich mit javascript behelfen. Wenn ich noch Lust habe werde ich dies hier auch noch erklären. Aber fürs erste sollte dies erstmal reichen.