Avatar billede peter_jensen Nybegynder
08. november 2007 - 19:22 Der er 7 kommentarer og
1 løsning

Menu med onmousedown billedskift

Jeg har en menu der ser ca. sådan her ud:

<a href="index01.htm"><img src="pic01.png" /> Link1</a>
<a href="index02.htm"><img src="pic02.png" /> Link2</a>
<a href="index03.htm"><img src="pic03.png" /> Link3</a>
<a href="index04.htm"><img src="pic04.png" /> Link4</a>

Jeg vil gerne have at der ved mouseover fremkommer et ekstra billed efter teksten "LinkX", som så også bagefter er der sålænge linktet er aktivt...altså hvis man har klikket på linket, så man kan se hvor på siden man er.

Er der nogen der kan hjælpe mig med det?
Avatar billede roenving Novice
09. november 2007 - 02:34 #1
Nej !-)

-- når du trykker på linket, vil det jo være en helt ny side, der vises, og der kan du jo bare have det ekstra billede ...

-- men jeg har set en relativ dynamisk måde at gøre det på, hvor et javascript traverserer alle links, og hvis det møder et link med en href, der matcher aktuel side, så sætter den en anden klasse på (fy, fy, skamme, klasseskift on-the-fly !-)

-- så du kunne jo sætte billedet på med display:none; og så bruge den algoritme !o]
Avatar billede peter_jensen Nybegynder
09. november 2007 - 08:56 #2
Jep, men havde på sigt lidt tænkt mig at inkludere menuen i en .asp side :oD
Selve delen med at den husker hvor den er, kunne jeg egentlig bare lave i asp, men kan du så evt. hjælpe med blot at få hover effekten til at virke i menuen. Altså sådan at jeg skifter 2 billeder på én gang ved mouseover.

eks.
<a href="index04.htm"><img src="pic01.png" /> Link4</a><img src="pic02.png" />
bliver til noget i retning af:
<a href="index04.htm"><img src="pic03.png" /> Link4 <img src="pic04.png" /></a>

Billederne er faktisk en form for grafiske parenteser omkring mine links, som så ændre sig ved hover/mouseover.

Er ikke så bekendt med JavaScript endnu, så derfor ville jeg gerne ha haft en ren JavaScript/css løsning =:o)
Avatar billede roenving Novice
09. november 2007 - 15:20 #3
<script type="text/javascript">
function hoverLink(link,act){
  var pics = link.getElementsByTagName("img");
  pics[0].setAttribute("src", "pic0" + (act?"3":"1") + ".png");
  pics[1].setAttribute("src", "pic0" + (act?"4":"2") + ".png");
}
</script>

<a href="index04.htm" onmouseover="hoverLink(this,true);" onmouseout="hoverLink(this,false);"><img src="pic01.png" /> Link4 <img src="pic02.png" /></a>
Avatar billede roenving Novice
09. november 2007 - 15:20 #4
PS. Skrevet lige ind her, og absolut utestet !-)
Avatar billede peter_jensen Nybegynder
10. november 2007 - 15:22 #5
Super...det ser ud til at spille fint :o)

Hvis du lige sender et svar...så kviterer jeg gerne med nogle points...
Avatar billede roenving Novice
11. november 2007 - 04:26 #6
Velbekomme '-)
Avatar billede peter_jensen Nybegynder
11. november 2007 - 16:47 #7
Jeg siger tusind tak =:o)
Avatar billede roenving Novice
12. november 2007 - 14:02 #8
-- og jeg takker 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