/* Bild - Wechsel */	
#wechsel a {
    display:block;   /* Linkbereich begrenzen */
  }
  #wechsel img {
    display:block; border:0;
  }
  
  #wechsel a:hover img,
  #wechsel a.current img {
    visibility: hidden;
  }
  #wechsel a:hover,
  #wechsel a.current { /* Workaround fuer IE 5.5 und 6 */
    border:0;
  }
  * html #wechsel a {
    margin-right:1px;
  }
  * html #wechsel a:hover,
  * html #wechsel a.current {
     margin-right:0; /* Workaround fuer IE 5.01 */
  }

/*
<p id="wechsel"> <!-- oder z.B. für Menues <ul id="navigation"><li> -->
 <a href="#wechsel"><img src="selflogo.gif" alt="SELFHTML Logo" /></a>
</p>

		<div id="wechsel">
			<a  href="link.html" target="_top" 
				style="background: left url(background.gif) no-repeat; float: left; ">
				<img src="link.gif" alt="link"  name="link"  /></a>
		</div>


Die zunächst sichtbare Grafik wird hier ganz normal als <img> in den Link gesetzt und die erst später sichtbare Grafik als Hintergrundgrafik für <a> eingebunden. Damit diese nicht durchscheint, darf die Vordergrundgrafik natürlich nicht (zumindest nicht an anderen Stellen) transparent sein.
Da die Hintergrundgrafik theoretisch sichtbar sein könnte, wird sie von Browser geladen und die Vordergrundgrafik kann ganz normal mit einem Alternativtext versehen werden - die o. g. Probleme sind auf einfachste Weise gelöst.

Beim Überfahren des Links wird nun kein Austausch der Grafiken vorgenommen, sondern lediglich die Vordergrundgrafik unsichtbar definiert, so daß die Hintergrundgrafik sichtbar wird.
Im Internet Explorer erfordert dies zusätzlich die Änderung einer Linkeigenschaft. Für den IE 5.5 und 6 würde bereits ein Wechsel der Hintergrundfarbe, sogar von white auf #fff, oder die hier verwendete (unsinnige) Angabe a:hover {border:0;} ausreichen. Der IE 5.01 benötigt leider eine theoretisch sichtbare Änderung, wie sie oben zusätzlich notiert ist (Ausgleich evtl. auch über background-position:top 1px).



Aber was ist, wenn die Grafiken unterschiedliche Größen haben, z.B. die zunächst sichtbare (Vordergrund-)Grafik nur halb so breit ist und beim Überfahren des Links komplettiert werden soll?

Auch kein Problem. Wir ändern einfach dynamisch die Breite des Links und sparen damit auch den unschönen Workaround für den IE:
#wechsel a, #wechsel img { width:53px; }
#wechsel a:hover { width:106px; }

*/