# Austausch von Bildern ohne JavaScript?



## redlama (25. August 2004)

Hi zusammen!

Gibt es die Möglichkeit mit HTML Bilder auszutauschen wie bei JavaScript "onMouseOver"?

Das Problem ist, dass wir auf unserer Homepage die Navi-Leiste vollständig aus Bildern zusammengefügt haben und diese beim mit der Mouse drüberfahren durch ein anderes ersetzt werden.
Da aber viele User JavaScript deaktiviert haben, sehen sie somit auch nur das Standardbild, aber keine Veränderung.
Wir wollen die Bilder in der Navi-Leiste beibehalten und suchen nun eine Möglichkeit, die Funktionalität auch ohne JavaScript zu gewährleisten.
Hover bietet ja die Möglichkeit die Farbe von Links zu ändern, kann es aber auch Bilder austauschen?

Hat irgendwer eine Idee? Oder ist es schier unmöglich?

Schon einmal Danke im Voraus für Eure Tipps .

redlama


----------



## Thomas Lindner (25. August 2004)

Dieses ist mit purem HTML nicht möglich und mir ist auch keine andere Möglichkeit bekannt ( sprich der Einastz einer alternativen Sprache ).

Wer JavaScript austellt muss damit rechnen das er sich eingeschränkt und solche Sachen nicht zu sehen bekommt !


----------



## redlama (25. August 2004)

Tja, das hatte ich befürchtet, ...
Aber wie heißt es doch immer so schön:
"Die Hoffnung stirbt zuletzt" 

Falls doch noch jemand eine Idee hat oder eine andere Möglichkeit sieht, immer her damit!

redlama


----------



## xxenon (25. August 2004)

Mit CSS ist es theoretisch auch möglich per Pseudoformat (hover) Bilder auszutauschen.
Bislang funktioniert dies allerdings nur bei Mozilla-Browsern und ich denke mal, es wird noch einige Browsergenerationen dauern, bis man diese Variante vorbehaltslos einsetzen können wird.


```
<html>
<head>
<title></title>
<style type="text/css">
  div { background-image:url(bild1.jpg);
	  width:400px;
	  position:absolute;
      }
  div:hover { background-image:url(bild2.jpg); }
</style>
</head>
<body>
<div>&nbsp;</div>
</body>
</html>
```

MfG.


----------



## redlama (25. August 2004)

Jo, danke xxenon!

Habs gerade mal mit IE, Opera und Netscape probiert.
Der IE macht's nicht, Opera und Netscape ja!

Nochmals danke für den Tipp.

redlama


----------



## Stefan Topf (26. August 2004)

```
<html> 
<head> 
<title></title> 
<style type="text/css"> 
  a { background-image:url(bild1.jpg); 
      width:400px; 
      } 
  a:hover { background-image:url(bild2.jpg); } 
</style> 
</head> 
<body> 
<a href="xyz">&nbsp;</a> 
</body> 
</html>
```

Wenn du oben genannten Code durch diesen ersetzt, sollte es gehen, zumindest hatte ich bisher keine Schwierigkeiten mit IE, Opera und Mozilla.

Der IE reagiert allergisch auf das "div" im Zusammenhang mit hover.

Gruß
Stefan


----------



## xxenon (26. August 2004)

Woah!

Hatte eigentlich gedacht, dass ich das ausprobiert hätte *grübel*.


Jedenfalls great, dass es mit a tatsächlich in allen Browsern funktioniert...

Der  Vollständigkeit halber möchte ich anmerken, dass das Style-Attribut 'display' verwendet werden sollte, da sonst Breitenangaben im Zusammenhang mit Links nicht interpretiert werden.

d.h.:


```
<html>
<head>
<title></title>
<style type="text/css">
  a { background-image:url(bild1.jpg);
       display:block;
       width:400px;
      }
  a:hover { background-image:url(bild2.jpg); }
</style>
</head>
<body>
<a href="xyz">&nbsp;</a>
</body>
</html>
```


----------



## redlama (27. August 2004)

Hey, ...

Ich bin ja begeistert, hätte ehrlich gesagt nicht geglaubt, dass es funktioniert.

Danke Euch allen für Eure Tipps und Lösungen. 

redlama :suspekt:


----------

