Avatar billede zajin Nybegynder
13. december 2004 - 13:09 Der er 2 kommentarer

Ændre farve på en text med onmouseover & onmouseout

Goddag..
Jeg har et bette' problem:

Jeg skal lave en menu i et table hvor datacellerne skal skifte farve når man kører musen over dem.. Jeg har også fået det til at virke! Men jeg vil også gerne ha teksten i datacellen til at skifte farve når man kører musen ind over.

Jeg har brugt følgende kode:

i <head>-delen har jeg sat følgende ind:

<SCRIPT language=JavaScript>
  function co(element,mode) {
    if (mode=="in") {
      cursortype = 'hand'
      colorval = '#23AA00'
      font = '#000000'

    } else if (mode=="out") {
      cursortype = 'hand'
      colorval = '#000000'

    }
  element.style.background=colorval;
  element.style.cursor=cursortype;
  element.style.fontcolor=font;
}
</SCRIPT>

...og i <body>-delen har jeg så lavet min side, med tabbellen som ska skifte farve:

<TD onmouseover="co(this,'in');" onmouseout="co(this,'out');" valign="middle" align="center" width="600" height="30" VALIGN="top">
<a href="./index.html">Home</a>
</TD>
Avatar billede thomas_yde Nybegynder
13. december 2004 - 13:19 #1
Teksten skal du skifte farve med element.style.color = ''
men smider du links ind i den bliver de lagt som yderligere lag i din celle og derfor bliver de ikke påvirket af style i din TD.
Så skal du lave links med onClick=""

<SCRIPT language=JavaScript>
  function co(element,mode) {
    if (mode=="in") {
      cursortype = 'hand'
      colorval = '#23AA00'
      fontcolorval = '#FFFFFF'
     
    } else if (mode=="out") {
      cursortype = 'hand'
      colorval = '#000000'
      fontcolorval = '#FF0033'
    }
  element.style.color = fontcolorval;
  element.style.background=colorval;
  element.style.cursor=cursortype;
}
</SCRIPT>
Avatar billede thomas_yde Nybegynder
13. december 2004 - 13:27 #2
Du kan dog også vælge at løbe samtlige "børn" igennem til din TD og så skifte farve på dem:
<SCRIPT language=JavaScript>
  function co(element,mode) {
  objChildNodes = element.childNodes;
    if (mode=="in") {
      cursortype = 'hand'
      colorval = '#23AA00'
    for(i=0;i<objChildNodes.length;i++){
      if(objChildNodes[i].style!=null)objChildNodes[i].style.color='#FFFFFF'
    }
     
    } else if (mode=="out") {
      cursortype = 'hand'
      colorval = '#000000'
    for(i=0;i<objChildNodes.length;i++){
      if(objChildNodes[i].style!=null)objChildNodes[i].style.color='#FF0033'
    }
    }
  element.style.background=colorval;
  element.style.cursor=cursortype;
}
</SCRIPT>
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester