Søg
Avatar billede Slettet bruger
19. juni 2004 - 11:48 Der er 18 kommentarer og
1 løsning

Onmouseover Tabel-style skal skifte

Jeg har en tabel med 2 rækker og 8 kolonner.
I hver celle er der et link.
Når jeg fører musen over dette link skal skriften skifte farve, og det samme skal border og bg i samme celle.
Hvordan gør man det?
Avatar billede roenving Novice
19. juni 2004 - 11:57 #1
<script type="text/javascript">
function tdInOut(elm,dir){
  if(dir==0){
    elm.style.color='red';
    elm.style.backgroundColor='black';
    elm.style.borderColor='green';
  }else{
    elm.style.color='black';
    elm.style.backgroundColor='white';
    elm.style.borderColor='black';
  }
}
</script>

<table><tr>
  <td onmouseover="tdInOut(this,0)" onmouseout="tdInOut(this,1)"></td>
...
</tr></table>
Avatar billede skovenborg Nybegynder
19. juni 2004 - 13:55 #2
"Når jeg fører musen over dette link..."

Så skal det vel se sådan ud:
<a href="http://www.side.dk" onmouseover="tdInOut(this,0)" onmouseout="tdInOut(this,1)">

function tdInOut(elm,dir){
  if(dir==0){
    elm.style.color='red';
    elm.parentNode.style.backgroundColor='black';
    elm.parentNode.style.borderColor='green';
  }else{
    elm.style.color='black';
    elm.style.parentNode.backgroundColor='white';
    elm.style.parentNode.borderColor='black';
  }
}
Avatar billede skovenborg Nybegynder
19. juni 2004 - 13:56 #3
...medmindre der kun er et link i hele cellen og ingen anden tekst - så kan det jo ligeså godt være roenvings mulighed ;-)
Avatar billede amikk Nybegynder
19. juni 2004 - 13:58 #4
Hej

Måske dette link kunne have relevans

http://activedeveloper.dk/artikler/default.asp?articleid=276
Avatar billede Slettet bruger
19. juni 2004 - 17:00 #5
roenvig ->
OK...
Jeg bruger border-top, border-bottom, border-left og border-right til at definere farverne på cellekanten.
I scriptet vil gerne have farve til at ændre sig særskilt.
Jeg har prøvet med
eml.style.bordertopcolor='0000FF';
Men det virker ikke....
Hvad gør jeg der?
Jeg vil også have at når man klikker på cellen skal den have et tredje farve-sæt og en anden celle skal skal samtidigt skifte til et fjerde...
Er jeg forstået? Ellers spørg...
Avatar billede Slettet bruger
19. juni 2004 - 17:04 #6
jeg havde ikke lige kigget ordentligt på dit link, amikk... Der var svaret jo...
roenvig og amikk, læg et svar...
Avatar billede roenving Novice
19. juni 2004 - 17:08 #7
-- du fandt også elm.style.borderTopColor='0000FF'; ?-)

-- velbekomme '-)
Avatar billede Slettet bruger
19. juni 2004 - 20:28 #8
undskyld jeg spørger efter du har besvaret...
Jeg bruger nu eksemblet fra http://activedeveloper.dk/artikler/default.asp?articleid=276 "vi udbygger menuen"
Jeg vil nu gerne have at når jeg klikker på en af punkterne skal der være et 3. farve-sæt til den pågældende celle...
Når man klikker i en anden celle skal farverne på den før valgte celle laves om til "standard/uberørt", og celle 2 skal få den 3. farveformateringen.
Jeg har prøvet at lave ligesom a.menupunkt og a.menupunkt:hover, men bare kaldt den a.menupunkt:click. Det virkede ikke, så hvad skal jeg gøre?
Avatar billede amikk Nybegynder
19. juni 2004 - 22:29 #9
har du husket at give den en klasse?

Ellers mht du skriver a.menupunkt:click skal du skrive a.menupunkt:active . Du kan også bruge :visited hvis den skal markere et tidligere brugt link.

Kig eventuelt på http://www.html.dk/tutorials/css/lektion6.asp#active (som iøvrigt er en ganske god lille håndbog til diverse ting)
Avatar billede amikk Nybegynder
19. juni 2004 - 22:30 #10
jeg glemte at sige, at jeg lægger et svar hvis du får løst dit problem da jeg ellers ikk' ser grund til det :-) skriv lige når du har nyt i sagen
Avatar billede skovenborg Nybegynder
19. juni 2004 - 23:10 #11
hvis den også skal være "valgt" (klikket på) når man går ind på en ny side, kan du kombinere :active med en klasse i body:
a.menupunkt {
  text-decoration: none;
  background-color: #EAEAEA;
  color: #717171;
  border-top : 1px solid #FFFFFF;
  border-left : 1px solid #FFFFFF;
  border-bottom : 1px solid #6D6D6D;
  display: block;
  line-height: 22px;
  width:99%;
}

