Notifikationer

Markér alle som læst Log ud

cronaldo Nybegynder

27. juni 2008 - 23:21 Der er 17 kommentarer og
1 løsning

Gå tilbage til standard bgColor ved onMouseOut..

Det jeg søger er at finde ud af hvordan jeg i "onMouseOut" kan få den til blot at vælge den baggrundsværdi jeg har fundet vha. scriptet i "style".. er der nogen, der kan hjælpe ?

Mine kode er denne:

<tr onmouseover="this.style.backgroundColor= '#2477B3';" style="background-color: #<?= ( $i++ % 2 ? 'E1E1E1' : 'ECE8E8' ) ?>" onmouseout="this.style.backgroundColor= ''" >

Synes godt om

olebole Juniormester

27. juni 2008 - 23:32 #1

<ole>

<?
$i++;
?>
<tr onmouseover="this.style.backgroundColor= '#2477B3';"
onmouseout="this.style.backgroundColor= '#<?= ( $i % 2 ? 'E1E1E1' : 'ECE8E8' ) ?>'"
style="background-color: #<?= ( $i % 2 ? 'E1E1E1' : 'ECE8E8' ) ?>">

/mvh
</bole>

Synes godt om

cronaldo Nybegynder

27. juni 2008 - 23:41 #2

det virker upåklageligt :)
smid svar.

Synes godt om

olebole Juniormester

27. juni 2008 - 23:43 #3

*griiiiiiiiiiiiib* =)

Synes godt om

coderdk Praktikant

27. juni 2008 - 23:46 #4

hvorfor script? du kan gøre det med css (doctype strict nødvendig for ie7):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<style type="text/css">
.trn {
background-color: #ECE8E8;
}
.trh {
background-color: #E1E1E1;
}
.tre:hover {
background-color: #2477B3;
}
</style>
</head>
<body>
<table>
<? for ( $i = 0; $i < 10; $i++ )
{
echo '<tr class="tre '.( $i % 2 ? 'trh' : 'trn' ) .'"><td>hej 1</td><td>hej 2</td></tr>';
}
?>
</table>
</body>
</html>

det fylder også mindre ;)

Synes godt om

olebole Juniormester

27. juni 2008 - 23:49 #5

- men virker ikke i IE6, som der stadig er mange af ;o)

I øvrigt er dette nok kønnere end mit første forslag:

<?
$bgCol = "#".($i++ % 2 ? 'E1E1E1' : 'ECE8E8');
?>
<tr onmouseover="this.style.backgroundColor= '#2477B3';"
onmouseout="this.style.backgroundColor= '<?= $bgCol ?>'"
style="background-color: <?= $bgCol ?>">

Synes godt om

erikjacobsen Ekspert

28. juni 2008 - 00:19 #6

Jeg har lige reduceret kompleksiteten i eksemplet, men nu vi har Ole i den anden ende, kan han måske fortælle os, om det er rimeligt (mht til standarder og browsere), at gemme den gamle farve i en attribut, så man ikke skal skrive farver mere end et sted. Eks:

<tr onmouseover="this.bqf=this.style.backgroundColor;this.style.backgroundColor='red'"
onmouseout="this.style.backgroundColor=this.bqf"
style="background-color: green">

Synes godt om

olebole Juniormester

28. juni 2008 - 00:28 #7

Det er helt lovligt. Jeg tror nu nok, jeg ville bruge get- og setAttribute:

<tr onmouseover="this.setAttribute('bqf',this.style.backgroundColor);this.style.backgroundColor='red'"
onmouseout="this.style.backgroundColor=this.getAttribute('bqf')"
style="background-color: green">

Synes godt om

cronaldo Nybegynder

28. juni 2008 - 12:05 #8

Jeg forstår ikke ret meget af det der, er ikke så skarp til JavaScripting endnu, er igang med at prøve at forstå det, men synes ikke jeg kan finde så mange rigtig gode tutorials på nettet :)

Synes godt om

roenving Novice

28. juni 2008 - 12:40 #9

Hvorfor ikke bare nulstille ?-)

.backgroundBlue{background-color:#1235de;}

<tr class="backgroundBlue" onmouseover="this.style.backgroundColor='#454545';" onmouseout="this.style.backgroundColor='';">

Synes godt om

kongknabe Nybegynder

28. juni 2008 - 18:17 #10

Umiddelbart ville jeg mene at du burde klare dette med almindeligt CSS og så inkludere dette lille script udelukkende hvis man bruger IE6, via conditional comments :)

Forklaring af conditional comments (En life saver :D): http://www.quirksmode.org/css/condcom.html
Forklaring af CSS proportyen :hover

Sidst men ikke mindst bør du afholde dig fra at lave javascript inline i din HTML, men i stedet lave det hele i et script for sig - f.eks. sådan her:

window.onload = function() {

var y = document.getElementsByTagName('tr');
for (var i=0;i<y.length;i++){

y[i].onmouseover = function() { mouseInHover(this); }

y[i].onmouseout = function() { mouseOutHover(this); }
}
}

function mouseInHover(obj){
Kode her når musen er over en TR
}

function mouseOutHover(obj){
Kode her når musen fjernes igen
}

Følgende har den fordel at du adskiller din HTML Markup fra dit javascript lag, så hvis du senere vil rette en farve, eller helt fjerne funktionen skal du ikke løbe alle dine TRs i dit html dokument igennem, men blot rette det et centralt sted :) (Og det giver dig også muligheden for kun at inkludere scriptet hvis der er tale om en specifik browser, som f.eks. IE6 og "conditional coments")

Synes godt om

kongknabe Nybegynder

28. juni 2008 - 18:20 #11

Hov, glemte et link til forklaringen af CSS :hover - her: http://www.html.dk/tutorials/css/lektion6.asp

Synes godt om

olebole Juniormester

28. juni 2008 - 18:43 #12

Men det har - som også mange debatter i W3C har afspejlet - den bagdel, at funktionalitet pludselig bliver varetaget af CSS. Af historiske grunde har man dog valgt at lade hover forblive i CSS - men det burde nok varetages af script.

Hvorfor skal man ikke sætte event handlers direkte på elementerne? Der er da intet i vejen for at have event handlers i markup koden. Med XHTML 2.0 (og dermed XML Events) får vi sågar et listener-element =)
http://www.w3.org/TR/xml-events/

W3C anbefaler, vi skiller funktionaliteten i form af scripts ud fra markup'en - men der er intet i vejen for at have 'håndtagene' til disse scripts liggende i markup koden. Det svarer blot til CSS' klasse attributter samme sted.

Synes godt om

olebole Juniormester

28. juni 2008 - 18:46 #13

html.dk har øjensynlig vanskeligt ved at holde serveren i luften for tiden, men det er nu heller ikke noget godt sted at lære om webkode. Ikke mindst i deres CSS tutorials og artikler kan det til tider være svært at finde huller mellem fejlene :o|

Synes godt om

kongknabe Nybegynder

28. juni 2008 - 19:05 #14

Ole: Er nok tilbøjelig til at være enig med dig ang. dine betragtninger omkring funktionalitet...

Min betragning ang. at holde javascript uden for markupen går udelukkende på at det kan være besværligt og tidskrævende at ændre den funktion der bliver kaldt i f.eks. 200 tabel rækker, og det derfor er lettere at holde det helt i et script for sig selv.

Hvor god HTML.dk er, ved jeg ikke.. men den side jeg linker til ser ganske fornuftig ud synes jeg!?

Synes godt om

roenving Novice

29. juni 2008 - 15:20 #15

Ja, der er ikke så mange fejl på den side, men der er stadig en hel stribe alligevel, f.eks. betyder pseudo-selektoren :link, at a-tagget indeholder en url i href-attributten, og siger intet om at det er besøgt eller ubesøgt ...

-- desuden slutter artiklen af med en særdeles alvorlig fejl, der tydeliggør, at forfatteren ikke rigtig har fattet det emne, han skriver om ,-(

-- der er nemlig kun _en_ rækkefølge af pseudo-selektorerne:

a -- alle a-tags
a:link --´a-tags med et link i href
a:visited -- a-tags med et besøgt link i href
a:hover -- a-tags, hvor musen er ovenover
a:active -- a-tags, hvor museknappen er nedtrykket

-- og da efterfølgende properties ooverskriver forudgående definerede, er det indlysende, at :active nødvendigvis må komme efter :hover, da man jo ikke kan trykke museknappen ned uden at have musen over tagget !-)

Synes godt om

olebole Juniormester

29. juni 2008 - 23:34 #16

"Et link betegnes i HTML med <a>" >> Nej - det er et anker. Et link er - som roenving allerede har anført - et anker med en hyper reference (href). Det er en væsentlig forskel!

Når han videre roder rundt med links - samtidig med at vise ankre - og tale om pseudo klasser i dén forbindelse, skaber han yderligere grobund for misforståelser. Pseudo klasserne virker nemlig _kun_ på links ... ikke på ankre ;o)

Synes godt om

coderdk Praktikant

29. juni 2008 - 23:49 #17

a:hover og a:active virker også på ankre - dog ikke i internet explorer, og med safari kun med strict ;P (hvis i mener <a name="et-navn"></a> er et anker altså)

Synes godt om

olebole Juniormester

29. juni 2008 - 23:56 #18

- præcis =)

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript	3	27/04/202620:09	I går 21:05
Validering af filnavn i formular Af Strawberry i JavaScript	8	14/04/202610:11	20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript	2	03/02/202614:19	04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript	9	18/04/202516:52	22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript	2	14/02/202511:47	27/06/202514:34

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.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS