nicht angemeldet
(ZUR INFO) Zusammenfassung der Probleme mit dem alt="" und dem title="" Attribut bei Client-sided Imagemaps
Liebe Fo's
Hier eine Zusammenfassung dieses Problems.
Basisinformation in SELFHTML von Stefan Münz http://www.teamone.de/selfhtml/tcgh.htm#a1
Ausgangslage:
Du hast ein Bild, das verweissensitiv entweder nur tooltips zeigen soll (nohref) oder auch Sprungziele (href) hat.
Allgemeines:
insgesamt sind 1024 Zeichen möglich. Zeilenumbruch und Tabulator mit geschützten Zeichen (' ' Tabulator
'
' Zeilenumbruch ) - nur IE !!
Es gibt erhebliche Unterschiede zwischen NN und IE
NN:
- versteht nur das alt="" Attribut, stört sich aber nicht am title="" Attribut
- versteht nur das alt="" Attribut aber nicht in Verbindung mit nohref (Umgehungslösung: Mit href="#Anker" einen internen Sprung zum Angang der Datei. Dabei passiert nichts im Bildaufbau, solange nicht gescrollt wurde.
- Scrollen darf man ohnehin nicht, da sonst der NN-Browser nichts mehr anzeigt (Bug !) - Daher also unbedingt das ImageMap am Anfang der Datei.
- Noch ein Bug: Alt-Tooltip funktioniert nur mit shape="rect"
- Ein Zeilenumbruch oder Tabulator ist nicht möglich.
- Wer nur eine Bildbeschreibung (ohne Sprungziele braucht) kann mit onFocus="this.blur();" im <area> Tag die unschönen Begrenzungslinien ausblenden.
IE:
Mit IE ist alles einfacher. Er versteht alles, was NN nicht kann.
- interpretiert das title="" Attribut. Kann aber mit alt="" nichts anfangen
- funzt auch mit nohref
- Scrollen stört nicht
- Funktioniert mit allen shape="" Formen
- Zeilenumbruch mit geschützten Zeichen möglich
- onFocus="this.blur();" im <area> Tag zum ausblenden der unschönen Begrenzungslinien funktioniert auch.
Damit es mit beiden funktioniert:
- alt="" und title="" Attribut verwenden
- Wenn nichts angesprungen werden soll (nur Tooltip als Beschreibung) - href="#Anker" und onFocus="this.blur();" verwenden.
- gechützte Zeichen verwenden (wird von NN ignoriert)
- Imagemap an den Dateianfang, um nicht scrollen zu müssen (nimmt NN übel)
Beispiele:
Mit href Sprungzielen (für IE und NN):
<HTML>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<img src="zB_Bild.gif" width="590" height="283" border="0" title="" alt="" usemap="#zB_Bild">
<map name="zB_Bild">
<area shape="rect" title="Zeile 1
Zeile 2
Zeile 3" alt="Zeile 1 - Zeile 2 - Zeile 3" coords="14,65,236,80" href="irgendwas.htm">
<!-- weiterer Code -->
<area shape="rect" coords="0,0,589,282" nohref onFocus="this.blur();">
</map>
</BODY>
</HTML>
Ohne Sprungzielen (für IE und NN):
<HTML>
<A NAME="Top"></A>
<HEAD>
<TITLE></TITLE>
</HEAD>
<BODY>
<img src="zB_Bild.gif" width="590" height="283" border="0" title="" alt="" usemap="#zB_Bild">
<map name="zB_Bild">
<area shape="rect" title="Zeile 1
Zeile 2
Zeile 3" alt="Zeile 1 - Zeile 2 - Zeile 3" coords="14,65,236,80" href="#Top" onFocus="this.blur();">
<!-- weiterer Code -->
<area shape="rect" coords="0,0,589,282" nohref onFocus="this.blur();">
</map>
</BODY>
</HTML>
Ich habe nich hoffetlich verständlich ausgedrückt.
Sollte Stefan Münz dies lesen, wäre vielleicht eine Ergänzung in SELFHTML denkbar.
Liebe Grüße
ptak