Avatar billede Blacknirvana Nybegynder
20. oktober 2009 - 08:52 Der er 5 kommentarer og
1 løsning

Farveskift ved link (baggrund og tekst)

Hej

Jeg er ikke den bedste til javascript men ved der er mange gode og hjælpsomme folk her inde.

Det jeg skal bruge er sikkert rimelig simpelt, men uden for min viden lige pt.

Jeg skal have en menu på på min side hvor der sker et farveskift når man fører musen hen over linket, men både tekst og baggrund skal skifte. Mine links er placerede i tabel felter.

Her er præcis hvad der skal ske.

Når man bare ser linket på siden er baggrunden i tabellen hvid mens link teksten er rød. Når man fører musen hen over linket/boksen skifter baggrunden til rød mens teksten bliver hvid.

Håber i forstår og kan hjælpe mig.
Avatar billede tjens Nybegynder
20. oktober 2009 - 10:46 #1
Nu da du har spurgt i javascript, får du en løsning der involverer dette:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"    "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<title>Style Hover</title>
<style type="text/css">
    body    {background-color: peachPuff; font-family : sans-serif;}
    table, th, tr, td        {border: 1px solid pink; border-collapse: collapse; padding: 2px 8px 2px 8px; background-color: red; color: white;}
</style>
<script type="text/javascript">

function setHoverStyle(elm) {
    elm.style.backgroundColor = "white";
    elm.style.color = "red";
}

function setNormalStyle(elm) {
    elm.style.backgroundColor = "red";
    elm.style.color = "white";
}
</script>
</head>
<body>
<div>
<table>
    <tr><td onmouseover="setHoverStyle(this);" onmouseout="setNormalStyle(this);" >Hej</td></tr>
    <tr><td onmouseover="setHoverStyle(this);" onmouseout="setNormalStyle(this);" >Halli</td></tr>
    <tr><td onmouseover="setHoverStyle(this);" onmouseout="setNormalStyle(this);" >Hallo</td></tr>
    <tr><td onmouseover="setHoverStyle(this);" onmouseout="setNormalStyle(this);" >Heisan</td></tr>
    <tr><td onmouseover="setHoverStyle(this);" onmouseout="setNormalStyle(this);" >allo allo</td></tr>
    <tr><td onmouseover="setHoverStyle(this);" onmouseout="setNormalStyle(this);" >Mojn</td></tr>
    <tr><td onmouseover="setHoverStyle(this);" onmouseout="setNormalStyle(this);" onclick="alert('du har klikket på link');">LinkDemo</td></tr>
</table>
</div>
</body>
</html>

Hvis du spørger i CSS kategorien, kan det sikkert også laves v.h.a. class definitioner, og uden javascript.
Avatar billede Blacknirvana Nybegynder
21. oktober 2009 - 05:34 #2
Hej tjens

Det virker lige som det skal indtil jeg laver teksten om til links, kan ikke helt få det til at virke. Vil en CSS løsning være at foretrække?
Avatar billede tjens Nybegynder
21. oktober 2009 - 09:07 #3
Hvis du laver teksten om til link bliver style "forstyrret" af den automatik browseren sætter på links.
Derudover kan brugeren ikke klikke på hele det farvede felt, men skal ramme teksten.

Jeg vil foreslå at du bibeholder ovenstående, og så laver "link"-funktionalitet ved at ændre

onclick="alert('du har klikket på link');"

til

onclick="location.href = 'nyside.html';"
Avatar billede Blacknirvana Nybegynder
22. oktober 2009 - 06:12 #4
Perfekt mange tak

Smider du et svar?
Avatar billede tjens Nybegynder
22. oktober 2009 - 09:07 #5
#4 Smider et svar? Hvad er der i vejen med svaret i #1  ;-)
Avatar billede Blacknirvana Nybegynder
23. oktober 2009 - 05:33 #6
LUKKET, og mange tak til tjens
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