INPUT Hintergrundbild per JavaScript ändern

[Sebastian Becker]

Hallo,

ich möchte gerne das Hintergrundbild eines INPUT-Feldes onFocus per JavaScript ändern.

Folgendes funktioniert bei mir nicht:

---------- schnipp ----------

function formHilite(ID,event)
{
if(document.getElementById)
{
if (event=="focus")
{document.getElementById(ID).style.backgroundImage="img/shadow.gif";return true;}
else
{document.getElementById(ID).style.backgroundImage="img/transparent.gif";return true;}
}
}

<input id="address" onFocus="formHilite(this.id,'focus')" onBlur="formHilite(this.id,'blur')">

---------- schnipp ----------

Leider kann ich den Fehler nicht finden. Außerdem würde ich gerne bei onBlur einfach kein Hintergrundbild (und nicht ein transparentes)definieren, weiß aber leider nicht wie das geht. Vielleicht kann mir da jemand helfen?!

Vielen Dank, Ostergrüße aus Berlin,

Sebastian Becker

[Norbert Klein]

Hallo,

ich möchte gerne das Hintergrundbild eines INPUT-Feldes onFocus per JavaScript ändern.

Folgendes funktioniert bei mir nicht:

---------- schnipp ----------

function formHilite(ID,event)
{
if(document.getElementById)
{
if (event=="focus")
{document.getElementById(ID).style.backgroundImage="img/shadow.gif";return true;}
else
{document.getElementById(ID).style.backgroundImage="img/transparent.gif";return true;}
}
}

function formHilite(ID,event)
 {
  if(document.getElementById)
   {
    if(event=="focus"){document.getElementById(ID).style.backgroundImage = "url(img/shadow.gif)"}
    else{document.getElementById(ID).style.backgroundImage = "none"}
   }
 }

<input id="address" onFocus="formHilite(this.id,'focus')" onBlur="formHilite(this.id,'blur')">

---------- schnipp ----------

Gruß
Norbert

[Sebastian Becker]

Hallo, Norbert,

if(event=="focus"){document.getElementById(ID).style.backgroundImage = "url(img/shadow.gif)"}
else{document.getElementById(ID).style.backgroundImage = "none"}

Danke, so geht's!

Grüße,

Sebastian

[Robert Bamler]

Hallo,

ich möchte gerne das Hintergrundbild eines INPUT-Feldes onFocus per JavaScript ändern.

Folgendes funktioniert bei mir nicht:

---------- schnipp ----------

function formHilite(ID,event)
{
if(document.getElementById)
{
if (event=="focus")
{document.getElementById(ID).style.backgroundImage="img/shadow.gif";return true;}
else
{document.getElementById(ID).style.backgroundImage="img/transparent.gif";return true;}
}
}

<input id="address" onFocus="formHilite(this.id,'focus')" onBlur="formHilite(this.id,'blur')">

---------- schnipp ----------

So funktionierts bei mir:

function formHilite(ID,event)
{
if(document.getElementById)
{
if (event=="focus")
{
document.getElementById(ID).style.setAttribute("backgroundImage","url(img/shadow.gif)",true);
return true;}
else
{
document.getElementById(ID).style.setAttribute("backgroundImage","url(img/transparent.gif)",true);
return true;}
}
}

Bei mir (IE6) wird dann zwar das Bild geladen (sieht man in Statuszeile), aber nicht angezeigt. Ein einfaches:

<input style="background-image:url(bild.gif)" />

hat unter IE6 auch nicht funktioniert. Anscheinend mag der bei input-Feldern einfach kein Hintergrundbild, was ich ehrlichgesagt auch verstehen kann ;-)

Aber das Script funktioniert zumindest teorethisch, da das Bild ja zumindest geladen wird.

[...] Außerdem würde ich gerne bei onBlur einfach kein Hintergrundbild (und nicht ein transparentes)definieren, weiß aber leider nicht wie das geht. Vielleicht kann mir da jemand helfen?!

Das ginge dann wahrscheinlich analog dazu mit removeAttribute()
siehe: </selfhtml/javascript/objekte/style.htm#remove_attribute>

Vielen Dank, Ostergrüße aus Berlin,

Danke und Ostergrüße aus München,

Robert

http://www.designauswahl.here.de
mit kostenlosem Webseiten-Generator ROBE.dit
[more than a HTMLE.dit]

[Sebastian Becker]

Hallo, Robert,

Norbert hat die Lösung gepostet:

if(event=="focus"){document.getElementById(ID).style.backgroundImage = "url(img/shadow.gif)"}
else{document.getElementById(ID).style.backgroundImage = "none"}

Ich hatte einfach nur das "url(...)" vergessen. Man muß also gar nicht mit unbedingt mit setAttribute arbeiten.

Danke trotzdem für den Hinweis, Grüße,

Sebastian