# MouseOver



## MartinOB (25. Feb 2004)

Hallo zusammen.
Ich habe ein Idee, kann jedoch kein Java...
Vielleicht könnt ihr mir da ja helfen.

Ich möchte gerne das "Button1" auf der Seite zu sehen ist und wenn man mit der Maus auf "Button1" geht, das dann "Button2" erscheint. Geht man wieder runter, erscheint wieder "Button1". Klicke ich auf das "Button2", welches ja erscheint, wenn ich mit der Maus drauf gehe, soll sich eine neue Seite öffnen und das "Button2" soll auf "Button3" wechseln! Ich möchte damit gerne in Frames arbeiten!

Könnt ihr mit helfen?

Viele Grüße und besten Dank,

der Martin.


----------



## Illuvatar (25. Feb 2004)

Ich denke, das geht mt JavaScript einfacher :!: 

Dazu muss die HTML-Seite folgenedermaßen verändert werden:

Zwischen <head> und </head>:


```
<script type="text/javascript">
<!--
function openWindow()
{
 document.Form.Button.value = 'Button 3';
 self.location.href='http://www.deineNeueSeiteDieGeöffnetWerdenSoll.de/';
}
-->
</script>
```


und da, wo der Button hinsoll:


```
<form name="Form">


<input type="button" value="Button 1" name="Button" onClick="openWindow()" onMouseover="document.Form.Button.value = 'Button 2'" onMouseout="document.Form.Button.value = 'Button 1'"></p>
</form>
```


Wenn die neue Seite geladen wird, sieht man so allerdings nicht mehr das mit Button 3.

Geht natürlich auch mit Java, ist aber in dem Fall, denke ich, komplizierter.


PfM


----------



## MartinOB (25. Feb 2004)

Hallo.
Wenn ich jetzt über 10 Links habe, muss dann in den <head></head> 10 mal diesen Befehl schreiben? ... Oder habe ich das jetzt falsch verstanden?


----------



## Illuvatar (25. Feb 2004)

Nein, dann muss das ein wenig anders gemacht werden.

Schreib dann 


```
function openWindow (seite)
```

und


```
self.location.href=seite;
```


und bei den Buttons


```
... onClick="openWindow('http://www.deineSeite.de')" ...
```


@mods: Das gehört langsam ins *JavaScript-Forum*, oder?

PfM


----------



## Martin (27. Feb 2004)

*Vielen Dank für eure Hilfe, ich habe zwar kein Wort verstanden, aber ich mache das jetzt mit einem ganz normales MouseOver-Befehl! Vielen dank für eure Mühe!!!*


----------



## Illuvatar (27. Feb 2004)

Das *war* ein ganz normaler Mouseover-Befehl.
Falls es mit diesem einfacher geht, würde ich auch gerne wissen, wie.

Mir ist aber greade noch ein Fehler aufgefallen.  

Hier nochmal das richtige, ich versuchs möglichst einfach zu erklären:

Wenn Sie sich den Quelltext der Seite ansehen, müsste ziemlich weit oben stehen:

<head>

und kurz darauf wieder </head>.

Vor dem </head> müssen Sie folgenedes einfügen:


```
<script type="text/javascript"> 
<!-- 
function openWindow (seite, buttonnumber)
{ 
 document.forms[buttonnumber].elements[0].value = 'Button 3'; 
 self.location.href=seite;
} 
--> 
</script>
```

Dann müssen Sie zwischen <body> und </body> die Stelle suchen, an die die Buttons sollen.
Wenn auf der Seite mehr steht, als ein bisschen Text, sollten Sie trotzdem ein paar HTML-Grundkenntnisse dafür haben.

Dort fügen sie den Button mit dem onMouseover-Befehl ein:


```
<form name="Form"> 


<input type="button" value="Button 1" name="Button" onClick="openWindow('hierDieAdresseDeinerSeite', WievielterButtonAufDerSeite?)" onMouseover="document.forms[WievielterButtonAufDerSeite?].elements[0].value = 'Button 2'" onMouseout="document.document.forms[WievielterButtonAufDerSeite?].elements[0].value = 'Button 1'"></p> 
</form>
```

Für hierDieAdresseDeinerSeite setzen Sie z.B. http://www.java-forum.org oder eine sonstige Seite ein. Achtung: die ' müssen stehen bleiben.

Für WievielterButtonAufDerSeite? setzen Sie ein, der wievielte Button (von oben gezählt) der jeweilige Button ist. Achtung: die [] müssen stehen bleiben.

Zur verdeutlichung ein Beispiel:


```
<html>

<head>
<title>Test</title>
<script type="text/javascript"> 
<!-- 
function openWindow (seite, buttonnumber)
{ 
 document.forms[buttonnumber].elements[0].value = 'Button 3'; 
 self.location.href=seite;
} 
--> 
</script>
</head>

<body>



blablabla</p>
<form name="Form"> 


<input type="button" value="Button 1" name="Button" onClick="openWindow('http://www.java-forum.org', 0)" onMouseover="document.forms[0].elements[0].value = 'Button 2'" onMouseout="document.forms[0].elements[0].value = 'Button 1'"></p> 
</form>


blablabla</p>
<form name="Form"> 


<input type="button" value="Button 1" name="Button" onClick="openWindow('http://www.google.de', 1)" onMouseover="document.forms[1].elements[0].value = 'Button 2'" onMouseout="document.forms[1].elements[0].value = 'Button 1'"></p> 
</form>


blablabla</p>
<form name="Form"> 


<input type="button" value="Button 1" name="Button" onClick="openWindow('http://www.gothic2.de', 2)" onMouseover="document.forms[2].elements[0].value = 'Button 2'" onMouseout="document.forms[2].elements[0].value = 'Button 1'"></p> 
</form>


blablabla</p>
<form name="Form"> 


<input type="button" value="Button 1" name="Button" onClick="openWindow('http://www.selfhtml.teamone.de', 3)" onMouseover="document.forms[3].elements[0].value = 'Button 2'" onMouseout="document.forms[3].elements[0].value = 'Button 1'"></p> 
</form>


blablabla</p>
<form name="Form"> 


<input type="button" value="Button 1" name="Button" onClick="openWindow('http://www.web.de', 4)" onMouseover="document.forms[4].elements[0].value = 'Button 2'" onMouseout="document.forms[4].elements[0].value = 'Button 1'"></p> 
</form>


blablabla</p>

</body>

</html>
```

Kopieren Sie dies und speichern Sie es als z.B. Test.html ab.
Dann sehen Sie, wie das aussehen könnte.

Ich hoffe, ich habe Sie jetzt nicht noch mehr verwirrt.


PfM


----------



## Martin (27. Feb 2004)

Hallo zusammen.

Vielen Dank für die Hilfe, das ist genau das, was ich brauche! Habe es schon ausprobiert, das funktioniert wunderbar!!!  Prima, danke! *freu*

Bis dahin,
der Martin


----------

