Hintergrundfarbe eines DIVs bei onclick ändern

[dp82]

Hallo,

das hört sich zunächst recht einfach an, ist dann aber etwas schwieriger:

Also, ich habe ein Menü, bestehend aus transp. Bildern. Die sind einerseits mit onmouseovern belegt, zusätzlich möchte ich aber, dass der jeweils aktive Menüpunkt schwarz hinterlegt ist (also onClick). Wenn ich dann einen anderen Menüpunkt anklicke, soll sich der wiederum schwarz einfärben, der vorher aktive jedoch wieder einen transparenten Hintergrund haben.

Das Problem ist: das soll alles in einem einzigen HTML-File passieren, also quasi dynamisch per JS übergeben werden...

Hier der Basisquellcode des Menüs:

<a onmouseout="MM_swapImgRestore(),change_pf2('transparent');" onmouseover="MM_swapImage('pf2','','menue/neg/menue_07.png',1),change_pf2('black');" class="pf_menue">
<img src="menue/menue_07.png" name="pf2" width="210" border="0" id="pf2"></a><br />

<a onmouseout="MM_swapImgRestore(),change_pf3('transparent');" onmouseover="MM_swapImage('pf3','','menue/neg/menue_08.png',1),change_pf3('black');">
<img src="menue/menue_08.png" name="pf3" width="210" border="0" id="pf3" /></a><br />

<a onmouseout="MM_swapImgRestore(),change_pf4('transparent');" onmouseover="MM_swapImage('pf4','','menue/neg/menue_09.png',1),change_pf4('black');">
<img src="menue/menue_09.png" name="pf4" width="210" border="0" id="pf4" /></a><br />

Und hier eines der bisher existierenden JS für das MouseOver jedes einzelnen Menüpunkts:

function change_pf2(hgrund){
for (var i = 0; document.getElementsByName('pf2').length; i++)
{document.getElementsByName('pf2')[i].style.backgroundColor = hgrund;
}
}

Wie verbinde ich also das bisherige JS mit einem neuen Script was den jeweils zuletzt geklickten Menüpunkt schwarz hinterlegt?

danke für jede Hilfe! lg -daniel-

[[-UFO-]Melkor]

Meinst du sowas?

var pf = '';
function change_pf(newpf){
   if(
      pf.length > 0
   ){
      for (var i = 0; document.getElementsByName(pf).length; i++){
         document.getElementsByName(pf)[i].style.backgroundColor = 'transparent';
      }
   }
   for(var i = 0; document.getElementsByName(newpf).length; i++){
      document.getElementsByName(newpf)[i].style.backgroundColor = 'black';
   }
   pf = newpf;
}

Also diese Funktion setzt jedenfalls bei den Elementen mit dem übergebenen Namen die Hintergrundfarbe auf 'black' und bei denen, die vorher mit der Funktion 'black' "gemacht" wurden, wieder auf transparent.

[dp82]

ja, ich glaube, sowas müsste funktionieren... aber kann es sein, dass du in der ersten Zeile einen Fehler hast? --> var pf = '';

zusätzlich zum Ändern der Hintergrundfarbe müsste aber auch ein neues Bild geladen werden (/neg/menue_xx.png). was dann wieder »zurückgetauscht« wird, wenn ein anderer Menüpunkt angeklickt wird. Kann ich diese beiden Aktionen in einem JS zusammenfassen?

Danke auf jeden Fall schon mal! -daniel-

[ein schlauer]

Das ist ziemlicher Unsinn. Du kannst die mouseevent auch auf das img-Element legen und du kannst beim Funktionsaufruf das Element übergeben.

PHP-Code:

<img src="menue/menue_09.png" onmouseover="change(this, 'black')"
onmouseout="change(this, '')" /> 


PHP-Code:

function change(el, clr) {
if(el && el.style) el.style.backgroundColor = clr;
} 


Den Rahmen kannst mit CSS für alle Bilder in einem Link entfernen:

PHP-Code:

a img { border: none; } 


Für dein Klick Problem musst du dir den aktuellen klick merken:

PHP-Code:

<img src="menue/menue_09.png" onmouseover="change(this, 'black')"
onmouseout="change(this, '') onclick="doClick(this)" /> 


PHP-Code:

var click = null;
function change(el, clr) {
if(click != el && el && el.style) el.style.backgroundColor = clr;
}
function doClick(el) {
click = el;
} 


(so in etwa, ungtestet)