OnClick Bild Speichern und nicht durch Onmousedown ersetzen.

[ronaldo84]

Hallo

Ich habe folgendes Problem und zwar habe ich eine Navigationsleiste die aus verschiedenen Bildern besteht. Wenn ich nun einer Über eines der Bilder geht soll es durch eine anderes Bild getauscht werden. Das funktioniert schon. Habe es so gemacht

 var uns1 = new Image();
uns2.src = "image/ueberusn_on.gif";
var uns2 = new Image();
uns2.src = "images/ueberuns_off.gif";
function tausch(nr,obj)
{
	document.images[nr].src = obj.src;
}

Der HTML Code der die Funtkion aufruft ist

 ...onmouseup="tausch(16,uns2)" onmousedown="tausch(16,uns1)"

Das klappt auch. Nun möchte ich aber wenn der Benutzer ein Bild anklickt es hervorgehoben wird sei es nun durch ein drittes Bild oder ähnliche. Aber leider wird dann jedesmal wenn man die Maus bewegt das onmousedown wieder aktiv und das Bild ist wirder unmarkiert.
Weiß jmd. Rat?
P.S. Kenn mich in Javascript nur sehr wenig aus
Danke

 

[SilentWarrior]

Du solltest onclick verwenden.

Ich würde dir aber ohnehin empfehlen, das mit CSS zu realisieren, braucht weniger Speicherplatz und auch Leute mit deaktiviertem JS können's geniessen.

 

[ronaldo84]

Mti OnClick ist klar. Aber wenn ich dann von dem Bild wieder runtergehe (Mit der Maus) wird wieder das OnMouseDown aktiv und das Bild wird wieder ersetzt.

Habe leider noch keine Zeit gefunden mich in CSS reinzulesen. Wie würde man es da machen. Ausserdem dachte ich das CSS nur für Formatierungssachen verwendet wird

 

[Ann Drew]

dann musst du eben einen zaehler einbauen der am anfang auf null steht und beim ersten onmousedown auf eins geht.
Dann checkst du einfach bei onmausdown zuerst wo der zaehler steht.

 

[ronaldo84]

Klingt schonmal nach einer guten Lösung. Kann ich das nicht auch einfach mit einer Bool machen?

Das wenn Onclick true ist soll das onmousedown nicht ausgeführt werden.

 

[Ann Drew]

sicher kannst du das mit einer bool machen. Du kannst es mit allem machen was vor dem klick anders aussieht als nach dem klick.
Du kannst es auch am anfang auf A setzen und nach dem click auf B.
Das liegt ganz bei dir.

 

[ronaldo84]

Okay ich verwende eine zahl.
So sieht meine Quelltext aus
Zuerst deklariere ich die Variablen:

var uns1 = new Image();
uns1.src = "images/ueberuns_on.gif";
var uns2 = new Image();
uns2.src = "images/ueberuns_off.gif";
var uns3 = new image();
uns3.src = "images/ueberunsclick.gif";
var zahl = "0";

Zur erklärung. Das erste sind die Bilder die ausgetauscht werden sollen. An der Zahl soll erkannt werden ob schon auf ein Bild geklickt wurde.
Meine Funtkionen

function klick(nr,obj, zahl)
{
	Zahl="1":
	document.images[nr].src = obj.src; 
	return zahl;
}

Diese wird bei Onclick aufgerufen und gibt die 1 zurück.
Jetzt die Zweite

 function tausch(nr,obj)
{ 
	if (zahl == "0") 
	document.images[nr].src = obj.src; 
}

Diese funtkoin soll die Bilder Austauschen wenn noch keine ausgewählt wurde.

Die funktionen rufe ich so auf

 onmouseover="tausch(1,uns1)" onmouseout="tausch(1,uns2)" 
onclick="klick(1,uns3, zahl)"

Nachdem geklickt wurde müßte die Zahl doch dann eigentlich den Wert eins haben und die Bilder dürften durch onmousedown oder onmouseuo nicht mehr verändert werden. Sie werden aber trotzdem getauscht. Darf ich bei der Deklaration von zahl, der zahl keine 0 zuweisen? Dann wird überhaupt nicht getauscht. Kann mir jmd helfen?

 

[Ann Drew]

du solltest unbedingt "Zahl="1":" durch "zahl="1";" austauschen.
siehst du den unterschied?
Zahl klein oder gross geschrieben.....doppelpunkt oder semicolon....

 

[Ann Drew]

probier das mal aus:

  <script language=javascript>
  
  uns1 = "photo2.jpg";
  uns2 = "photo3.jpg";
  uns3 = "photo4.jpg";
  var zahl = "0";
  
  function klick(obj)
  {
  	zahl="1";
  	document.getElementById('a1').src = obj; 
  } 
  
   function tausch(obj)
  { 
  	if (zahl == "0") 
  	document.getElementById('a1').src = obj; 
  } 
  </script>
  <p><img  onmouseover="tausch(uns1)" onmouseout="tausch(uns2)" 
  onclick="klick(uns3)" id="a1" border="0" src="photo1.jpg" width="400" height="245"></p>
  
  <p>&nbsp;</p>

Da wird ein bild angezeigt, beim onmouseover wird es durch bild2 ersetzt, onmouseout wird es durch bild3 ersetzt und nach klick kommt bild4 was sich nicht mehr aendert.

 

[ronaldo84]

Danke ersteinmal. Bei einem Bild klappt das auch sehr gut. Aber wied sieht es nun aus wenn ich mehrer Menüpunkten mit Bildern habe? Wenn dann auf ein anderes Bild geklick wird soll das Bild auf das vorher geklickt wurde wieder unmarkiert werden.

Danke