Søg
Avatar billede diff Nybegynder
12. december 2005 - 23:21 Der er 4 kommentarer

En menu med billeder som menupunkter

Hej

Jeg har nu efterhånden gennemsøgt google og kan ikke finde noget om hvordan jeg får lavet en menu på en html side der skal kunne følgende :

* menupunkter skal være billeder
* når man klikker på et menupunt skal billedet skiftes ud (forstil dig et billede med teksten "hjem", når man klikker på det skiftes billedet ud med et hvor teksten står med rød).
* når et menupunkt klikkes på skal alle andre menupunkter ændres til at vise deres oprindelige billede.

herved vil man kunne have to billeder for hvert menupunkt, f.eks. et med en sort tekst og et med en rød tekst. Når et menupunkt er aktivt vises billedet med den røde tekst eller vises billedet med den sorte tekst.

Hvordan laver jeg det, løsningen må benytte javascript, dhtml og php.

God fornøjelse...
Avatar billede Keld Nielsen Professor
13. december 2005 - 08:03 #1
Det kan du nemt lave med Sothink DHTMLMenu fra www.sothink.com - ret billigt $40.
Avatar billede psykochicken Nybegynder
13. december 2005 - 18:18 #2
Hvis du vil have 2 billeder til hvert menupunkt kunne du prøve noget ala:

<script type="text/javascript">
function skift(elm){
    var a = document.getElementsByTagName("img");
    for (var i=0; i<a.length; i++) {
        if (a[i].className.indexOf("pic")!=-1) {
            a[i].src = a[i].id + ".jpg";
        }
    }
    elm.src = elm.id + "_red.jpg";
}
</script>
<style type="text/css">
.pic {
  width:100px;
  height:40px;
  cursor:pointer;
}
</style>
</head>

<body>
<div>   
    <img class="pic" id="menu0" src="menu0.jpg" onmousedown="skift(this)">
    <img class="pic" id="menu1" src="menu1.jpg" onmousedown="skift(this)">
    <img class="pic" id="menu2" src="menu2.jpg" onmousedown="skift(this)">
    <img class="pic" id="menu3" src="menu3.jpg" onmousedown="skift(this)">
    <img class="pic" id="menu4" src="menu4.jpg" onmousedown="skift(this)">
</div>

de 2 billeder skal så til id=menu0 hedde menu0.jpg og menu0_red.jpg...osv

...det koster gratis ;o)

/psc
Avatar billede diff Nybegynder
13. december 2005 - 20:57 #3
psykochicken det virker sku.... Jeg har modificerede det lidt men efter din tanke.. 

<pre>
<script>
        var W3CDOM = (document.createElement && document.getElementsByTagName);

        var active = new Array();
        var inactive = new Array();
       
        window.onload = init;
       
        function init()
        {
            if (!W3CDOM) return;
            var nav = document.getElementById('menu');
            var imgs = nav.getElementsByTagName('img');
            for (var i=0;i<imgs.length;i++)
            {
                imgs[i].onclick = clicked;
                var suffix = imgs[i].src.substring(imgs[i].src.lastIndexOf('.'));
                inactive[i] = new Image();
                inactive[i].src = imgs[i].src;
                active[i] = new Image();
                active[i].src = imgs[i].src.substring(0,imgs[i].src.lastIndexOf('.')) + "-o" + suffix;
                imgs[i].number = i;
            }
        }
       
        function clicked()
        {
            var nav = document.getElementById('menu');
            var imgs = nav.getElementsByTagName("img");
            for (var i=0; i<imgs.length; i++) {
                imgs[i].src = inactive[i].src;
            }
           
            this.src = active[this.number].src;
        }
        </script>
</pre>

og

<pre>
<div id="menu">
            <table>
                <tr>
                    <td><a href="#"><img src="res/SP_dk-hjem.gif" /></a></td>
                </tr>
                <tr>
                    <td><a href="#"><img src="res/SP_dk-ideg.gif" /></a></td>
                </tr>
            </table>
        </div>
</pre>

Send lige et svar, hvis du vil have nogle points..
Avatar billede psykochicken Nybegynder
14. december 2005 - 17:33 #4
..svar kommer her ;o)

/psc
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
Å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
Sæt vindue størrelse Af poulmadsen i JavaScript 1 08/10/202417:18 13/10/202412:33
Opgavestyring Af ingeman i JavaScript 1 15/09/202416:06 15/09/202420:40
Returner ikke alt Af ingeman i JavaScript 13 26/06/202414:40 01/07/202417:00
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
19 min siden #OVERLØB! Af ABE15 i Excel
I dag 15:17 proxy server Af dcedata1977 i Andet netværk
I dag 12:02 Kan ikke komme på nettet med nogen browser Af Malm i Windows
I går 16:11 ny til python Af dcedata1977 i Python
17/1213:47 Apps virker ikke korrekt. Skal jeg købe ny tablet ? Andre muligheder ? Af annam i Apps til Android
White papers
Flere white papers »