/ Forside/ Teknologi / Internet / Hjemme sider / Spørgsmål
Login
Glemt dit kodeord?
Brugernavn 

Kodeord  


Reklame
Top 10 brugere
Hjemme sider
#NavnPoint
molokyle 23766
bentjuul 7763
Klaudi 7497
BjarneD 4584
severino 4460
Manse9933 4366
disken 3947
natmaden 3885
miritdk 3593
10  refi 3578
Menu
Fra : Dudder
Vist : 645 gange
200 point
Dato : 25-01-06 20:03

Hej
Er der nogen, der gider forklare mig, hvordan jeg lave en menu som den på f.eks. denne hjemmeside www.aalflasker.dk ?

vh-
Dudder

 
 
Kommentar
Fra : bentjuul


Dato : 25-01-06 20:18

Det kan lavet med en onmouserover og en mouseout effekt og to image for hvert menupunkt.

Du kan også få en effekt uden image, men med menupunkterne i tekst, se her

Citat
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style type="text/css">
<!--
a:link {
   color: #00FF00;
}
a:hover {
   color: #FFFF00;
}
-->
</style></head>

<body>
<p>&nbsp;</p>
<p><a href="http://www.dr.dk" target="_blank">DR</a></p>
<p><a href="http://www.tv2.dk">TV2</a></p>
<p>&nbsp;</p>
</body>
</html>


Kommentar
Fra : Dudder


Dato : 25-01-06 21:43

Det blev jeg ikke meget klogere af ????

Kommentar
Fra : molokyle


Dato : 25-01-06 23:03

Den er ikke bare laver med eventen onmouseover="...";

Den benytter også direkte manipulation af HTML DOM : http://www.w3schools.com/htmldom/default.asp

..med disse metoder kan man lave ALT til links. Selv en alm. tekst omgivet af in-line markøren SPAN:

Citat
<span style="color:black;" onmouseover="this.style.color='red';this.style.cursor='pointer'" onmouseout="this.style.color='black';" onclick="this.location.href='http://www.dmi.dk';">DMI</span>


</MOLOKYLE>

Kommentar
Fra : molokyle


Dato : 25-01-06 23:05

Ups... et this. for meget
Kode
<span style="color:black;" onmouseover="this.style.color='red';this.style.cursor='pointer'" onmouseout="this.style.color='black';" onclick="location.href='http://www.dmi.dk';">DMI</span>


</MOLOKYLE>

Kommentar
Fra : molokyle


Dato : 25-01-06 23:13

Faktisk kan man nøjes at bruge et billede der jo som bekendt indsættes med en enkelt <img... /> markør:
Kode
<img src="[sti]mit_link_billede.jpg" style="color:black;border:0px;" onmouseover="this.src.='[sti]mit_mouseover_billede.jpg';this.style.cursor='pointer'" onmouseout="this.src='[sti]mit_link_billede.jpg';" onclick="location.href='http://www.dmi.dk';" />


..man skal selfølgelig selv indsætte stien [sti], som fortæller hvor billedet ligger relativt til HTML dokumentet eller i forhold til rodelementet / , samt selv erstatte de 2 billeder: mit_link_billede.jpg og mit_mouseover_billede.jpg med sine egne billedfiler.

Piece of cake...

</MOLOKYLE>


Kommentar
Fra : molokyle


Dato : 25-01-06 23:47

Hovsa... et punktum = '.' og en unødvendig sort tekstfarve for meget

Her har jeg indsat billederne : folder.gif og openfolder.gif (du skal selvfølgelig indsætte dine egne billeder) og lagt dem i samme bibliotek som HTML filen med <img... /> markøren:

Kode
<img src="folder.gif" style="border:0px;" onmouseover="this.src='openfolder.gif';this.style.cursor='pointer'" onmouseout="this.src='folder.gif';" onclick="location.href='http://www.dmi.dk';" />


..men for de der har slået scripting fra ..eller ikke tillader det ved advarslen (=den gule blok i toppen af browservinduet) i Windows XS SP2, tjaeh... så må man lave samme 'nummer i ren CSS.

Her et eksempel der virker hos alle med alle typer browser, scripting slået til eller ej :

http://www.cssplay.co.uk/menus/flickerfree.html

..fra : http://www.cssplay.co.uk/

</MOLOKYLE>

Kommentar
Fra : molokyle


Dato : 25-01-06 23:50

Er der også kommet en Windows XS ??? ...XP ...for dælen da også

</MOLOKYLE>

Kommentar
Fra : sofus.dk


Dato : 27-01-06 10:25

Du kan hente et program her, der kan lave MouseOver effekt.
Men det kan sikkert ikke lave det du tænker på. Som flash.
Så skal du op i dyrere programmer
http://www.steenmartinsen.dk/programmer/Mouseover.zip
Eksempler
http://www.dreamingsoft.com/index.htm?ref=123flashmenu
http://www.amarasoftware.com/flash-menu-builder.htm
Ellers skal du søge på www.download.dk

Kommentar
Fra : molokyle


Dato : 27-01-06 10:57

sofus.dk -> Hvem har givet dig den idé det skulle være flash? Der benyttes et alm. link (anchor) på omtalte side:

Citat
<a href="forside.htm" onmouseover="document['fpAnimswapImgFP1'].imgRolln=document['fpAnimswapImgFP1'].src;document['fpAnimswapImgFP1'].src=document['fpAnimswapImgFP1'].lowsrc;" onmouseout="document['fpAnimswapImgFP1'].src=document['fpAnimswapImgFP1'].imgRolln">
<img border="0" src="skabeloner/kn-forside.gif" id="fpAnimswapImgFP1" name="fpAnimswapImgFP1" dynamicanimation="fpAnimswapImgFP1" lowsrc="skabeloner/kn-forside1.gif" width="169" height="46"></a>


Jeg vil prøve at forklare hvad der foregår i første menupunkt (..som principielt er mage til de øvrige):

<a href="forside.html"...> ... </a> delen er et alm. link til forsiden.
<img scrc="skabeloner/kn-forside.gif" ...> delen er linkbilledet. (parameteren border=0 betyder at der ikke skal tegnes en ramme rundt om grafikken. Den korrekte måde at skrive dette på er : style="border:0px;")

Så er der de forskellige parametre hvoraf to af disse er nogle, som kun en host (hjemmesideudbyder) der understøtter frontpage extensions kan tolke:

dynamicanimation="fpAnimswapImgFP1" lowsrc="skabeloner/kn-forside1.gif"

Så er der linkets events onmouseover="..." og onmouseout=".." som giver sig selv

Indholdet i disse events er en manipulation frontpage extensions i HTML DOM (documet object model) som fortæller at event'ene skal ændre det billede, som er indsat som linkbillede. Link billedet er tildelt et navn, nemlig : id="fpAnimswapImgFP1" og det er så dette billede der skal ændres ved mouseover og mouseout på linket (anchor). Det der skal ændres er billedet source (hvor billedet ligger og hvad det hedder) src og lowsrc, som dynamisk skifter plads alt efter om musen er over linket eller ej.

I princippet er koden fuldkommen identisk med mit eksempel fra: Dato : 25-01-06 23:47 blot med den forskel at jeg ikke har brugt en omsluttende anchor markør, men tilgår HTML DOM objektet 'location.href' (svarer til et links parameter href="") direkte og derfor selv har måtte indsætte 'pegefingeren' som vises ved links (cursor='pointer')

Som jeg skrev tidligere: A piece of cake...

</MOLOKYLE>

Kommentar
Fra : sofus.dk


Dato : 27-01-06 11:05

molo
Det er jeg klar over, men jeg tror spørger, ønsker at lave noget, der er nemt, og lige til at gå til.
Og ikke afskrækkes af Html koder.



Kommentar
Fra : molokyle


Dato : 27-01-06 11:12

Hvorfor tror du dét? Der spørges jo til:
Citat
Er der nogen, der gider forklare mig, hvordan jeg lave en menu som den på f.eks. denne hjemmeside


..og det er hermed gjort

At kaste et link ind her til et flash menusystem kan næppe kaldes at forklare noget som helst

</MOLOKYLE>

Kommentar
Fra : molokyle


Dato : 27-01-06 11:18

Faktisk kan spørgeren kopiere min kode Dato : 25-01-06 23:47 direkte af. Indsætte sine egne billeder (*.jpg, *.gif eller *.png) og skrive sine egne linkadresser ( http:// ) ind i koden og....

Voila: En menu mage til den på allflasker

</MOLOKYLE>

Kommentar
Fra : bentjuul


Dato : 27-01-06 11:19

Jeg tror at spørgeren først skulle læse lidt mere om hjemmesider her http://www.html.dk/tutorials/html/ for det hjælper ikke særligt meget at have en masse programmer hvis man ikke ved ret meget om det grundlæggende.

//bentjuul

Kommentar
Fra : sofus.dk


Dato : 27-01-06 11:26

Der kan vi da være enig

Accepteret svar
Fra : molokyle

Modtaget 200 point
Dato : 27-01-06 12:04

Hvis man øsker en 'let' løsning uden javascript events der manipulerer HTML DOM?

Så er der en fin løsning her : http://www.cssplay.co.uk/menus/menu5teen.html

Her bliver 'knappen' oven i købet nede når et menupunkt er valgt. For at se hvorledes det er lavet skal du højreklikke på siden Dudder og vælge ; Vis kilde

Så kan du se CSS koden og hvorledes den i eksemplet bruges i HTML koden længere nede. Den ser således ud:

CSS:
Kode
<style type="text/css">

#menu {position:relative; margin-top:20px; left:5px; display:block; width:350px;}
#menu a.button, #menu a.button:visited {display:block; width:150px; height:30px; background:url(buttons.gif); background-position:top left; background-color:transparent; text-align:center; color:#000; line-height:28px; text-decoration:none; font-family:arial, sans-serif; font-weight:bold; margin-top:5px;}
#menu a.button:hover {background-position:0 -30px; line-height:31px; overflow:hidden;}
#menu a.button:active {background-position:0 -60px;}
</style>


HTML:
Kode
<div id="menu">
      <a class="button" href="#nogo" title="">Item one</a>
      <a class="button" href="#nogo" title="">Item two</a>
      <a class="button" href="#nogo" title="">Item three</a>
      <a class="button" href="#nogo" title="">Item four</a>
      <a class="button" href="#nogo" title="">Item five</a>
</div>


</MOLOKYLE>

Kommentar
Fra : molokyle


Dato : 27-01-06 12:09

Ps. Hvor der i ovenstående HTML kode står : #nogo
..skal du selv indsætte dine link adresser.

Billedfilen 'buttons.gif' henter du på normal vis på siden over menu eksemplet.
Altså : http://www.cssplay.co.uk/menus/buttons.gif

</MOLOKYLE>

Kommentar
Fra : amandaKanDu


Dato : 28-01-06 14:11

Du kan sagtens undgå html koder, og behøver ikke vide ret meget om dem, vel- og mærke, hvis du har det rigtige program wysiwyg (what you see, is what you get)

Det link du omtaler er hjemmesiden lavet med programmet Microsoft Frontpage 6
I menulinien vælger du Indsæt - Indsæt Interaktiv knap og følger instruktionerne.

Amanda

Kommentar
Fra : bentjuul


Dato : 28-01-06 15:14

Skal man bruge en wysiwyg så kan denne gratis editor snildt konkurrere med frontpage http://nvu.com/index.html men nu gik spørgsmålet på hvordan en bestemt menu skulle laves og den kan ikke laves med knapper, men skal laves at 2 billeder til hvert menupunkt, som tydeligt er beskrevet i flere tidligere indlæg.

//bentjuul

Kommentar
Fra : molokyle


Dato : 28-01-06 17:00

Korrekt benjuul

amandaKanDu -> Man gå ud fra at spørgsmålet ønskes besvaret på baggrund af spørgsmålets ordlyd ...og ikkepå baggrund af 'fornemmelser' eller 'antagelser' ?

Ellers bliver det jo det rene gætværk?

..men Ok. du forklarer jo så udmærket at det kan laves med Frontpage

</MOLOKYLE>





Kommentar
Fra : molokyle


Dato : 28-01-06 17:04

Ps. amandaKanDu -> Hvorledes tror du da at Frontpage laver 'knasppen' ???

Fortæl, fortæl....

Hvis du har en 'alternativ' forklaring ? ..lytter jeg i åndeløs sænding

</MOLOKYLE>

Kommentar
Fra : Dudder


Dato : 28-01-06 18:49

Hej alle

Jeg siger tak for alle de gode råd, jeg har nu fået en ide om, hvad der skal til, jeg må prøve mig frem. Min nuværende menu ser sådan ud www.vapsen.dk - jeg synes måske, at den er en smule kedelig.

vh.
Dudder

Godkendelse af svar
Fra : Dudder


Dato : 28-01-06 18:50

Tak for svaret molokyle.

Kommentar
Fra : molokyle


Dato : 29-01-06 08:55

Du kan sagtens bruge den kode du har nu, men blot udskifte knap-grafikken til noget mere spændende i din menu.htm fil.

I f.eks. menupunktet 'Lidt om os' udskifter du blot; button6D.gif, button6e.gif og button6F.gif

..som repræsentere link (samt onmouseup), onmouseover og onmousedown event'ene

</MOLOKYLE>

Du har følgende muligheder
Eftersom du ikke er logget ind i systemet, kan du ikke skrive et indlæg til dette spørgsmål.

Hvis du ikke allerede er registreret, kan du gratis blive medlem, ved at trykke på "Bliv medlem" ude i menuen.
Søg
Reklame
Statistik
Spørgsmål : 173468
Tips : 31650
Nyheder : 719565
Indlæg : 6382401
Brugere : 218248

Månedens bedste
Årets bedste
Sidste års bedste