Avatar billede mjlb Nybegynder
07. oktober 2008 - 12:52 Der er 6 kommentarer

Aktiv billede i menu

Hej

Sidder og roder med en menu som består udelukkende af billeder. Det er lykkedes at få hover effekt vha. onmouseover. Det som der mangler nu er en "aktiv" effekt. Dvs når man trykker på et menupunkt så bliver hover billedet vist hele tiden. Men da det hele er billeder skal der forskellige billeder til hver menu punkt. Jeg er ikke særlig skarp til javascript så kan ikke selv skrive funktionen.

menuen bliver bygget i en usorteret liste

        <ul class="button">
            <li><a href="#nogo"><b><img src="../test/billede1.png" name="test" id="test" onmouseover="MM_swapImage(test,'','../test/billede2.png',1)" onmouseout="MM_swapImgRestore()" alt="" /></b></a></li>
        </ul>

Vil det fungerer med en onclick i <li> og så et lille javascript der fortæller hvilket billede der skal vises? og er der nogen der kan hjælpe mig med sådan et script?
Avatar billede olebole Juniormester
07. oktober 2008 - 14:29 #1
<ole>

nok ikke med den stump kode. Prøv at lægge et link til dokumentet

/mvh
</bole>
Avatar billede mjlb Nybegynder
07. oktober 2008 - 14:36 #2
sorry.. her er hvad der bliver brugt nu:

        <ul class="button">
            <li><a href="#nogo"><b><img src="../test/billede1.png" name="test" id="test" onmouseover="MM_swapImage('test','','../test/billede2.png',1)" onmouseout="MM_swapImgRestore()" alt="" /></b></a></li>
            <li><a href="#nogo"><b><img src="../test/billede3.png" name="test1" id="test1" onmouseover="MM_swapImage('test1','','../test/billede4.png',1)" onmouseout="MM_swapImgRestore()" alt="" /></b></a></li>
            <li><a href="#nogo"><b><img src="../test/billede5.png" name="test2" id="test2" onmouseover="MM_swapImage('test2','','../test/billede6.png',1)" onmouseout="MM_swapImgRestore()" alt="" /></b></a></li>
        </ul>

<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

//-->
</script>
Avatar billede jantzen88 Nybegynder
07. oktober 2008 - 15:45 #3
<ul class="button">
<li><a href="#nogo"><b><img src="../test/billede1.png" name="test" id="test"
onmousedown="MM_swapImage('test','','../test/billede2_MOUSEKLIK.png',1)"
onmouseup="MM_swapImage('test','','../test/billede2.png',1)"
onmouseover="MM_swapImage('test','','../test/billede2.png',1)" onmouseout="MM_swapImgRestore()" alt="" /></b></a></li>
</ul>

Du skal lege med onmousedown og onmouseup.. onmouseup skal være samme billed som onmouseover. og onmouseup er så det billed der bliver vist når man holder mouse knappen nede (onmousedown), slipper man den igen så går den over til (onmouseup)

Håber du kan bruge det til noget :)
Avatar billede mjlb Nybegynder
08. oktober 2008 - 14:40 #4
Puh det er tæt på at virke.. Den fastholder det rigtige billede indtil man hover over menu punktet. Så forsvinder det igen.
Avatar billede mjlb Nybegynder
08. oktober 2008 - 14:44 #5
damn det virker heller ikke hvis man putter koden på flere menupunkter.. den markerer bare alle de punkter man trykker på.
Avatar billede jantzen88 Nybegynder
08. oktober 2008 - 18:01 #6
Det kunne være dejligt hvis du lige kunne smide hele koden eller så jeg kan se siden
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