Austausch von Bildern ohne JavaScript?

Status
Nicht offen für weitere Antworten.
redlama

redlama

Erfahrenes Mitglied
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
 
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 !
 
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
 
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.

PHP: 
<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.
 
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
 
PHP: 
<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
 
Zuletzt bearbeitet:
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.:

PHP: 
<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>
 
Hey, ...

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

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

redlama :suspekt:
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück