Notifikationer

Markér alle som læst Log ud

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...

Synes godt om

Keld Nielsen Professor

13. december 2005 - 08:03 #1

Det kan du nemt lave med Sothink DHTMLMenu fra www.sothink.com - ret billigt $40.

Synes godt om

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

Synes godt om

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..

Synes godt om

psykochicken Nybegynder

14. december 2005 - 17:33 #4

..svar kommer her ;o)

/psc

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
Å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.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS