Avatar billede d.kryger Praktikant
27. september 2004 - 14:06 Der er 12 kommentarer og
1 løsning

Billede skifter ved klik

Hej Eksperter.

Jeg har en side, hvor jeg har et plus 'plus.gif'. Når musen er henover billedet, skal den vise 'plus_over.gif'.

Dette kan jeg godt få til at lade sig gøre sådan:
<a href='java script:void(0)' class="menu" onMouseover='gruppenavn.src="plus_over.gif"' onMouseout='gruppenavn.src="plus.gif"' onclick='toggleMenu(1)'><img border="0" src="plus.gif" width="14" height="11" name="gruppenavn"></a>

Når man så klikker på det, skal den vise 'minus_over.gif', indtil man tager musen fra billedet igen, så skal den nemlig vise 'minus.gif'

Kan dette lade sig gøre?
Avatar billede roenving Novice
27. september 2004 - 14:12 #1
<img border="0" src="plus.gif" width="14" height="11" name="gruppenavn" onMouseover="this.src=this.src.replace(/^.*(\.gif)$/i,'_over.gif');" onMouseout="this.src=this.src.replace(/^.*(_over\.gif)$/i,'.gif');" onclick='toggleMenu(1)'>

-- og minus_over skal du selvfølgelig indsætte i toggleMenu-funktionen, da man jo ikke kan klikke uden en mouseover !-)
Avatar billede d.kryger Praktikant
27. september 2004 - 14:14 #2
Hvad skal jeg så sætte ind i "toggleMenu(1)"?
Avatar billede roenving Novice
27. september 2004 - 14:21 #3
-- jeg lavede ikke mere ved den, da jeg pr. refleks fjernede det overflødige a-tag, så jeg skal lige vide noget mere, nemlig om der også er en tekst ved siden af dine plusser og minusser, samt hvad toggleMenu laver (folder ud og ind kan jeg regne ud, men hvordan !-)
Avatar billede d.kryger Praktikant
27. september 2004 - 14:25 #4
ToggleMenu:
<script language="javascript">
<!--

function GetElement(strElement)
{
    if (document.getElementById)
    {
        // IE5+, Netscape 6, Mozilla
        return (document.getElementById(strElement));
    }
    else if (document.all)
    {
        // IE4
        return (eval("document.all." + strElement));
    }
    else
    {
        // Ingen af ovenstående
        return (null);
    }
}

function toggleMenu(strMenuID)
{
  objCurrentShort = GetElement("Menu"+strMenuID+"Short");
  objCurrentShort.style.display = (objCurrentShort.style.display=="none" ? "block" : "none");

  objCurrentLong = GetElement("Menu"+strMenuID+"Long");
  objCurrentLong.style.display = (objCurrentLong.style.display=="none" ? "block" : "none");
}
// -->
</script>

<td width="14" height="17" valign="top"><font face="Verdana" size="1" color="#FFFFFF"><a href='java script:void(0)' class="menu" onMouseover='gruppenavn.src="/grafik/firkanter/plus_over.gif"' onMouseout='gruppenavn.src="/grafik/firkanter/plus.gif"' onclick='toggleMenu(1)'><img border="0" src="/grafik/firkanter/plus.gif" width="14" height="11" name="gruppenavn"></a></font></td>
<td width="336" height="17"><font face="Verdana" size="1" color="#FFFFFF"><a href='java script:void(0)' class="menu" onMouseover='gruppenavn.src="/grafik/firkanter/plus_over.gif"' onMouseout='gruppenavn.src="/grafik/firkanter/plus.gif"' onclick='toggleMenu(1)'><b>Gruppenavn (0)</b></a><br></font>
<div style='display: block;' id='Menu1Short'></div>
<div style='display: none;' id='Menu1Long'>
<font face="Verdana" size="1" color="#FFFFFF"><img border="0" src="/grafik/afstand.gif" width="1" height="2"><br>
Navn, tlf.<br>
Navn, tlf.<br>
Navn, tlf.<br>
Navn, tlf.<br>
Navn, tlf.<br>
Navn, tlf.<br>
Navn, tlf.<br>
Navn, tlf.<br></font>
</div>
</td>
Avatar billede roenving Novice
27. september 2004 - 14:46 #5
Absolut utestet, men hvis der skulle være røget en enkelt fejl med, opdager du den vist hurtigt !-)

<script type="text/javascript">
<!--

function GetElement(strElement){
    if (document.getElementById){
        // IE5+, Netscape 6, Mozilla
        return (document.getElementById(strElement));
    }else if (document.all){
        // IE4
        return (document.all[strElement]);
    }else{
        // Ingen af ovenstående
        return (null);
    }
}

function toggleMenu(strMenuID,elm){
  objCurrentShort = GetElement("Menu"+strMenuID+"Short");
  objCurrentShort.style.display = (objCurrentShort.style.display!="block") ? "block" : "none";

  objCurrentLong = GetElement("Menu"+strMenuID+"Long");
  objCurrentLong.style.display = (objCurrentLong.style.display!="block") ? "block" : "none";
  if(elm.firstChild.tagName=='IMG'){
    elm.firstChild.src = (objCurrentLong.style.display!="block")?"plus_over.gif":"minus_over.gif";
  }else{
    elm.previousSibling.firstChild.src = (objCurrentLong.style.display!="block")?"plus_over.gif":"minus_over.gif";
  }
}
// -->
</script>

<td style="width:14px;height:17px;font-size:xx-small;" onMouseover="this.firstChild.src=this.firstChild.src.replace(/^.*(\.gif)$/i,'_over.gif');" onMouseout="this.firstChild.src=this.firstChild.src.replace(/^.*(_over\.gif)$/i,'.gif');" onclick="toggleMenu(1,this)" valign="top"><img border="0" src="/grafik/firkanter/plus.gif" width="14" height="11" name="gruppenavn"></td>
<td style="width:336px;height:17px;font-family:verdana,sans-serif;font-size:xx-small;color:#fff;font-weight:bold;" onMouseover="this.previousSibling.firstChild.src=this.previousSibling.firstChild.src.replace(/^.*(\.gif)$/i,'_over.gif');" onMouseout="this.previousSibling.firstChild.src=this.previousSibling.firstChild.src.replace(/^.*(_over\.gif)$/i,'.gif');" onclick="toggleMenu(1,this)">Gruppenavn (0)<br>
<div style='display: block;' id='Menu1Short'></div>
<div style='display: none;font-family:verdana,sans-serif;font-size:xx-small;color:#fff;' id='Menu1Long'>
<img border="0" src="/grafik/afstand.gif" width="1" height="2"><br>
Navn, tlf.<br>
Navn, tlf.<br>
Navn, tlf.<br>
Navn, tlf.<br>
Navn, tlf.<br>
Navn, tlf.<br>
Navn, tlf.<br>
Navn, tlf.<br>
</div>
</td>
Avatar billede d.kryger Praktikant
27. september 2004 - 15:05 #6
Hej...

Den finder ikke de rigtig billeder, men kan du ikke lave den om, så den har 'a href' igen, da jeg ikke rigtig kan finde hovde eller hale koden nu?
Avatar billede d.kryger Praktikant
27. september 2004 - 16:31 #7
Jeg har tilrettet i script, så nu finder den nogle gange billederne...

Nu tror jeg kun at den er gal her: (/^.*(\.gif)$/i,'_over.gif')
Kan dette ikke laves om til alm. kode?
Avatar billede roenving Novice
27. september 2004 - 16:35 #8
Argh, det er jo også forkert:

(/(\.gif)$/i,'_over.gif')
Avatar billede d.kryger Praktikant
27. september 2004 - 19:43 #9
Hej roenving...

Kan du ikke lave det om til 'a href'?
Så kan jeg bedre forstå det?
Avatar billede d.kryger Praktikant
28. september 2004 - 14:59 #10
roenving, læg et svar og du får point.
Avatar billede roenving Novice
28. september 2004 - 15:11 #11
Oki '-)
Avatar billede roenving Novice
28. september 2004 - 15:11 #12
;O)
Avatar billede roenving Novice
28. september 2004 - 15:19 #13
-- og tak for point ;~}
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