# abfragen ob onclick Event ausgeloest wurde.



## adb (3. August 2006)

Hallo,

die Situation ist folgende, ich habe eine kleine Gallerie angelegt. Die navigation erfolgt durch kleine quadratische Elemente an der Seite des Bildes. Um die ganze Sache visuell ansprechender zu machen habe ich mit onmouseover (rotes Kaestschen) und mit onmouseout (wieder graues Kaestschen) gearbeitet. Entscheidet sich der Nutzer fuer ein Quadrat (sprich, er moechte das Bild sehen, fuer welches das Viereck steht), soll das geklickte Quadrat mit einer dritten Grafik, dauerhaft belegt werden. Aber dieser Befehl (ich dachte mir onMouseUp macht dis schon, weil ja dann auf den Link/das Quadrat geklickt wurden sein muss.) Funktioniert alles Prima, doch leider gibt es ja noch das onmouseout event welches, die dritte Grafik mit der nomalen Grafik ueberschreibt, sobald der Cursor die Grafik verlaesst.

Es ist also von Noeten, dass ich ueberpruefe ob das onClick Event ausgeloest wurde und, je nach dem Ergebnis, das onmouseout Event angepasst wird.

bisher sieht es, in vereinfachter Form, so aus:

```
<a href=# onclick="imgBox.src='Bild01'"><img src="kastenGrau.jpg" name="imgKasten" onmouseover="imgKasten.src='kastenRot.jpg'" onmouseout="imgKasten.src='kastenGrau.jpg'">
```

ich koennte jetzt veruschen, da das onclick Event noch "; imgKasten.src='imgKastenRotVoll.jpg'" dranzuhaengen, doch dies wird, sobald die Maus den Kasten verlaesst ja wieder durch das onmouseout Event abgeloest.

Was brauche ich also, bzw. um was bitte ich Euch?
Eine Funktion die ueberprueft ob, das onclick ausgeloest wurde und gegebenenfalls das onmouseout Evenet beeinflusst, bzw. abaendert.


----------



## tobee (3. August 2006)

Dü könntest da eine if Abfrage machen

```
if(imgBox.src)!='Bild01')
{
  // Mache den onmouseout
}
```


----------



## adb (3. August 2006)

Mir ging es weniger um das Bild, welches durch das Klicken in der BilderBox einfuegt, sondern um die Menugrafik (das Kaestschen).

Es waere sehr nett von Dir, wen Du mir zeigen koenntest wie ich, die von Dir vorgeschlagene Funktion umsetzten koennte, aber da ich hoechstwahrscheinlich nicht um eine Abfrage (ob nun onclick oder nicht) herumkomme, muesste diese Funktion wohl abgeaendert werden muessen.

Um es nochmal zu verdeutlichen: wenn geklickt wurde, dann wird das kaestchen mit menuGrafik03 hinterlegt. Diese Grafik bleibt auch bei onmouseout. Wenn nicht geklickt wurde, soll onmouseout die bisherige Grafik beibehalten (menuGrafik01). onMouseover bleibt bei menuGrafik02.


----------



## Security (3. August 2006)

```
if(document.captureEvents)
    document.captureEvents(Event.MOUSECLICK);
document.onmouseclick = function;
```


Abgesehen davon, Junge machs nicht zu Kompliziert.
Wie wäre es mit einem CSS StyleSheet, wenn das sowieso Links sind gibt es sowas wie a:hover, da kannst du dann den Border auch umfärben.

Nicht immer soviel JS, wenns auch mit CSS geht.


----------



## tobee (3. August 2006)

Ja, du fragst beim onmouseout einfach ab ob die Grafik menuGrafik03 ist
Wenn ja wechselt er nicht zu menuGrafik01.
Wenn nein wechselt er zu menuGrafik01.

Oder habe ich dich da falsch verstanden?


----------



## adb (3. August 2006)

tobee hat gesagt.:
			
		

> Ja, du fragst beim onmouseout einfach ab ob die Grafik menuGrafik03 ist
> Wenn ja wechselt er nicht zu menuGrafik01.
> Wenn nein wechselt er zu menuGrafik01.
> 
> Oder habe ich dich da falsch verstanden?


Durchaus richtig hast Du mich verstanden, nur leider verfuege ich noch nicht ueber das notwendige KnowHow in der der Javascript Programmierung um dies Umzusetzen. D.h. ich waere Dir sehr verbunden, wenn Du Deinen Vorschlag auch gleich in eine Funktion packen koenntest.


----------



## Security (3. August 2006)

```
function check(img){
    if(img.scr=="menuGrafik03.gif")
        img.scr = "menuGrafik01.gif"
    else
        img.scr = "menuGrafik03.gif"
}
```
Übergeben must die an die funktion check(this).
Quasie Check This!


----------



## tobee (3. August 2006)

Oder so

```
function check(img){
    if(img.scr!="menuGrafik03.gif")  img.scr = "menuGrafik01.gif";
}
```


----------



## adb (3. August 2006)

Also, auf ein neues 

Wenn ich klicke, moechte ich das das onmouseout Event die Grafik Nummer 3 (die Dieses-Bild-Ist-Zurzeit-ausgewaehlt-Grafik) zum Vorschein bringt. Wenn ich nicht klicke, soll onmouseout die Grafik Nummer 1 (die Ausgangsgrafik) anzeigen. Onclick soll also quasi onmouseover ueberschreiben.


----------



## tobee (3. August 2006)

Das würde dann so aussehen:

