Ändra bakgrund på endast en länk mha javascript

Några alternativ på hur man skulle kunna göra:

1. Varje <a> har ett id. Vid onclick jämförs det klickade elementets id mot alla andra; där det stämmer överens sätter du färg 1 och där det inte stämmer överens sätter du färg 2. Kod:

function changeColor(currentElm, colorIfMatch, colorIfNotMatch)
{
  var ids = ["a1", "a2", "an"];
  for (var i = 0; i < ids.length; ++i)
  {
    if (currentElm.id != ids[i])
      document.getElementById(ids[i]).style.backgroundColor = colorIfNotMatch;
  }
  currentElm.style.backgroundColor = colorIfMatch;
}

...ovanstående array är ju lätt att skapa om koden genereras med PHP (som jag gissar att du använder). Lite jobbigare dock om man manuellt måste uppdatera dylikt ;)

2. Om alla länkar i <ul> skall byta färg kanske följande kan fungera:

function changeColor(currentElm, colorIfMatch, colorIfNotMatch)
{
  var elm = currentElm, ul = null;
  while (elm.parentNode)
  {
    if (elm.parentNode.nodeName.toUpperCase() == "UL")
    {
      ul = elm.parentNode;
      break;
    }
    elm = elm.parentNode;
  }
  if (ul)
  {
    var a = ul.getElementsByTagName("A");
    if (a)
    {
      for (var i = 0; i < a.length; ++i)
      {
        if (currentElm.id != a[i].id)
          a[i].style.backgroundColor = colorIfNotMatch;
      }
      currentElm.style.backgroundColor = colorIfMatch;
    }
  }
}

Otestad kod. :)

Det här är ju helt fantastiskt! :bire ...nästan Använder funktionen som använder sig av id. Du gissade rätt!

Hovereffekten på länkarna försvinner, går det att lösa eller får jag leva utan?

Tusen tack!

Hm, vad triggar hovereffekten? Är det någon CSS-kod eller kanske JS-kod som körs onload?

Det är CSS-kod, enkel vanlig a: hover.

Lurigt :) Jag vet faktiskt inte, men jag lyckas återskapa problemet. Får se om någon har en bra förklaring.

Okej, jag accepterar ditt svar som slutgiltigt, det är inte världens mest nödvändiga utseendefix på den här hemsidan, så det får gå. Tack för hjälpen! :bire

Efter lite testning fungerar det om man manipulerar class-attributet istället för de individuella style-egenskaperna. Exempel:

function changeColor(currentElm, classNameIfMatch, classNameIfNotMatch)
{
  var ids = ["a1", "a2", "a3", "a4", "a5"];
  for (var i = 0; i < ids.length; ++i)
  {
    if (currentElm.id != ids[i]){
      document.getElementById(ids[i]).className = classNameIfNotMatch;
    }
  }
  currentElm.className = classNameIfMatch;
}

<style>
ul li a.default:hover{
 background-color:green;
}

ul li a.active{
 background-color:black;
}
</style>

<ul>
<li><a id="a1" class="default" href="#" onclick="changeColor(this,'active','default')"><img src="images/bild1_small.jpg" /></a></li>
<li><a id="a2" class="default" href="#" onclick="changeColor(this,'active','default')"><img src="images/bild2_small.jpg" /></a></li>
<li><a id="a3" class="default" href="#" onclick="changeColor(this,'active','default')"><img src="images/bild3_small.jpg" /></a></li>
<li><a id="a4" class="default" href="#" onclick="changeColor(this,'active','default')"><img src="images/bild4_small.jpg" /></a></li>
<li><a id="a5" class="default" href="#" onclick="changeColor(this,'active','default')"><img src="images/bild5_small.jpg" /></a></li>
</ul>

Fast då funkar hover endast på det objektet som är markerat, inte på de övriga?

För mig fungerar hover på alla utom det som är markerat.

Jo, jag hade fått i mig lite öl igår och var stressad, nu funkar det fint här med. Tusen tack! :)