CSS BAckgr. änderung bei "Mouseover"

Status
Nicht offen für weitere Antworten.
Shark

Shark

Grünschnabel
Hi,

ich hab mal ne frage:
ich habe schon auf mehreren homepages folgeden "Effekt" bei
textboxen gesehen:
Normal: mit hintergrundbild
beim reinklicken: Normale Hintergrundfarbe
und wenn man wieder rausklickt wieder das Hintergrundbild...

wie geht das ???
hoffe bin hier richtig.
 
Hi und welcome on Board,

ich persönlich habe diesen Effekt eigentlich noch nie gesehen, aber finde ihn gar nicht mal so schlecht :) Ich hab schnell was gebastelt - vielleicht geht es sogar noch etwas einfacher...

PHP: 
<html>
<head>
<script language="JavaScript" type="text/javascript">
<!--
function changeBG(mode){
    if (mode == 'enter'){
        document.testformular.txt1.style.backgroundImage = "";
        document.testformular.txt1.style.backgroundColor = "#efefef";
    }
    else if (mode == 'leave'){
        document.testformular.txt1.style.backgroundColor = "";
        document.testformular.txt1.style.backgroundImage = "url('http://www.tutorials.de/images/tutorials_v3_logo.gif')";
    }
    else{
	alert("falscher parameter");
    } 
}
//-->
</script>
</head>
<body>
<form name="testformular">
<textarea onClick="changeBG('enter')" onBlur="changeBG('leave')" name="txt1" rows="8" cols="38" 
 style="background-image:url('http://www.tutorials.de/images/tutorials_v3_logo.gif')">
</textarea>
</form>
</body>
</html>
noch 2 Anmerkungen:

1) Sorry wegen der Überbreiten Zeile
2) Ich hab extra das Logo genommen, damit das Beispiel sofort funktioniert...


ciao
 
Original geschrieben von leuchte
Das ist ja aber mit dem Background Attribut von CSS überhaupt kein Problem.
Zum Vergrößern anklicken....

Naja, imo ist das eine der Stellen an denen das DOM sehr unlogisch ist. Normalerweise werden Images mit document.imgname.src = "xxx.jpg" gesetzt. Dann wäre es imo nur logisch auch beim Hintergrund mit backgroundImage.src zu arbeiten - funktioniert aber nicht. Eine andere Lösung wäre beim Background die ganze src Geschichte weg zu lassen, also backgroundImage="www.xxx.de/xxx.jpg" - was auch nicht 100%ig funktioniert. Die Lösung backgroundImage="url('http:...)" finde ich am unpassendsten...

bye
 
Danke für die schnelle antwort.

so wie das aussieht muss ich dann aber für jedes INPUT Feld ein eigenes Javascript machen (also immer alle 4 Zeilen), geht das auch anders ? (die INPUT Felder haben ja alle andere NAmen)...

danke schonmal
 
Hi Shark,

Man kann ja die Elemente auch per Namen ansprechen :) - du übergibst also der Funktion einfach den Namen, des zu ändernden Elements...

PHP: 
<html>
<head>
<script language="JavaScript" type="text/javascript">
<!--
function changeBG(mode, feld){
    if (mode == 'enter'){
        document.testformular.elements[feld].style.backgroundImage = "";
        document.testformular.elements[feld].style.backgroundColor = "#efefef";
    }
    else if (mode == 'leave'){
        document.testformular.elements[feld].style.backgroundColor = "";
        document.testformular.elements[feld].style.backgroundImage = "url('http://www.tutorials.de/images/tutorials_v3_logo.gif')";
    }
    else{
    alert("falscher parameter");
    } 
}
//-->
</script>
</head>
<body>
<form name="testformular">
<textarea name="text0" onClick="changeBG('enter',this.name)" onBlur="changeBG('leave',this.name)"  rows="8" cols="38" 
 style="background-image:url('http://www.tutorials.de/images/tutorials_v3_logo.gif')">
</textarea><br>
<input type="text" name="text1"  onClick="changeBG('enter',this.name)" onBlur="changeBG('leave',this.name)"
style="background-image:url('http://www.tutorials.de/images/tutorials_v3_logo.gif')"><br>
<input type="text" name="text2"  onClick="changeBG('enter',this.name)" onBlur="changeBG('leave',this.name)"
style="background-image:url('http://www.tutorials.de/images/tutorials_v3_logo.gif')"><br>
</form>
</body>
</html>


bye
 
Zuletzt bearbeitet:
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück