onClick Bild wechsel und wieder zurück

**campylobacter** · 24.12.2003 23: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 22: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 20: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 11: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 15: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 15:49

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

**handyaner** · 04.06.2009 16:22

hallo

wie würde denn das script aussehen, wenn man noch einen mouseover effekt mit einbaut?

jedoch muss ja dann ja noch per script gecheckt werden welches bild von den zwei gerade angezeigt wird und ein entsprechendes mouseover-bild angezeigt werden, da es dann auch zwei verschiedene mouse-over-bilder gibt.

**Guin** · 04.06.2009 22:07

Moin,
in dem Fall waere ein Wechsel der Klasse (class) einfacher und dann mit css hover ein ganz normalen Bildwechsel erzeugen.

**piet_sun** · 31.01.2011 11:49

Zitat von campylobacter

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

Genau dieses Script habe ich eingefügt! Für meine Zwecke müßte nun noch je ein Link pro Bild angefügt werden. Die Links sind die Schaltbefehle für eine Lampe bei meiner Haussteuerung: Bild 1 ist Schalter an mit entsprechenden befehl in form eines links und schalter zwei wäre dann aus mit entsprechenden linkbefehl!
Ist das Möglich?

zur Startseite vom TP

Thema: onClick Bild wechsel und wieder zurück

LinkBack

Themen-Optionen

Thema durchsuchen

Thema bewerten

onClick Bild wechsel und wieder zurück

Aktive Benutzer

Aktive Benutzer