Bildwechsel

[Cybaer]

Hi,

Du scheinst mir ein Perfektionist zu sein.

Das sagt man mir mitunter nach. =;-)

<a href="#" onmouseover="document.guckmal.src='guckmal2.gif'" onmouseout="document.guckmal.src='guckmal1.gif'">

Wow, nicht schlecht. :-) Vergleichsweise. ;-)

Sinnvoller ist es aber, das ganze in eine Funktion auszulagern - schon wg. der "Funktionalitätsüberprüfung" (AKA: Kann der Browser das überhaupt):

function switch(img,url) { if(document.images) { document.images[img].src=url; } }

Also:

<a href="#" onmouseover="switch('guckmal','guckmal2.gif');" onmouseout="switch('guckmal','guckmal1.gif');">

<img src="guckmal1.gif" name="guckmal" border="0"></a>

Das kann man aber fast so lassen. Allerdings fehlt ALT. Und da ALT bei manchen Browsern auch noch dummerweise für andere Dinge herhalten muß, schadet ggf. auch TITLE nicht (und wenn das Attribut mit leerem Inhalt versehen wird.

Auch WIDTH & HEIGHT sollte man durchaus verwenden, insbesondere mit Blick auf ältere Netscapes.

Naja umso besser, so lern ich mal "schönes" Programmieren... ;-)

Wobei das mitunter relativ ist. ;-)

Ich persönlich verwende (die allerdings leistungsfähigere und im "Normalfall" überdimensionierte Routine) ImgSwitch, die dafür natürlich in eine externe Scriptdatei ausgelagert werden sollte.

Und da im obigen Beispiel noch Redundanz ist, spare ich ggf. auch noch beim Namen. Dazu einfach drei Mini-Funktionen flip(), flop() & flup(), die davon ausgehen, daß zum einen Dateiname und Name des IMGs, zum anderen die verwendeten Dateiextensionen identisch sind, und dann noch zum Dateinamen eine Nr. von 1-3 (oder 0-2) hinzufügen:

function flip(name) { switch(name,name+"2.gif"]); } }
function flop(name) { switch(name,name+"1.gif"]); } }
function flup(name) { switch(name,name+"0.gif"]); } }

Dann hätten wir:

<a href="#" onmouseover="flip('guckmal');" onmouseout="flop('guckmal');" onmousedown="flup('guckmal');">

für einen dreistufigen Wechsel.

Und cachen geht ja auch easy:

<script type="text/javascript" language="JavaScript1.1"><!--
 if(document.images) { cache=new Array(); i=-1;
  i++; cache[i]=new Image(); cache[i].src="guckmal0.gif";
  i++; cache[i]=new Image(); cache[i].src="guckmal1.gif";
 }
//--></script>

Aber: Alles ist relativ ...
Und: Viele Wege führen nach Rom ...

Nur: Übersichtlicher (und sauberer) als das andere Gedöns, ist es IMHO allemal. ;-)

Gruß, Cybaer

PS: Eigentlich muß man jetzt nur noch verhindern, daß es zu Fehlern kommt, falls das externe Script nicht geladen wurde. Aber das ist ein anderes Thema ... ;-)