```
<script type="text/javascript">
function check(img){
    if(img.scr!="menuGrafik03.gif")  img.scr = "menuGrafik01.gif";
}
</script>

<a href=# onclick="imgBox.src='Bild01'"><img src="kastenGrau.jpg" name="imgKasten" onmouseover="imgKasten.src='kastenRot.jpg'" onmouseout="check(this);'">
```


----------



## Security (3. August 2006)

adb hat gesagt.:
			
		

> Also, auf ein neues
> 
> Wenn ich klicke, moechte ich das das onmouseout Event die Grafik Nummer 3 (die Dieses-Bild-Ist-Zurzeit-ausgewaehlt-Grafik) zum Vorschein bringt. Wenn ich nicht klicke, soll onmouseout die Grafik Nummer 1 (die Ausgangsgrafik) anzeigen. Onclick soll also quasi onmouseover ueberschreiben.


Meinst du, dass wenn du geklickt hast und dann die Mouse wieder bewergtst, wieder das andere MouseOverBild erscheint? Und das soll nicht, richtig?


----------



## adb (3. August 2006)

Security hat gesagt.:
			
		

> Meinst du, dass wenn du geklickt hast und dann die Mouse wieder bewergtst, wieder das andere MouseOverBild erscheint? Und das soll nicht, richtig?


Wenn ich klicke, solle, wenn ich die Maus von diesem menupunk wieder nehme, eine dritte grafik dargestellt werden, die signalisieren soll, dass man sich gerade an diesm Punk befindet. Wenn ich nicht klicke, soll, wenn ich mit der Maus vom Menupunkt herrunterfahre, die erste Grafik dargestellt werden, die sagt, dass ich nicht hier bin.

Ich weiss, dass ich mich sehr unverstaendlich ausdruecke, erst einmal Dank an Euch dafuer, dass Ihr es dennoch versucht


----------



## Security (3. August 2006)

Ja dann must du speichern, das du auf das Bild geklickt hast.


----------



## adb (3. August 2006)

Koenntest Du mir auch noch verraten wie genau ich das anstelle?

natuerlich habe ich mich selbst auch versucht, dem Tipp, doch eine Variable zu speichern, folgend. Hierzu der Code:


```
<script type=\"text/javascript\">\n";
		function setClicked(menuPunkt)
		{
			var clicked + "menuPunkt" = true;
		}
		
		function checkClicked(menuPunkt)
		{
			if(clicked + "menuPunkt" == true)
			{
				return 'images/bild_a.jpg';
			}
			else
			{
				return 'images/bild.jpg';
			}
			clicked + "menuPunkt" = false;
		}
</script>
```

und wird so aufgerufen:
Anmerkung:
Code ist in PHP geschrieben. $links ist ein String, in dem die Links fuer die spaetere Ausgabe gespeichert. $key ist der schluessel in einem Array in der die pfade gespeichert sind. $i ist eine Zaehlvariable, beginnend mit 0.

```
$links .= "<a onclick=\"imgBox.src='" . $key . "'; setClicked(" . $i . ");\" style=\"cursor:pointer;\"><img src=\"images/bild.jpg\" name=\"imgMenuPunkt" . $i . "\" onmouseover=\"imgMenuPunkt" . $i . ".src='images/bild_h.jpg'\" onmouseout=\"imgMenuPunkt" . $i . ".src=checkClicked(" . $i . ")\"></a><br/><br/>";
```

wieder Erwarten funktioniert es nicht. Ich hoffe, dass Ihr mit weiterhin mit Rat und tat zur Seite steht.


----------



## adb (7. August 2006)

hallo,

nach etwas laengerer ueberdenkzeit hab ich mich fuer einen alternativen Denkansatz entschieden. Beim Klick auf einen Menupunkt, sollen zunaechst alle MenuPunkte mit Passiv (ungeklickt) Grafiken belegt werden. Danach wird das geklickte Menu mit der Grafik fuer geklickte MenuPunkte belegt.

```
echo "		  <script type=\"text/javascript\">
	
	function clearMenuImg()
	{
			var obj1 = document.getElementByName(imgMenuSubPunkt1);
			var obj2 = document.getElementByName(imgMenuSubPunkt2);
			var obj3 = document.getElementByName(imgMenuSubPunkt3);
			var obj4 = document.getElementByName(imgMenuSubPunkt4);
			var obj5 = document.getElementByName(imgMenuSubPunkt5);
			var obj6 = document.getElementByName(imgMenuSubPunkt6);
			var obj7 = document.getElementByName(imgMenuSubPunkt7);
			var obj8 = document.getElementByName(imgMenuSubPunkt8);
			var obj9 = document.getElementByName(imgMenuSubPunkt9);
			var obj10 = document.getElementByName(imgMenuSubPunkt10);

			obj1.src = 'images/bild_chosen_not.jpg';
			obj2.src = 'images/bild_chosen_not.jpg';
			obj3.src = 'images/bild_chosen_not.jpg';
			obj4.src = 'images/bild_chosen_not.jpg';
			obj5.src = 'images/bild_chosen_not.jpg';
			obj6.src = 'images/bild_chosen_not.jpg';
			obj7.src = 'images/bild_chosen_not.jpg';
			obj8.src = 'images/bild_chosen_not.jpg';
			obj9.src = 'images/bild_chosen_not.jpg';
			obj10.src = 'images/bild_chosen_not.jpg';
	}
				  </script>";
```

und soll in etwa so aufgerufen werden: <img name="imgMenuSubPunkt1" ... onclick="clearMenuImg()"; imgMenuSubPunkt1.src='images/bild_chosen.jpg'>

Leider klappt es, wider Erwarten nicht. Ich wuerde mich sehr freuen, wenn mit jemand sagen woran es liegen koennte.

Mit freundlichem Gruss adb


----------

