onClick Bild wechsel und wieder zurück

campylobacter · 25.12.2003, 00:36

Hallo,

Folgendes Problem, das ich nicht lösen kann:

Ein Bild(Pfeil nach unten) soll nach einem Mausklick gegen ein anderes Bild(Pfeil nach oben) ausgetauscht werden.
Das hätte ich alleine ja schon noch geschaft. Nur soll beim nächsten klick, wieder das erste Bild geladen werden, usw,...

Rein Gedanklich ist es ja eigentlich nicht so schwer, aber technisch fehlt mir einfach noch das Wissen.

Vielleicht kann mir ja jemand weiterhelfen.
Vielen Dank!

mfg campy

GodfatherDeluxe · 25.12.2003, 23:26

zuerst musst du im javascript die bilder die du verwenden möchtest vorladen, in dem Beispiel is das pfeil_hover.gif und pfeil_normal.gif
<script language="JavaScript">
if (document.images)
{
var img1on = new Image();
img1on.src = "gif/pfeil_hover.gif";
var img1off = new Image();
img1off.src = "gif/pfeil_normal.gif";
}

//funktion um das bild zu wechseln, wenn man mit der maus drüberfährt

function imgOn(imgName)
{
if (document.images)
{
document.images[imgName].src = eval(imgName + "on.src");
}
}

//und funktion um es zu wechseln wenn man mit der maus wieder weggeht
function imgOff(imgName)
{
if (document.images)
{
document.images[imgName].src = eval(imgName + "off.src");
}
}
</script>

und in html:

<a href="#" onMouseOver="imgOn('img1');" onMouseOut="imgOff('img1');">
<img src="gif/pfeil_normal.gif" name="img1">
</a>

campylobacter · 26.12.2003, 21:16

Danke für deine Antwort.
Leider war das nicht ganz, was ich brauche.
Also kein Bilderwechsel mit mouseover, sondern mit onClick. Wie oben schon geschrieben, soll nach einem weiteren Klick, wieder das erste Bild angezeigt werden.
Kann man das Script so erweitern, das es sich merkt, ob es jetzt on, oder off ist?

mfg campy

Karsten Müller · 27.12.2003, 12:19

Guten Tag.

Ich hab folgendes zwar nicht getestet, aber es sollte eigentlich funktionieren.

Code:

<html>
<head>
<script language="JavaScript" type="text/javascript">
function swapArrow(bild){
  pfeilRechts = new Image();
  pfeilRechts.src = "rechts.gif";
  pfeilUnten = new Image();
  pfeilUnten.src = "unten.gif";
  
  if(bild.src.indexOf('rechts.gif') == -1){
    bild.src = pfeilRechts.src;
  }
  else{
    bild.src = pfeilUnten.src;
  }
}
</script>
</head>

<body>
<img src="rechts.gif" width="11" height="67" onClick="swapArrow(this)">
</body>
</html>

Oder?

Beste Grüße . . . Karsten

campylobacter · 27.12.2003, 16:40

Vielen Dank für die Antwort. So habe ich es jetzt gelöst:

Code:

<html>
<head>
<script language="JavaScript" type="text/javascript">


function bildwechsel(Bildname)
{
  if(document.getElementById(Bildname).src.indexOf('nav_expand_off.gif') == -1)
  {
    document.getElementById(Bildname).src = "nav_expand_off.gif"
  }	
  else
  {
    document.getElementById(Bildname).src = "nav_expand.gif"
  }
}

</script>
</head>

<body>
<img src="nav_expand.gif" name="grafik" id="grafik" onClick="bildwechsel(this.name)">
</body>
</html>

mfg campy

GodfatherDeluxe · 27.12.2003, 16:49

statt document.grafik.src
document.Bildname.src
oder?