a.menupunkt:hover {
  background-color: #D1D9F3;
  border-top : 1px solid #8F9CC6;
  border-left : 1px solid #8F9CC6;
  border-bottom : 1px solid #6D6D6D;
  color: #000000;
}
BODY.menupunkt1 #menupunkt1, BODY.menupunkt2 #menupunkt2,BODY.menupunkt3 #menupunkt3,BODY.menupunkt4 #menupunkt4,a.menupunkt:active {
  background-color:#B0B0F3;
  border-top : 1px solid #8F9CF6;
  border-left : 1px solid #8F9CF6;
  border-bottom : 1px solid #6D6DFD;
  color: #000000;
}

<body class="menupunkt1">
<table cellpadding="0" cellspacing="0" border=0 class=menu width=130>
<tr><td><div class=overskrift>Overskrift</div></td></tr>
<tr><td class=menu><a href="link1.html" class=menupunkt id="menupunkt1">Menupunkt 1</a></td></tr>
<tr><td class=menu><a href="link1.html" class=menupunkt id="menupunkt2">Menupunkt 2</a></td></tr>
<tr><td class=menu><a href="link1.html" class=menupunkt id="menupunkt3">Menupunkt 3</a></td></tr>
<tr><td class=menu><a href="link1.html" class=menupunkt id="menupunkt4">Menupunkt 4</a></td></tr>
</table>

Hvor du kan definere hvad for et menupunkt som skal være valgt fra starten på hvilken side ved at ændre på <body class="menupunkt?">
Den gør det dermed ikke automatisk, men du kan vel gætte dig til hvad for et link brugeren har klikket på ;-)
Avatar billede amikk Nybegynder
20. juni 2004 - 00:32 #12
Jeg tror ikk man umiddelbart, blot ved brug af CSS, kan få den til at markere den som er "aktiv" (hvis jeg forstår din formulering ret). Jeg vil tro at du nok skal til at kombinere det med noget javascript eller server side language (asp / php fx)
Avatar billede skovenborg Nybegynder
20. juni 2004 - 01:19 #13
tja, CSS kan ikke umiddelbart regne ud hvad for et felt der er aktivt, men hvis man ved hvad for en side man er inde på, kan man jo "highlighte" det menupunkt, som passer til - hvilket er pointen i ovenstående style. Altså er body'ens class den samme som menupunktets id, så får den samme style, som hvis man klikker på den (med active)
Avatar billede Slettet bruger
21. juni 2004 - 13:57 #14
men når man så markerer noget på den side der hører til det aktive menupunkt, eller klikker andre steder (ikke menupunkter) bliver punktet inaktivt.
Kan det fikses?
Avatar billede skovenborg Nybegynder
21. juni 2004 - 18:19 #15
så må du ud i noget javascript (men husk på at farverne jo bliver reseten når siden skifter - her vil du måske have gavn af mit eksempel fra 19/06-2004 23:10:46. Nå, men her er javascript muligheden:
var activeL;
function clicklink(l) {
      if (activeL) {activeL.style.backgroundColor = "#EAEAEA";activeL.style.borderColor = "#fff";activeL.style.color = "#717171";}
activeL = l;
activeL.style.backgroudnColor = "#B0B0F3";
activeL.style.borderColor = "#8F9CF6";
activeL.style.borderBottomColor = "#6D6DFD";
activeL.style.color = "#000";
}

}
Avatar billede skovenborg Nybegynder
21. juni 2004 - 18:20 #16
hov der kom et } for meget med, så slet lige det sidste ;-)
Avatar billede skovenborg Nybegynder
21. juni 2004 - 18:21 #17
og jeg skal forresten huske at skrive HTML ændringerne:
<tr><td class=menu><a href="link1.html" class=menupunkt onclick="clicklink(this)">Menupunkt 1</a></td></tr>
<tr><td class=menu><a href="link1.html" class=menupunkt onclick="clicklink(this)">Menupunkt 2</a></td></tr>
<tr><td class=menu><a href="link1.html" class=menupunkt onclick="clicklink(this)">Menupunkt 3</a></td></tr>
<tr><td class=menu><a href="link1.html" class=menupunkt onclick="clicklink(this)">Menupunkt 4</a></td></tr>
Avatar billede Slettet bruger
22. juni 2004 - 10:05 #18
ok...
Tak skal i have..
skovborg og amikk, læg et svar...
Avatar billede skovenborg Nybegynder
22. juni 2004 - 17:34 #19
her :-)
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
Se alle spørgsmål i kategorien Opret spørgsmål

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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 20:07 Libra Office 26.2.5.2 - Er sort - Kan an ændre til lysere baggrund ? (Windows 11) Af Ikke-ekspert i Office & Kontorpakker
I går 11:24 Hvor kan jeg finde hjælp til at flytte fra min gamle Samsung Flip4 til min nye Samsung Galaxy S24 Af vbr i Apps til Android
I går 11:16 problem med mailbesked Af Pestilensen i Excel
I går 10:45 Powerbank Af postpeter@outlook.dk i Fri debat
22/0821:38 webui_forge_cu121_torch231 med AMD Grafikkort. Af jonpet i Andet software
White papers
Flere white papers »