Søg
Avatar billede nielspt Nybegynder
12. april 2007 - 17:59 Der er 16 kommentarer og
2 løsninger

MouseOver i <td> og med link

Hej eksperter..

Jeg sidder og bøvler med følgende:

HTML:

<table width="100%" height="100%">
  <tr>
    <td width="3%" height="22" class="NavBar">TEST1</td>
    <td width="10%" height="22" class="NavBar">TEST2</td>
  </tr>
</table>



CSS:

.NavBar {
background-color: #516894;
font-family: Arial, Helvetica, sans-serif;
text-align: center;
font-size: 0.7 em;
color: #ffffff;
}

Ved hver af disse to <td>'s vil jeg gerne have en MouseOver-effect, så baggrundsfarven skifter farve. Derudover skal hele <td>'en fungere som et link.. Jeg kan ikke få det til at fungere - tror det er fordi mit CSS går ind og ødelægger det for mig..

Nogen der kan hjælpe?
Mvh. Niels
Avatar billede mcardle Nybegynder
12. april 2007 - 19:25 #1
Det skulle kunne gøre tricket.


<html>
    <head>
        <title>Color Your TD</title>
        <script type="text/javascript">
            function markBg(id){
                if(document.getElementById){
                    document.getElementById(id).style.backgroundColor = "#ff0000";
                }
                else{
                    document.layer[id].backgroundColor = "#ff0000";
                }
            }
            function unMarkBg(id){
                if(document.getElementById){
                    document.getElementById(id).style.backgroundColor = "#516894";
                }
                else{
                    document.layer[id].backgroundColor = "#516894";
                }
            }
            function makeLink(user_link){
                window.location = user_link;
            }
        </script>
        <style type="text/css">
            .NavBar {
                background-color: #516894;
                font-family: Arial, Helvetica, sans-serif;
                text-align: center;
                font-size: 0.7 em;
                color: #ffffff;
            }
        </style>
    </head>
<body>

<table width="100%" height="100%">
  <tr>
    <td width="3%" height="22" class="NavBar" id="1" onclick="makeLink('http://www.eksperten.dk');" onmouseover="markBg('1');" onmouseout="unMarkBg('1')">TEST1</td>
    <td width="10%" height="22" class="NavBar" id="2" onclick="makeLink('http://www.eksperten.dk');" onmouseover="markBg('2');" onmouseout="unMarkBg('2')">TEST2</td>
  </tr>
</table>

</body>
</html>

//mcardle
Avatar billede loevgaard Praktikant
12. april 2007 - 19:26 #2
<td onmouseover="this.style.backgroundColor='#000000';" onmouseout="this.style.backgroundColor='#ffffff';" onclick="location.href='http://www.google.com';" style="cursor:pointer;">

Noget i den dur
Avatar billede nielspt Nybegynder
12. april 2007 - 20:57 #3
mcardle:

Det ser rigtig fint ud, men savner godt nok, at markøren tér sig som den plejer ved at link, altså bliver til den der pegende hånd.. Kan man få dette frem også?
Avatar billede mcardle Nybegynder
12. april 2007 - 21:06 #4
Det kan man kun i Internet Explorer. Du kan skrive cursor: hand; i dit stylesheet i classen.
Avatar billede loevgaard Praktikant
12. april 2007 - 21:25 #5
Nej, det kan også lade sig gøre i FF -> Se min løsning ... cursor:pointer; ...
Avatar billede mcardle Nybegynder
12. april 2007 - 23:11 #6
Okay... Så brug cursor: pointer; som l0vgaard siger.
Avatar billede mcardle Nybegynder
12. april 2007 - 23:12 #7
Men cursor: hand; virker kun i IE
Avatar billede mcardle Nybegynder
12. april 2007 - 23:12 #8
Nå, men jeg lægger lige et svar også...
Avatar billede roenving Novice
12. april 2007 - 23:53 #9
cursor:hand; er den første udgave, som virker fra IE4, senere fik w3c en standard, der hedder cursor:pointer; ...

-- desværre varede det mange år før M$ implementerede den, og så først i IE6 !-)
Avatar billede mcardle Nybegynder
12. april 2007 - 23:58 #10
Okay, takker for opklaringen. ;o)
Avatar billede nielspt Nybegynder
13. april 2007 - 08:13 #11
Mange tak for svarene!

Når noget har en w3c standard - vil det så sige, at det fungerer ens i IE, FF, Opera mv.?
Avatar billede nielspt Nybegynder
13. april 2007 - 09:58 #12
Lige én ting mere:

Jeg mangler nu, at statusbaren viser linkets sti nu.. Kan man på nogen måde få dette med?? Evt. med noget i retningen af:

onMouseOver="window.status='test.html'; return true" onMouseOut="window.status='';return true"

Mvh. Niels
Avatar billede mcardle Nybegynder
13. april 2007 - 13:09 #13
Så skal din table bare se sådan her ud i stedet for.

<table width="100%" height="100%">
  <tr>
    <td width="3%" height="22" class="NavBar" id="1" onclick="makeLink('http://www.eksperten.dk');" onmouseover="markBg('1'); window.status='temp.php'" onmouseout="unMarkBg('1'); window.status=''">TEST1</td>
    <td width="10%" height="22" class="NavBar" id="2" onclick="makeLink('http://www.eksperten.dk');" onmouseover="markBg('2'); window.status='eks.dk'" onmouseout="unMarkBg('2'); window.status=''">TEST2</td>
  </tr>
</table>
Avatar billede nielspt Nybegynder
13. april 2007 - 15:57 #14
Det vil sgu ikke virke - i hvert fald ikke EI7..
Virker det hos dig/jer?
Avatar billede mcardle Nybegynder
13. april 2007 - 16:19 #15
Ja også i IE7
Avatar billede roenving Novice
13. april 2007 - 16:32 #16
>>nielspt 13/04-2007 08:13:56

-- desværre implementeres de rekommendationer, W3C producerer, i meget forskellig hastighed i de forskellige browsere, så derfor kan man ikke altid sige noget sikkert om det ...

-- og en af de helt sikre årsager til den hastigheds-forskel er browser-producenternes ønske om at få faciliteter til at virke, og derfor sker det tit, at nogle ting træder hinanden over tæerne, f.eks. med cursoren !-)
Avatar billede nielspt Nybegynder
13. april 2007 - 18:02 #17
mcardle:
Det er underligt, for opretter jeg en test.html-fil indeholdende din(e) løsning(er) og trækker filen over i et IE-vindue, virker det som det skal - altså statusbaren viser linkets sti...

Men uploader jeg denne fil til min hjemmeside, er der stadig ingen sti at se i statusbaren..? Det er da mystisk, er det ikke?

(Jeg ved det er en lille ting, men jeg benytter mig af statusbaren konstant)


roenving: Tak for den uddybende kommentar!
Avatar billede mcardle Nybegynder
14. april 2007 - 01:57 #18
Det er fordi du kan slå det fra inde i IE7 tror jeg nok. Mener der er en funktion der hedder noget med javascript ikke ændre statusbar. Prøv at tag et kig under avanceret.
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 JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 03/05/202613:59
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.

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 21:05 Questyle M15i lydforstærker Af valby i Diverse
I går 18:27 Mærkeligt ikon på proceslinjen Af ErikHg i Windows
I går 13:54 Jeg skal have indstaleret Garmin express Af skolevej321 i Andet software
I går 10:48 Back up af foto til ekstern harddisk Af hkprofil i Office & Kontorpakker
10/0517:11 Har glemt navn på min ene konto på eksperten! Af ErikHg i Fri debat
White papers
Flere white papers »