Søg
Avatar billede trold Nybegynder
06. februar 2003 - 07:57 Der er 5 kommentarer og
1 løsning

Skifte TEXTfarve ved klik

Jeg har lavet følgende

<style>
.Menu {font-size:11px;color: #d3d3d3;font-family: Tahoma;Font-weight: bold;border-bottom:1px Solid #000000;border-right:1px solid #d3d3d3;}
.Menu A:link    {color: #d3d3d3;text-decoration: none;}
.Menu A:visited {color: #d3d3d3;text-decoration: none;}
.Menu A:hover  {color: #d3d3d3;text-decoration: none;}
.Menu A:active  {color: #d3d3d3;text-decoration: none;}

.MenuOver {font-size:11px;color: #d3d3d3;font-family: Tahoma;Font-weight: bold;border-bottom:1px Solid #d3d3d3;border-right:1px solid #d3d3d3;}
.MenuOver A:link    {color: #d3d3d3;text-decoration: none;}
.MenuOver A:visited {color: #d3d3d3;text-decoration: none;}
.MenuOver A:hover  {color: #d3d3d3;text-decoration: none;}
.MenuOver A:active  {color: #d3d3d3;text-decoration: none;}

.MenuSelected {font-size:11px;color: #ffffff;font-family: Tahoma;Font-weight: bold;border-bottom:1px Solid #d3d3d3;border-right:1px solid #d3d3d3;}
.MenuSelected A:link    {color: #ffffff;text-decoration: none;}
.MenuSelected A:visited {color: #ffffff;text-decoration: none;}
.MenuSelected A:hover  {color: #ffffff;text-decoration: none;}
.MenuSelected A:active  {color: #ffffff;text-decoration: none;}


</style>

<table cellpadding=2 cellspacing=0 border=0 width=120 bgcolor=000000>
            <tr><td id=cell1 name=cell1 onclick="this.className='MenuSelected'" onmouseover="this.className='MenuOver'" onmouseout="this.className='Menu'" class=Menu><a href='item1.htm'>Item 1 </a></td></tr>   
            <tr><td class=Menu><IMG SRC="images/MenuSpace.jpg" height=1 width=1></td></tr>   
            <tr><td id=cell2 name=cell2 onclick="this.className='MenuSelected'" onmouseover="this.className='MenuOver'" onmouseout="this.className='Menu'" class=Menu><a href='item2.htm'>Item 2</a></td></tr>   
            <tr><td class=Menu><IMG SRC="images/MenuSpace.jpg" height=1 width=1></td></tr>   
</table>
       
Det vil jeg gerne have hjælp til at få udbygget

Linket skifter rigtig nok farve til hvid ved klik - men da der er en onmouseover/out skifter den hurtig tilbage til oprindelige farve igen

Det jeg har brug for - er at når der klikkes på et punkt bliver textfarven til hvid - og onmouseover/out effekten skal forsvinde på det klikkede punkt

Klikker jeg på et andet punkt skal dette blive hvidt uden onmouseover/out effekten - og det tidligere valgte skal blive gråt igen - og onmouseover/out effekten genetableres
Avatar billede z42cool Nybegynder
06. februar 2003 - 09:10 #1
<html>
<head>
    <style>
    .Menu {font-size:11px;color: #d3d3d3;font-family: Tahoma;Font-weight: bold;border-bottom:1px Solid #000000;border-right:1px solid #d3d3d3;}
    .Menu A:link    {color: #d3d3d3;text-decoration: none;}
    .Menu A:visited {color: #d3d3d3;text-decoration: none;}
    .Menu A:hover  {color: #d3d3d3;text-decoration: none;}
    .Menu A:active  {color: #d3d3d3;text-decoration: none;}
   
    .MenuOver {font-size:11px;color: #d3d3d3;font-family: Tahoma;Font-weight: bold;border-bottom:1px Solid #d3d3d3;border-right:1px solid #d3d3d3;}
    .MenuOver A:link    {color: #d3d3d3;text-decoration: none;}
    .MenuOver A:visited {color: #d3d3d3;text-decoration: none;}
    .MenuOver A:hover  {color: #d3d3d3;text-decoration: none;}
    .MenuOver A:active  {color: #d3d3d3;text-decoration: none;}
   
    .MenuSelected {font-size:11px;color: #ffffff;font-family: Tahoma;Font-weight: bold;border-bottom:1px Solid #d3d3d3;border-right:1px solid #d3d3d3;}
    .MenuSelected A:link    {color: #ffffff;text-decoration: none;}
    .MenuSelected A:visited {color: #ffffff;text-decoration: none;}
    .MenuSelected A:hover  {color: #ffffff;text-decoration: none;}
    .MenuSelected A:active  {color: #ffffff;text-decoration: none;}
    </style>
   
    <script language="javascript">
        var itemCount = 2;
        var activeItem = null;
       
        function overhandler()
        {
            this.className="MenuOver";
        }
       
        function outhandler()
        {
            this.className="Menu";
        }
       
        function clickhandler()
        {
            if (activeItem)
            {
                activeItem.onmouseover = overhandler;
                activeItem.onmouseout = outhandler;
            }
            this.className="MenuSelected";
            this.onmouseover = null;
            this.onmouseout = null;
            activeItem = this;
        }
       
        function initialize()
        {
            var element;
            for (var i=1; i<=itemCount; i++)
            {
                element = document.getElementById("cell" + i);
                element.onmouseover = overhandler;
                element.onmouseout = outhandler;
                element.onclick = clickhandler;
            }
        }
    </script>
</head>

    <body onload="initialize();">
        <table cellpadding=2 cellspacing=0 border=0 width=120 bgcolor=000000>
                    <tr><td id=cell1 name=cell1 onclick="clickhandler(this);" onmouseover="overhandler(this);" onmouseout="outhandler(this);" class=Menu>Item 1</td></tr>
                    <tr><td class=Menu><IMG SRC="images/MenuSpace.jpg" height=1 width=1></td></tr>   
                    <tr><td id=cell2 name=cell2 onclick="clickhandler(this);" onmouseover="overhandler(this);" onmouseout="outhandler(this);" class=Menu>Item 2</td></tr>   
                    <tr><td class=Menu><IMG SRC="images/MenuSpace.jpg" height=1 width=1></td></tr>   
        </table>
    </body>
</html>
Avatar billede trold Nybegynder
06. februar 2003 - 10:58 #2
z42cool >>> Det var nææææsten det jeg skulle bruge - det eneste der mangler er at når jeg klikker på et menupunkt - og dernæst et til så er begge highligted - dvs den fjerner ikke highliten fra det der var klikket på før

Jeg sidder med en MSIE 5.0 browser

Det må være en lille ændring af

function clickhandler()
        {
            if (activeItem)
            {
                activeItem.onmouseover = overhandler;
                activeItem.onmouseout = outhandler;
            }
            this.className="MenuSelected";
            this.onmouseover = null;
            this.onmouseout = null;
            activeItem = this;
        }

der mangler ??
Avatar billede trold Nybegynder
06. februar 2003 - 11:03 #3
Jeg smed activeItem.className="Menu"; ind i if (activeItem) - så spillede det

function clickhandler()
        {
           
            if (activeItem)
            {
                activeItem.onmouseover = overhandler;
                activeItem.onmouseout = outhandler;
                activeItem.className="Menu";
           
            }
            this.className="MenuSelected";
            this.onmouseover = null;
            this.onmouseout = null;
            activeItem = this;
        }
Avatar billede trold Nybegynder
06. februar 2003 - 11:07 #4
Lidt ØV

Det virker ikke i min Netscape 6.0 - er det en major omskrivning eller ??
Avatar billede z42cool Nybegynder
06. februar 2003 - 11:18 #5
Hmmmm.... Jeg sidder ikke med en Netscape 6, men det virker fint i Netscape 7, kan du ikke lige forklare lidt mere om hvad der ikke virker i NS6
Avatar billede trold Nybegynder
06. februar 2003 - 13:47 #6
Daaah - Jeg kopierede scriptet ind i et html dokument hvor grafikken der referer til

tr><td class=Menu><IMG SRC="images/MenuSpace.jpg" height=1 width=1></td></tr>   

Ikke fandtes - at en eller anden mystisk grund - faldt NS på r.... over det

Så snart grafikken blev kopieret ind - såillede det også max i NS

Takker Tusind gange :-)
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 21/08/202610:41
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 dag 21:00 Libre Office Impress Af Frank i Andre styresystemer
I dag 11:47 VB script Af Jenshentze i Word
I dag 11:21 Popup ved opstart Af mort1 i Windows
04/0918:50 Slet lokal konto Af ErikHg i Windows
04/0916:05 Ændre tal i en celle Af xvid i Excel
White papers
Flere white papers »