✔ CSS für Input type Button mit Java Script austauschen.

A

andralin

Erfahrenes Mitglied
Hallo Leute,

ich bin grad an einer kleinen Seite, die meine Fotos im Netz presäentieren soll.

Die Seite baut sich über PHP auf und lädt die Inhalte aus Datenbanken.

Nun möchte ich die Buttons der Formulare mit einem MouseOver Effekt hervorheben.

Da ich für den INPUT TYPE BUTTON kein Hover im CSS einstellen kann oder zumindest nicht herausfinde wie es geht, möchte ich das Style des betreffenden Button mit Javacript austauschen.

Darstellung des Buttons
PHP: 
echo "<input type='submit' name='".$ButtonList[$i][1]."' onMouseOver='Testen(\"".$ButtonList[$i][1]."\");' id='TopMenuButton' class='TopMenuButton' value='".utf8_encode($ButtonList[$i][2])."'>";

JavaScript für Mouse-Over
PHP: 
<script language="javascript">
function Testen(name)
{
   alert(name);
}
</script>

Soweit funktioniert das mit dem Alert als Test, aber da enden meine JS Kenntnisse leider.

Wer kann mir sagen wie ich die Styles nun mit der Funktion ersetze.

cu s00n
Andralin
 
Wenn du mit einem Framework wie zum Beispiel Prototype arbeitest, könntest du mit den beiden Events onmouseover und onmouseout einfach eine neue Klasse setzen bzw. entfernen:

PHP: 
<input type="submit" name="button" value="absenden" onmouseover="this.addClassName('buttonHover');" onmouseout="this.removeClassName('buttonHover');" />

Im Stylesheet setzt du dann einfach eine neue Klasse die zum Beispiel so aussehen könnte:

PHP: 
input.buttonHover {
     background-color:red;
}
 
Hi,
andralin hat gesagt.:
Da ich für den INPUT TYPE BUTTON kein Hover im CSS einstellen kann oder zumindest nicht herausfinde wie es geht, möchte ich das Style des betreffenden Button mit Javacript austauschen.
Zum Vergrößern anklicken....
mit dem Attribut-Selektor in Verbindung mit der :hover-Pseudoklasse ist dies ohne JS möglich:

Code: 
input[type=button]:hover { /* CSS-Formatierung */ }
oder

Code: 
input[type=submit]:hover { /* CSS-Formatierung */ }

Lediglich für die Vorgängerversionen des IE7 wäre Javascript erforderlich, da sie den Attribut-Selektor überhaupt nicht, und die Pseudoklasse :hover nur für das a-Element unterstützen.
 
Maik hat gesagt.:
Hi,
mit dem Attribut-Selektor in Verbindung mit der :hover-Pseudoklasse ist dies ohne JS möglich:

Code: 
input[type=button]:hover { /* CSS-Formatierung */ }
oder

Code: 
input[type=submit]:hover { /* CSS-Formatierung */ }

Lediglich für die Vorgängerversionen des IE7 wäre Javascript erforderlich, da sie den Attribut-Selektor überhaupt nicht, und die Pseudoklasse :hover nur für das a-Element unterstützen.
Zum Vergrößern anklicken....

Erst mal Danke für die schnellen Antworten!

Hier einen Auszug aus dem CSS, ...
PHP: 
#TopMenuButton
{
	font-size: 10px;
	padding: 0px;
	margin: 0px;
	width: 95px;
}
 
Anstelle des Attribut-Selektors funktioniert (in den modernen Browsern) natürlich auch dieses Stylesheet:

Code: 
#TopMenuButton
{
    font-size: 10px;
    padding: 0px;
    margin: 0px;
    width: 95px;
}  
#TopMenuButton:hover
{
    /* gewünschte CSS-Formatierung */
}
 
wieder was gelernt....

PHP: 
.TopMenuButton
{
	font-size: 10px;
	padding: 0px;
	margin: 0px;
	width: 95px;
	cursor: hand;
}
.TopMenuButton:hover
{
	font-size: 10px;
	padding: 0px;
	margin: 0px;
	width: 95px;
	color: #0066FF;
	font-weight: bolder;
}

Ich danke Euch für Eure schnelle Hilfe...

cu s00n
Andralin
 
Code: 
.TopMenuButton
{
	font-size: 10px;
	padding: 0px;
	margin: 0px;
	width: 95px;
	cursor: hand;
}
.TopMenuButton:hover
{
	color: #0066FF;
	font-weight: bolder;
}
würde vollkommen ausreichen.

Und den gewünschten Mauszeiger für einen Link erzielst du browserübergreifend mit dem cursor-Wert pointer.
 
wieder was gelernt....

PHP: 
.TopMenuButton
{
	font-size: 10px;
	padding: 0px;
	margin: 0px;
	width: 95px;
	cursor: hand;
}
.TopMenuButton:hover
{
	font-size: 10px;
	padding: 0px;
	margin: 0px;
	width: 95px;
	color: #0066FF;
	font-weight: bolder;
}

Ich danke Euch für Eure schnelle Hilfe...

cu s00n
Andralin
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück