# Farbänderung bei Buttons



## HeinerPyt (9. April 2004)

Hi,

ich will auf einer Webpage Buttons einbauen, die ihre Farbe und/oder Aussehen ändern, wenn man mit dem Mauszeiger darüber fährt.

Jemand eine Idee wie das geht?


mfg
Heiner


----------



## xxenon (9. April 2004)

hi Heiner!

dafür brauchst du CSS und JavaScript. ich würd also mal davon ausgehen dass das nicht in allen browsern einwandfrei funktioniert.

aber egal,
was du willst sieht in etwa so aus:


```
<html>
<body>
<input type="button" value="test" style="background-color:#FFFFFF" onmouseover="this.style.backgroundColor = 'C0C0C0'" onmouseout="this.style.backgroundColor = 'FFFFFF'" />
</body>
</html>
```


regards...


----------



## chpa (9. April 2004)

*Hallihallo*

Also ich hab das bei meiner HP so gemacht:

In den Script Bereich schreibst du:
...............................
<SCRIPT language="JavaScript">
<!--
var OhneMaus0 = new Image();
OhneMaus0.src = "Button1.gif";
var MitMaus0 = new Image();
MitMaus0.src = "Button2.gif";

function buttonwechsel(index, objektname)
{
 window.document.images[index].src = objektname.src;
}
</SCRIPT>

Den Button einzufügen sieht dann so aus:

<A href=index.htm onMouseOut="buttonwechsel(0,OhneMaus0)" onMouseOver="buttonwechsel(0,MitMaus0)"><IMG src=Button1.gif border=0></A>
...............................................
! Die erste Null steht für die Objektnr. und die zweite für die Variable oben.!

Du musst also zwei Buttons machen. Einer wie er normal aussehen soll und einer wie er aussehen soll wenn du mit der Maus drüber gehst.


----------



## HeinerPyt (11. April 2004)

Hi chpa,

ich habe deine Variante ausprobiert. Es funktioniert, allerdings wechselt der Button nicht mehr zum Ursprung zurück wenn ich ihn mit dem Mauszeiger verlasse. 

Noch eine Idee


mfg
Heiner


----------



## chpa (11. April 2004)

*Hallo nochmal*

Also ich kann mir nur vorstellen, dass du die zweiten Zahlen nicht verändert hast.
Ich hab das unten mal fett gemacht.
.................................

<A href=index.htm onMouseOut="buttonwechsel(0,OhneMaus0)" onMouseOver="buttonwechsel(*0*,MitMaus*0*)"><IMG src=Button1.gif border=0></A>
........................................
Du musst da genau das eingeben was du bei den ersten zahlen auch eingegeben hast.

Ich hoffe mal, dass ich dir weiterhelfen konnte.

Mfg
chpa


----------



## Thomas Lindner (11. April 2004)

Da stellt sich mir doch glatt spontan die FRage ob die "Webmaster-FAQ" so schwer zu finden ist(?):

http://www.tutorials.de/tutorials129998.html


----------

