Avatar billede abrjonline Nybegynder
09. november 2008 - 00:16 Der er 7 kommentarer

Foldemenu med forskellige billeder

Hej eksperter.
Ja spørgsmålet er lige ud af landevejen.

jeg øsnker at lave en foldemenu i JS og css og menuen skal folde ud når man køre musen over nogle billeder, disse billeder skal være forskllige med forskellig tekst.

Kan fx ses her:
http://www.abrj.dk/test2/menutest.htm

jeg ønsker billede 1, 2, 3, 4 og 5 skal være forksellige nogle med foldud andre uden.

Den kode jeg har brugt er følgende:
<div id="glowmenu"  class="glowingtabs">
<ul>
<li><a href="forside.htm" title="Forside"><span></span></a></li>
<li><a href="galleri.htm" title="Galleri" rel="dropmenu1_d"><span></span></a></li>
<li><a href="priser.htm" title="Priser" rel="dropmenu2_d"><span></span></a></li>
<li><a href="marked.htm" title="Marked"><span></span></a></li>
<li><a href="links.htm" title="Links"><span></span></a></li>
<li><a href="kontakt.htm" title="Kontakt"><span></span></a></li>
</ul>
</div>

<br class="IEonlybr" />


<!--1st drop down menu -->                                                 
<div id="dropmenu1_d" class="dropmenudiv_d">
<a href="butikken.htm">Butikken</a>
<a href="fester.htm">Fester</a>
<a href="projekter.htm">Projekter</a>
<a href="traef.htm">Træf</a>
<a href="sammtingsafdelingen.htm">Småtingsafdelingen</a>
<a href="karosseriarbejde.htm">Karosseriarbejde</a>
</div>


<!--2nd drop down menu -->                                               
<div id="dropmenu2_d" class="dropmenudiv_d" style="width: 150px;">
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
<a href="http://www.codingforums.com">Coding Forums</a>
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
</div>

<script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("glowmenu", "auto")
</script>


Jeg har dog svært ved at deffinere CSS den kan dog hentes på:
http://www.abrj.dk/test2/iversendrop2.css

Nogle der vil give lidt hjælp?
Avatar billede abrjonline Nybegynder
09. november 2008 - 00:17 #1
jeg ved jeg i mit eksempel kun har brugt 1 billede, men jeg vil gerne igennem css få det til at være forskllige billeder.
Kan bare ikke finde ud af det:P
Avatar billede abrjonline Nybegynder
09. november 2008 - 18:48 #2
http://www.cssplay.co.uk/menus/image_dropdown.html

Denne menu er et perfekt eksempel!
Avatar billede zips Juniormester
09. november 2008 - 19:32 #3
Udfra det link du har lagt er det jo blot at lægge en class på hver link med det billede du ønsker samt et billede til hover.

Vælg vis kilde når du er på siden og se hvordan det virker, her er et eksempel.

De bruger
<li><a href="#nogo41" class="cabbages"><b>Cabbages</b></a></li>

Du kan bruge
<li><a href="forside.htm" class="cabbages" title="Forside">Forside</a></li>

Og så have en class i din css
#glowmenu :link ul li a.cabbages {background:url(greens/cabbage1.jpg);}
#glowmenu :hover ul li a.cabbages {background:url(greens/cabbage2.jpg);}

Men da din style på din menu ikke ser rigtige ud i alle browser nu, ville jeg begynde med at få den til dette :)

Husk IE6 skal der bruges et pngfix, i FF3 vises tab billederne forskudt.
Avatar billede abrjonline Nybegynder
09. november 2008 - 20:17 #4
Hvilke browsere mener du?
Avatar billede zips Juniormester
09. november 2008 - 20:29 #5
Prøv at se din test side i IE6, Firefox, Opera og Safari, så vil du se hvad jeg mener.
Avatar billede abrjonline Nybegynder
10. november 2008 - 10:41 #6
Idntilvidere har jeg testet det i Chrome, Firexox, Safari og IE og der fungere de fint.

Intet problem
Avatar billede abrjonline Nybegynder
10. november 2008 - 10:42 #7
men jeg har selvfølgelig også rettet lidt på tingene siden jeg smed det herind. Fjernet lidt overskudskode osv
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