onClick Bildtausch

G

GN911

Erfahrenes Mitglied
Hallo,

kann mal jemand einen geschulten Blick drüber werfen. So geht das leider nicht.

HTML: 
  <script type="text/javascript" language="javascript">
  <!--
  function wechsel(id)
  {
  	var img = id;
  	if(document.getElementById)
  	{
  		document.getElementById(id).src = 'on.gif';
  	}
  	else
  	{
  		document.getElementById(id).src = 'off.gif';
  	}
  }
  //-->
  </script>
  
  <img src="off.gif" border="0" onClick="wechsel('1')" />
  <img src="off.gif" border="0" onClick="wechsel('2')" />

GN911
 
Was willst du damit erreichen?

Schonmal komisch ist folgendes:
if (document.getElementById) { (...) }
else { document.getElementById }
​
mit anderen Worten: Wenn docment getElementById nicht unterstützt verwenden document.getElementById.

Seltsam ist auch, dass deine Bilder keine id haben.

Ganz nebenbei gibt es auch den event onClick in Netcape nicht in img-Tags. Tu den onClick-Event also in ein <div>-Tag und dann...

...versuchs mal mit:
function wechsel(id) {
var img = document.getElementById(id);
if(img.src.match('off.gif')) img.src = 'on.gif';
else img.src = 'off.gif';
}
​
Und vergiss nicht deinen Bildern die id="1" und id="2" zu geben.
 
Zuletzt bearbeitet:
Hallo,

ich will, das wenn ich auf das Bild 'off.gif' klicke 'on.gif' an dessen Stelle erscheint und wieder zurück.
Das ganze soll aber nicht auf ein <img> Objekt begrenzt sein, sondern halt auf mehrere.

HTML: 
     <img src="off.gif" border="0" onClick="wechsel('1')" />
     <img src="off.gif" border="0" onClick="wechsel('2')" />

Leider geht das nicht was du gepostet hast.

HTML: 
  <script type="text/javascript" language="javascript">
  <!--
  function wechsel(id)
  {
  	var img = id + '_img';
  	if(document.getElementById)
  	{
  		document.getElementById(img).src = 'on.gif';
  	}
  	else
  	{
  		document.getElementById(img).src = 'off.gif';
  	}
  }
  //-->
  </script>
  
  <img src="off.gif" id="test1_img" onClick="wechsel('test1')" />
  <img src="off.gif" id="test2_img" onClick="wechsel('test2')" />

so blendet er das andere Bild schon mal ein, aber nicht wieder andersrum.

GN911
 
Zuletzt bearbeitet:
Das Bsp. von con-f-use hat lediglich nen kleinen Fehler im regulären Ausdruck.. vom Prinzip her ist es aber eine sinnvolle Herangehensweise.

Falls du viele Bilder hast, mit denen du das machen willst,...probiers mal so:
Code: 
<script type="text/javascript" language="javascript">
<!--
  for(i=0; i<document.images.length; ++i)
  {
    if(document.images[i].name=="blubb")
        {
            document.images[i].onmousedown=new Function('F1','toggle(this)');
        }
  }
  function toggle(objImg)
  {
    objImg.src=(objImg.src.match(/off\.gif$/))? 'on.gif' : 'off.gif'
  }
  
//-->
</script>
Das Skript muss ausnahmsweise mal ans Ende der Seite... vor den schliessenden <body>-Tag.
Was du sonst noch machen musst... gebe allen Bildern, mit denen du das vorhast, das name-Attribut "blubb".. das ist schon alles(ein Funktionsaufruf in den Bildern ist nicht notwendig)

(ich hab mal onmouseover statt onclick genommen... wegen des von con-f-use angesprochenen Problems mit Netscape4).

Wie der reguläre Ausdruck korrekt aussehen muss, kannst du dem Skript auch entnehmen..../off\.gif$/
 
Hallo,


okay, sorry, das .... nur noch ein Problem.
Wie kann ich unterschiedliche Werte dem 'name-Attribut' zuordnen?
Zum weiterverarbeiten.

GN911
 
Wenn du unterschiedliche Namen für die Bilder brauchst, kannst du mit regulären Ausdrücken arbeiten.


Bsp.
Code: 
<img name="blubb1">
<img name="blubb2">
<img name="blubb3">
im Skript müsstest du dann diese Zeile:
Code: 
if(document.images[i].name=="blubb")
...durch jene
Code: 
if(String(document.images[i].name).match(/^blubb/))
ersetzen.
Das würde dann auf alle Bilder zutreffen, deren Name mit "blubb" beginnt... was danach kommt, ist dir überlassen.
 
Sven Mintel hat gesagt.:
objImg.src=(objImg.src.match(/off\.gif$/))? 'on.gif' : 'off.gif'

Wie der reguläre Ausdruck korrekt aussehen muss, kannst du dem Skript auch entnehmen..../off\.gif$/
Zum Vergrößern anklicken....

Moin Moin,

versuche gerade das Script hier nachzubasteln. Komme aber bei diesem Teil des Scriptes irgendwie nicht weiter. Ich bekomme immer die Fehlermeldung, das src Null oder kein Objekt sei.

Was mache ich bloß falsch?
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück