Søg
Avatar billede madsmm Nybegynder
28. maj 2003 - 11:56 Der er 14 kommentarer og
1 løsning

onmouse over <td> med css

Hejsa,

Jeg bliver lige nødt til at spørge her, hvad er den "rigtige" metode til at lave onmouse over på <td> eller <tr>.

Jeg leder efter noget i stil med onmouseover="this.className='hover';" onmouseout="this.className='normal';"

men dette virker bare meget langsomt i IE..

Løsningen skal være så jeg kan definere alle farver i stylesheet, og det skal spille lynhurtigt i "alle" browsere.

På forhånd tak! Håber i kan hjælpe mig!
Avatar billede somaliomar Praktikant
28. maj 2003 - 11:57 #1
Noget ala det her http://activedeveloper.dk/locator.asp?guid=001000000276 ?
Avatar billede medions Nybegynder
28. maj 2003 - 12:01 #2
Det er en TD!

//>Rune
Avatar billede madsmm Nybegynder
28. maj 2003 - 12:03 #3
somaliomar> egentlig samme problem som med this.className='' det går for langsomt.. så snart der er mange elementer, skifter farven langsomt.

så tak, men ikke lige det jeg leder efter!
Avatar billede madsmm Nybegynder
28. maj 2003 - 12:03 #4
medions ?
Avatar billede medions Nybegynder
28. maj 2003 - 12:07 #5
<snip>
Jeg bliver lige nødt til at spørge her, hvad er den "rigtige" metode til at lave onmouse over på <td> eller <tr>.
</snip>

og jeg svare, en TD :-)
Med Somaliomar's løsning virker hans eksempel kun i nyrere browsere, men der findes heller ikke en sådan løsning til ældrer browsere, det vil ikke være muligt at kunne lave den til helt ældrer browsere alligevel!

//>Rune
Avatar billede madsmm Nybegynder
28. maj 2003 - 12:09 #6
jeg leder efter noget der virker lige så hurtigt og godt som hvis man benytter : onMouseOver="this.style.backgroundColor='#FFFFFF';" onMouseOut="this.style.backgroundColor='#f0f0f0';"
Avatar billede madsmm Nybegynder
28. maj 2003 - 12:10 #7
ok, men TD er jo ikke et svar på det spørgsmål jeg stillede :-)
Avatar billede pelkjaer Nybegynder
28. maj 2003 - 12:40 #8
Denne burde være ganske ok at bruge: onMouseOver="this.style.backgroundColor='#FFFFFF';"

Denne er dog langsom:
onmouseover="this.className='hover';"

HVorfor? Fordi i #1 skifter du style direkte på elementet som man bør, og i #2 skifter du en klasse, hvilket man bør undgå fordi det er for langsomt.
Avatar billede pelkjaer Nybegynder
28. maj 2003 - 12:42 #9
Du kan også bruge css only - se http://www.peterelkjaer.dk/exp/css.html
Avatar billede edutasia Nybegynder
28. maj 2003 - 14:24 #10
Her er en løsning, der kombinerer fordelene ved stylesheet-klasser med hastigheden ved at sætte styles direkte:

I en onload-handler gemmes property'en cssText fra alle stylesheet-klasser, der indeholder ordet "hover" i et globalt js array. I mouseover-handleren, der kaldes med element og et index, sættes elementets style.cssText = den tekst der er gemt i positionen index i det globale array.

Det eneste, man skal holde styr på, er HVOR i stylesheetet, ens hover-klasser er placeret, og at de indeholder ordet "hover" - resten giver sig selv. Man skal altså stadig kun redigere stylesheet klasser og slipper for at skulle redigere styles i alle mulige event-handlere.


----------------------------

<!doctype html public "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

<style>
.clHover0 {background-color: yellow}
.clHover1 {background-color: red}
.clHover2 {background-color: blue}
.clNormal {background-color: white}
</style>

<script>

var arrHovers = ''; //global variabel, der indeholder alle hover-klasser

function initHovers() {
  //finder alle regler i dokumentets stylesheet og gemmer dem i arrHovers
  var strTmp = ';';
  var coll = document.styleSheets(0).rules;
  for (var i=0; i<coll.length; i++) if (coll[i].selectorText.toLowerCase().indexOf('hover') != -1) strTmp += ';' + coll[i].style.cssText;
  strTmp = strTmp.replace(';;','');
  arrHovers = strTmp.split(';'); 
}

function mOver(elm,index) {
  // her kunne man evt. sætte runtimeStyle i stedet for style
  elm.style.cssText = arrHovers[index];
}

function mOut(elm) {
  // her kunne man evt. sætte runtimeStyle i stedet for style
  elm.style.cssText = '';
}

</script>
</head>

<body onload="initHovers()">

<table border=1 width=75%>
<tr>
    <td class=clNormal onmouseover="mOver(this,0)" onmouseout="mOut(this,0)">Test 1</td>
    <td class=clNormal onmouseover="mOver(this,1)" onmouseout="mOut(this,0)">Test 2</td>
    <td class=clNormal onmouseover="mOver(this,2)" onmouseout="mOut(this,0)">Test 3</td>
</tr>
</table>

</body>
</html>
Avatar billede rangerbs Nybegynder
28. maj 2003 - 14:30 #11
pelkjaer --> gider du ikke at sende dit stylesheet til TBC-strike@ofir.dk ?
Jeg kan nemlig godt bruge det :D

hvis det er kan jeg bare oprette et spm hvor du så kan få point

mvh Ranger
Avatar billede pelkjaer Nybegynder
28. maj 2003 - 14:33 #12
http://www.peterelkjaer.dk/exp/w3csheet.css  <-- W3C
http://www.peterelkjaer.dk/exp/v4sheet.css  <-- NN4
Avatar billede roenving Novice
28. maj 2003 - 14:41 #13
Man kan jo også bare (-men det har visse problemer, går kun over cellens indhold)
td { padding : 0px }
td:hover { padding : 0px; background-color:green }
Avatar billede pelkjaer Nybegynder
28. maj 2003 - 14:46 #14
ja det er display:block; der gør "tricket"
Avatar billede madsmm Nybegynder
09. september 2003 - 12:14 #15
Undskyld jeg ikke har delt points ud, men havde helt glemt denne her.

Og jeg har egentlig ikke fået nogen svar jeg kan bruge til noget, da de alle lider af det samme - de blir langsomme, når der er mange punkter.

men der skal da være points for forsøget!
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 14:10 Komme ind på : YouSeeMusic" Af Ikke-ekspert i Musik & videoafspillere
I går 13:27 Send/modtag i Outlook 2024 Af ErikHg i E-mail programmer
10/0915:34 Installer alarmlyd på Samsung Galaxy XCover 7 Pro Af ErikHg i Mobiltelefoner
08/0913:06 Kan ikke starte min pc Af Malm i PC
07/0919:20 DVD program Af dcedata1977 i Andet software
White papers
Flere white papers »