Avatar billede wondergirl Nybegynder
20. juni 2001 - 07:37 Der er 13 kommentarer og
3 løsninger

Celle i tabel - skifte farve ved mouseover!

Hej eksperter, jeg ved ikke om jeg har puttet spørgsmålet i den rigtige kategori.

Jeg har lavet en menu med en tabel der er delt op i celler. De celler vil jeg gerne have til at skifte farve når musen føres over. Hvordan gør man det.

Hvis der er nogen der kan svare på det, skal der lige tages hensyn til, at jeg er nybegynder.

Evt. gode links til sider på nettet, som har koder til smarte ting til hjemmesider (Java script + html).
Avatar billede jakoba Nybegynder
20. juni 2001 - 07:52 #1
du skriver din celle normalt, men med en ID parameter  og en onmouseover= evnet i. fx:

    <td id=\"dincelle\" onmouseover=\"skiftFarve(this, \'sort\')\" onmouseout=\"skiftFarve(this, \'hvid\'>
      og så det der står i cellen
    </td>

og så laver du et lille java script:

<script language=\'javascript\'>

function skiftFarve( cellen, nyfarve ) {
    cellen.styles.bgColor = nyfarve;
}; //end skiftFarve( object, string )

</script>

mvh JakobA
Avatar billede jakoba Nybegynder
20. juni 2001 - 07:56 #2
scriptet placeres øverst i din kode, imellem <head> og </head>.
de andre celler laves ligesådan.

der hvor jeg har skrevet \'sort\' og \'hvid\' kan du også angive de ønskede farver på diverse andre måder, som fx: \'#CCFFCC\' eller \'rgb( 123,200,123 )\'
Avatar billede jakoba Nybegynder
20. juni 2001 - 08:00 #3
det der ID er forresten da helt overflødigt for farveskiftet. sorry.
Avatar billede wondergirl Nybegynder
20. juni 2001 - 08:05 #4
Okay Jakoba, jeg prøver lige.
Avatar billede wondergirl Nybegynder
20. juni 2001 - 08:15 #5
Virker ikke, sorry.
Avatar billede wondergirl Nybegynder
20. juni 2001 - 08:19 #6
Dette virker ikke:

<html>

<head>
<title>Celletest</title>

<script language=\'javascript\'>

function skiftFarve( cellen, nyfarve ) {
    cellen.styles.bgColor = nyfarve;
}; //end skiftFarve( object, string )

</script>

</head>

<body>

<table width=\"100%\">
  <tr>
    <td id=\"dincelle\" onmouseover=\"skiftFarve(this, \'#000000\')\" onmouseout=\"skiftFarve(this, \'#ffffff\'>Bla</td>
  </tr>
</table>
</body>
Avatar billede Slettet bruger
20. juni 2001 - 08:24 #7
Hej Wondergirl

Jeg bruger det selv - hvis du lige skriver din mail - så sender jeg det til dig :o)
Avatar billede wondergirl Nybegynder
20. juni 2001 - 08:36 #8
ezolu, skriv koden her...
Avatar billede Slettet bruger
20. juni 2001 - 08:43 #9
OK

Jeg har en
<script language=\"JavaScript\" src=\"../../tdover.js\"></script> indsat på mine sider..
Indholdet af den kommer her:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  function co(element,mode) {
    if (mode==\"in\") {
      cursortype = \'hand\'
      colorval = \'#FFFFFF\'
    } else if (mode==\"out\") {
      cursortype = \'\'
      colorval = \'#9BB8D3\'
    }
  element.style.background=colorval;
  element.style.cursor=cursortype;
}
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Og på de <td> som jeg vil have effekten på har jeg:
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
<td onmouseover=\"co(this,\'in\');\" onmouseout=\"co(this,\'out\');\" onClick=\"location.href=\'test/test.asp\';\" width=\"17%\" align=\"center\" colspan=\"2\" class=\"tdmnu\" <a href=\"test/test.asp\" valign=\"middle\">Tester OnMouseover</td>
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Vær lige opmærksom på at jeg har givet min <td> typografien \"tdmnu\" som ser sådan her ud i mit stylesheet:
.tdmnu
{
    padding: 3;
    background-color: #9BB8D3;
    border-left: #000000 1 solid;
    border-top: #000000 1 solid;
    border-bottom: #000000 1 solid
}

//
ezolu
Avatar billede hirtshals Nybegynder
20. juni 2001 - 08:47 #10
Du finder et færdig script lige til at copy / paste her

http://www.viewsource.dk/jscat.asp?ident=5&page=2
Tablecellhover


Avatar billede hirtshals Nybegynder
20. juni 2001 - 08:48 #11
Avatar billede Slettet bruger
20. juni 2001 - 08:50 #12
Hirtshals > Det er jo nøjagtig det samme som jeg viser!!?!!
Avatar billede wondergirl Nybegynder
20. juni 2001 - 08:52 #13
Ezolu: Næsten ;-)
Avatar billede wondergirl Nybegynder
20. juni 2001 - 08:56 #14
Tak for hjælpen.
Avatar billede Slettet bruger
20. juni 2001 - 08:57 #15
Deler vi point oder hvordan?
Avatar billede Slettet bruger
20. juni 2001 - 08:58 #16
Sorry - havde ikke lige set det ;o)

Selvtak
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