Rollover mit XHTML Strict?

[Julian Hofmann]

Hallo,

nachdem ich mich mehr und mehr in die Strict-Definitionen von HTML/XHTML einarbeite und mich daran gewohnt habe vieles anders machen zu müssen, stehe ich vor einem Problem: Ein simpler Rollover-Effekt.
Das Beispiel aus SelfHTML geht nicht, da das name-Attribut in XHTML Strict nicht gestattet.
Die Funktion aus Dreamweaver läuft auch nicht (Unterstützung sämtlicher Strict-Varianten bescheiden).

Somit bin ich zu folgendem Script gekommen:

end_on = new Image();
end_on.src = "images/line_top_on.gif";

function Over(BildName)
{
  if (document.images) {
    document.getElementById(BildName).src = eval(BildName + "_on.src");
  }
}

Der Verweis:
<a href="#top" onmouseout="Out('end')" onmouseover="Over('end')"><img src="images/line_top.gif" width="590" height="10" alt="Nach oben" id="end" /></a>

Das Problem:
Nur Mozilla (und NS 6) bzw. IE5 akzeptieren das. Opera (5+6) macht nichts (NS4 zählt nicht mehr). Dies lässt mich vermuten, dass es irgendwo noch hakt bzw. besser gehen sollte. Aber wie?

Grüße aus Würzburg
Julian

[Rainer S.]

Hallo,

(...) da das name-Attribut in XHTML Strict nicht gestattet.

Wo steht das denn?
Es ist zwar deprecated, steht aber in der DTD (zu 1.0) noch drin,
und auch in der Rec. ist ja die Verwendung von id und name in den
HTML Compatibility Guidelines aufgeführt.
Oder meintest Du XHTML 1.1?

Gruß aus Bilk

Rainer

[Julian Hofmann]

Hallo Rainer,

frag mich nicht, wo das steht, aber der Validator vom W3C streicht es ganz klatt als "Error" an und hält den Code folglich nicht für ein XHTML 1.0 Strict-Dokument. (http://validator.w3.org/check?uri=http%3A%2F%2Fneu.abizeitung.net%2Ftest.php&charset=(detect+automatically)&doctype=Inline)

Grüße aus Würzburg
Julian

[Rainer S.]

Hallo Julian,

habs gefunden:
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd

<!--
   To avoid accessibility problems for people who aren't
   able to see the image, you should provide a text
   description using the alt and longdesc attributes.
   In addition, avoid the use of server-side image maps.
   Note that in this DTD there is no name attribute. That
   is only available in the transitional and frameset DTD.
-->

<!ELEMENT img EMPTY>
<!ATTLIST img
  %attrs;
  src         %URI;          #REQUIRED
  alt         %Text;         #REQUIRED
  longdesc    %URI;          #IMPLIED
  height      %Length;       #IMPLIED
  width       %Length;       #IMPLIED
  usemap      %URI;          #IMPLIED
  ismap       (ismap)        #IMPLIED
  >

In der Recommendation liest es sich anders. Hatte gestern nur nach name im <a> -Element geguckt,
und das ist es aus Kompatibilitätsgründen noch drin.
Um auf Dein Ursprungsproblem zurückzukommen...
Da fällt mir nur noch die Methode mit document.images[Nummer] ein.

Grüße aus Bilk

Rainer

P.S.: Korrigiere mal den System Identifier im Doctype, sonst klappts nicht mit dem CSS-Validator

[Christian Kruse]

Hoi,

In der Recommendation liest es sich anders. Hatte gestern nur nach
name im <a> -Element geguckt, und das ist es aus
Kompatibilitätsgründen noch drin. Um auf Dein Ursprungsproblem
zurückzukommen...
Da fällt mir nur noch die Methode mit document.images[Nummer] ein.

Warum nicht folgendes:

imgs = new Array();
imgs['end_on']     = new Image();
imgs['end_on'].src = "images/line_top_on.gif";

function Over(BildName)
{
  if (document.images) {
    document.images[BildName].src = imgs[BildName].src;
  }
}

...

<a href="#top" onmouseover="Over('end')"><img src="images/line_top.gif" width="590" height="10" alt="Nach oben" id="end" /></a>

Der einzige, der das nicht schafft, ist der NN4.7x. Aber der war
ja von Julian eh ausgenommen.

Gruesse,
 c.j.k

[Christian Kruse]

Hoi,

Warum nicht folgendes:

sorry, falsches Script. Das hier war das richtige:

imgs = new Array();

imgs['end']            = new Array();
imgs['end']['on']      = new Image();
imgs['end']['on'].src  = "images/line_top_on.gif";
imgs['end']['off']     = new Image();
imgs['end']['off'].src = "images/line_top.gif";

function Over(BildName,status)
{
  if (document.images) {
    document.images[BildName].src = imgs[BildName][status].src;
  }
}

Gruesse,
 c.j.k

[Julian Hofmann]

Hallo Christian,

danke für das Script. Sieht gut aus, lässt sich schön ausbauen (weitere Bilder) - nur läuft es (bei mir) mit Opera auch nicht. :-(

Grüße aus Würzburg
Julian

[AndreasW]

Hallo,

Hallo,

nachdem ich mich mehr und mehr in die Strict-Definitionen von HTML/XHTML einarbeite und mich daran gewohnt habe vieles anders machen zu müssen, stehe ich vor einem Problem: Ein simpler Rollover-Effekt.

[...]

Der Verweis:
<a href="#top" onmouseout="Out('end')" onmouseover="Over('end')"><img src="images/line_top.gif" width="590" height="10" alt="Nach oben" id="end" /></a>

Das Problem:
Nur Mozilla (und NS 6) bzw. IE5 akzeptieren das. Opera (5+6) macht nichts (NS4 zählt nicht mehr).

Wenn der NS4 eh nicht beachtet wird, würde ich das ganze per CSS lösen:
ins CSS:
a#end:link { background-image:url(bild1.gif);width:100px;height:20px; }
a#end:visited { background-image:url(bild1.gif);width:100px;height:20px; }
a#end:focus { background-image:url(bild1.gif);width:100px;height:20px; }
a#end:hover { background-image:url(bild2.gif);width:100px;height:20px; }
a#end:active { background-image:url(bild2.gif);width:100px;height:20px; }

und im HTML:
<a href="#top" id="end"> </a>

evtl. muß man noch mit ein paar CSS-Properties spielen, bis es paßt (line-height, background-xxx u.ä.), aber dann klappt es sogar ohne Javascript.
Oder statt des   ein transparentes gif/png der passenden Größe...

Grüße aus Würzburg

Grüße nach Würzburg

Julian

Andreas

[Julian Hofmann]

Hallo Andreas,

Wenn der NS4 eh nicht beachtet wird, würde ich das ganze per CSS lösen:
ins CSS:

Die Variante klingt auch mal ganz interessant und (für mich) neu.
Ist konkret zwar nicht so interessant weil meine Bildchen im Byte-Bereich liegen (Pfeile usw.), aber wird ein Backgroundimages von CSS beim Lesen schon geladen, oder erst wenn die Formatierung benutzt wird, also jemand auf den Linkt geht?

Grüße aus Würzburg
Julian

[AndreasW]

Hallo Andreas,

Hallo,

Die Variante klingt auch mal ganz interessant und (für mich) neu.
Ist konkret zwar nicht so interessant weil meine Bildchen im Byte-Bereich liegen (Pfeile usw.), aber wird ein Backgroundimages von CSS beim Lesen schon geladen, oder erst wenn die Formatierung benutzt wird, also jemand auf den Linkt geht?

Nicht daß ich wüßte - da müßte man genauso wie für script-abhängige Mouseoverbilder ein Preloader-Script verwenden.

Stell Dir vor, Du hast ein zentrales CSS für zig Seiten, in dem einige hundert Hintergrundbilder angesprochen werden.
Nur weil jetzt jemand auf eine der Seiten geht, würden dann ja schon alle Bilder mitgesaugt...

Grüße aus Würzburg
Julian

Andreas

[Julian Hofmann]

Hallo,

Stell Dir vor, Du hast ein zentrales CSS für zig Seiten, in dem einige hundert Hintergrundbilder angesprochen werden.
Nur weil jetzt jemand auf eine der Seiten geht, würden dann ja schon alle Bilder mitgesaugt...

Genau deshalb habe ich ja nochmal nachgehakt. Möchteja schließlich auch die (eventuellen) Nachteile der ansich interessanten Variante kennen.
Mal sehen, bei paar Bytes könnt's ja auch ohne Vorladen klappen.

Grüße aus Würzburg
Julian