CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

pfp Nybegynder

19. juli 2001 - 12:17 Der er 21 kommentarer og
1 løsning

Mouseover menu

Hejsa

Er der nogen der kan lave en simpel mouseover menu til mig? Det skal være sådan, at når jeg kører musen henover et billede på fx 3x1cm kommer der nogle andre billeder af samme størrelse frem nedenunder som jeg kan bruge til links. Ligesom menuen på www.tv2.dk og www.netcoders.dk men bare med små billeder i stedet for.

Med venlig hilsen
Peter F. Poulsen

Synes godt om

Jman Praktikant

19. juli 2001 - 12:21 #1

det er ikke billeder, der kommer frem - det er ren html

men du kan se en masse eksempler på hvordan du laver det på http://www.dynamicdrive.com/dynamicindex1/index.html

Synes godt om

NanoQ Nybegynder

19. juli 2001 - 12:23 #2

Prøv engang at se denne: http://home5.swipnet.se/~w-53118/gene.html

Her en lille tutorial: http://www.groan-zone.net/jscript/mouseover.html

og et lille eksempel: http://www.pitchmark.demon.co.uk/jseg02.htm

Ser du sourcen, tror jeg nemt du kan gennemskue den, og lave det du ønsker selv:

<html>
<head>
<title>Javascript - OnMouseOver example</title>
</head>
<body>
<p>Point at the image. He should start to dance on mouse over.</p>
<a href=\"index.htm\"
onMouseOver=\'document.images.dance.src=\"dance.gif\"\'
onMouseOut=\'document.images.dance.src=\"dance_static.gif\"\'>
<img src=\'dance_static.gif\' name=\'dance\' alt=\"dance\" width=32 height=32></a>

<br><br>
<a href=\"jsindex.htm\"> More java script examples </a>
<br>

</body>
</html>

NanoQ

Synes godt om

Jman Praktikant

19. juli 2001 - 12:28 #3

NanoQ - jeg tror han leder efter en dropdown - menu

Synes godt om

pfp Nybegynder

19. juli 2001 - 12:38 #4

jeg leder ikke efter den dropdown menu, med sådan en listeboks-ting. Nærmere noget der ligner menuen på www.smartstone.com oppe i højre hjørne, det behøver slet ikke være så avanceret at det glider ind, men på den måde, håber i forstår hvad jeg tænker på.

Synes godt om

and_ Nybegynder

19. juli 2001 - 12:48 #5

Beklager pfp - Det kaldes nu en dropdown sådan en menu....

Synes godt om

pfp Nybegynder

19. juli 2001 - 12:49 #6

ok, det må i undskylde, jeg troede bare at en dropdown menu, var sådan en comboboks ting.

Synes godt om

Jman Praktikant

19. juli 2001 - 12:53 #7

det er bare en dropdown *S*
Check denne: http://www.dynamicdrive.com/dynamicindex1/topnavbar.htm

demoen er i toppen af siden og der står hvor du skal smide koden ind på din side

Synes godt om

pfp Nybegynder

19. juli 2001 - 12:56 #8

superior-> ja det kan måske bruges, men jeg vil helst have det med billeder i stedet.

Synes godt om

and_ Nybegynder

19. juli 2001 - 12:56 #9

Synes godt om

htorp Nybegynder

19. juli 2001 - 17:50 #10

Skal der være billede for hver link eller må billedet være baggrund for f.eks. 4 links?

Synes godt om

razmuz_dk Nybegynder

19. juli 2001 - 19:27 #11

http://www.rzc.dk/dropdown.php

pfp -> Let at redigere!!

Bare smid et billede ind hvor der står \"Login\" i sourcen fks? - skriv hvis du er i tvivl.

Synes godt om

pfp Nybegynder

19. juli 2001 - 20:17 #12

razmuz.dk -> det var præcis det jeg ledte efter. Mange tak.

/pfp

Synes godt om

razmuz_dk Nybegynder

19. juli 2001 - 20:50 #13

S\'lidt! :o] tark for points

Synes godt om

pfp Nybegynder

19. juli 2001 - 21:13 #14

razmuz.dk -> jeg vil meget gerne have dig til at forklare mig lidt. Prøv at se på www.votus.dk/test.htm

Hvis du kører hvor der står overskrift-2 og overskrift-3 kan du se at menuen nedenunder kommer lidt skævt for, kan jeg ikke rette det?

/pfp

Synes godt om

razmuz_dk Nybegynder

19. juli 2001 - 21:21 #15

Hm, det er fordi du laver lidt for lange menu punkter - men det kan let løses!!

Det med at den \"let\" kan redigeres var vist lidt en løgn! - men hvis du får yderligere problemer så bare post dem her! :o]

<html>

<script Language=\"JavaScript\">

function menu(x,m) {

if (x==\"0\") {

document.all[\"menu\"+m].style.visibility = \"visible\";

}

if (x==\"1\") {

document.all[\"menu\"+m].style.visibility = \"hidden\";

}

}

</script>

<head>

<style>
table,td {
font-size:10;
font-family:verdana;
}

A:link {color:white;text-decoration:none;}

A:visited {color:white;text-decoration:none;}

A:active {color:gray;text-decoration:none;}

A:hover {color:gray;text-decoration:none;}

</style>

</head>

<body>

<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">
<tr>

<td bgcolor=\"51607C\" width=\"100\" onmouseover=\"menu(0,1)\" onmouseout=\"menu(1,1)\">

<font color=\"FFDE00\"><b><font style=\"cursor: hand\">Overskrift-1</font></b></font>

</td>

<td bgcolor=\"51607C\" width=\"100\" onmouseover=\"menu(0,2)\" onmouseout=\"menu(1,2)\">

<font color=\"FFDE00\"><b><font style=\"cursor: hand\">Overskrift-2</font></b></font>

</td>

<td bgcolor=\"51607C\" width=\"100\" onmouseover=\"menu(0,3)\" onmouseout=\"menu(1,3)\">

<font color=\"FFDE00\"><b><font style=\"cursor: hand\">Overskrift-3</font></b></font>

</td>

</tr>
<tr>
<td colspan=\"3\">

<div id=\"menu1\" onmouseover=\"menu(0,1)\" onmouseout=\"menu(1,1)\" id=\"menu1\" style=\"cursor:hand;position:absolute;visibility:hidden;background-color:19263E;width:100;\">

<table border=\"0\" width=\"100%\" style=\"border: 1 solid #000000\" cellspacing=\"0\" cellpadding=\"3\">
<tr>
<a href=\"Default.asp\"><td width=\"100%\"><font size=\"1\" face=\"Verdana\" color=\"#FFFFFF\">Velkommen</font></td></a>
</tr>
</table>

<table border=\"0\" width=\"100%\" style=\"border: 1 solid #000000\" cellspacing=\"0\" cellpadding=\"3\">
<tr>
<a href=\"Profil.asp\"><td width=\"100%\"><font size=\"1\" face=\"Verdana\" color=\"#FFFFFF\">Profil</font></td></a>
</tr>
</table>

<table border=\"0\" width=\"100%\" style=\"border: 1 solid #000000\" cellspacing=\"0\" cellpadding=\"3\">
<tr>
<a href=\"Maalogvisioner.asp\"><td width=\"100%\"><font size=\"1\" face=\"Verdana\" color=\"#FFFFFF\">Mål og visioner</font></td></a>
</tr>
</table>

</div>                                      

<div id=\"menu2\" onmouseover=\"menu(0,2)\" onmouseout=\"menu(1,2)\" id=\"menu2\" style=\"cursor:hand;position:absolute;visibility:hidden;background-color:19263E;width:100;\">

<table border=\"0\" width=\"100%\" style=\"border: 1 solid #000000\" cellspacing=\"0\" cellpadding=\"3\">
<tr>
<a href=\"Default.asp\"><td width=\"100%\"><font size=\"1\" face=\"Verdana\" color=\"#FFFFFF\">Velkommen</font></td></a>
</tr>
</table>

<table border=\"0\" width=\"100%\" style=\"border: 1 solid #000000\" cellspacing=\"0\" cellpadding=\"3\">
<tr>
<a href=\"Profil.asp\"><td width=\"100%\"><font size=\"1\" face=\"Verdana\" color=\"#FFFFFF\">Profil</font></td></a>
</tr>
</table>

<table border=\"0\" width=\"100%\" style=\"border: 1 solid #000000\" cellspacing=\"0\" cellpadding=\"3\">
<tr>
<a href=\"Maalogvisioner.asp\"><td width=\"100%\"><font size=\"1\" face=\"Verdana\" color=\"#FFFFFF\">Mål og visioner</font></td></a>
</tr>
</table>

</div>                                      

<div id=\"menu3\" onmouseover=\"menu(0,3)\" onmouseout=\"menu(1,3)\" id=\"menu3\" style=\"cursor:hand;position:absolute;visibility:hidden;background-color:19263E;width:100;\">

<table border=\"0\" width=\"100%\" style=\"border: 1 solid #000000\" cellspacing=\"0\" cellpadding=\"3\">
<tr>
<a href=\"Default.asp\"><td width=\"100%\"><font size=\"1\" face=\"Verdana\" color=\"#FFFFFF\">Velkommen</font></td></a>
</tr>
</table>

<table border=\"0\" width=\"100%\" style=\"border: 1 solid #000000\" cellspacing=\"0\" cellpadding=\"3\">
<tr>
<a href=\"Profil.asp\"><td width=\"100%\"><font size=\"1\" face=\"Verdana\" color=\"#FFFFFF\">Profil</font></td></a>
</tr>
</table>

<table border=\"0\" width=\"100%\" style=\"border: 1 solid #000000\" cellspacing=\"0\" cellpadding=\"3\">
<tr>
<a href=\"Maalogvisioner.asp\"><td width=\"100%\"><font size=\"1\" face=\"Verdana\" color=\"#FFFFFF\">Mål og visioner</font></td></a>
</tr>
</table>

</div>                                      

</td>
</tr>
</table>
</body>

</html>

Synes godt om

pfp Nybegynder

19. juli 2001 - 21:27 #16

tak for det. Kan du ikke fortælle mig hvor og hvad det var du rettede, så du ikke behøver at bøvle mere med at rette det til.

Synes godt om

razmuz_dk Nybegynder

19. juli 2001 - 21:47 #17

Der hvor der står en masse af dem her:
 

Dem kan du tilføje og fjerne i ... alt efter hvor lang den skal være - men du skal huske at ændre alle 3 steder! (der er nemmerlig 3 linjer med  )

Synes godt om

pfp Nybegynder

20. juli 2001 - 01:07 #18

razmuz.dk -> hvis du igen prøver at kigge på www.votus.dk/test.htm kan du se at der ligesom er et mellemrum på noget der ligner ca. 3 pixels mellem overskriften og undermenuen, kan jeg ikke fjerne det så det går helt op til?

Synes godt om

razmuz_dk Nybegynder

20. juli 2001 - 02:04 #19

pfp -> jeg er bange for du har rodet lidt rundt i koden! :)))

Her er den igen- med billeder..

<html>

<script Language=\"JavaScript\">

function menu(x,m) {

if (x==\"0\") {

document.all[\"menu\"+m].style.visibility = \"visible\";

}

if (x==\"1\") {

document.all[\"menu\"+m].style.visibility = \"hidden\";

}

}

</script>

<head>

<style>
table,td {
font-size:10;
font-family:verdana;
}

A:link {color:white;text-decoration:none;}

A:visited {color:white;text-decoration:none;}

A:active {color:gray;text-decoration:none;}

A:hover {color:gray;text-decoration:none;}

</style>

</head>

<body>

<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\">
<tr>

<td bgcolor=\"51607C\" width=\"100\" onmouseover=\"menu(0,1)\" onmouseout=\"menu(1,1)\">

<font color=\"FFDE00\"><b><font style=\"cursor: hand\">
<img src=\"BILLEDE 1\">
</font></b></font>

</td>

<td bgcolor=\"51607C\" width=\"100\" onmouseover=\"menu(0,2)\" onmouseout=\"menu(1,2)\">

<font color=\"FFDE00\"><b><font style=\"cursor: hand\">
<img src=\"BILLEDE 2\">
</font></b></font>

</td>

<td bgcolor=\"51607C\" width=\"100\" onmouseover=\"menu(0,3)\" onmouseout=\"menu(1,3)\">

<font color=\"FFDE00\"><b><font style=\"cursor: hand\">
<img src=\"BILLEDE 3\">
</font></b></font>

</td>

</tr>
<tr>
<td colspan=\"3\">

<div id=\"menu1\" onmouseover=\"menu(0,1)\" onmouseout=\"menu(1,1)\" id=\"menu1\" style=\"cursor:hand;position:absolute;visibility:hidden;background-color:19263E;width:100;\">

<table border=\"0\" width=\"100%\" style=\"border: 1 solid #000000\" cellspacing=\"0\" cellpadding=\"3\">
<tr>
<a href=\"Default.asp\"><td width=\"100%\"><font size=\"1\" face=\"Verdana\" color=\"#FFFFFF\">Velkommen</font></td></a>
</tr>
</table>

<table border=\"0\" width=\"100%\" style=\"border: 1 solid #000000\" cellspacing=\"0\" cellpadding=\"3\">
<tr>
<a href=\"Profil.asp\"><td width=\"100%\"><font size=\"1\" face=\"Verdana\" color=\"#FFFFFF\">Profil</font></td></a>
</tr>
</table>

<table border=\"0\" width=\"100%\" style=\"border: 1 solid #000000\" cellspacing=\"0\" cellpadding=\"3\">
<tr>
<a href=\"Maalogvisioner.asp\"><td width=\"100%\"><font size=\"1\" face=\"Verdana\" color=\"#FFFFFF\">Mål og visioner</font></td></a>
</tr>
</table>

</div>                                      

<div id=\"menu2\" onmouseover=\"menu(0,2)\" onmouseout=\"menu(1,2)\" id=\"menu2\" style=\"cursor:hand;position:absolute;visibility:hidden;background-color:19263E;width:100;\">

<table border=\"0\" width=\"100%\" style=\"border: 1 solid #000000\" cellspacing=\"0\" cellpadding=\"3\">
<tr>
<a href=\"Default.asp\"><td width=\"100%\"><font size=\"1\" face=\"Verdana\" color=\"#FFFFFF\">Velkommen</font></td></a>
</tr>
</table>

<table border=\"0\" width=\"100%\" style=\"border: 1 solid #000000\" cellspacing=\"0\" cellpadding=\"3\">
<tr>
<a href=\"Profil.asp\"><td width=\"100%\"><font size=\"1\" face=\"Verdana\" color=\"#FFFFFF\">Profil</font></td></a>
</tr>
</table>

<table border=\"0\" width=\"100%\" style=\"border: 1 solid #000000\" cellspacing=\"0\" cellpadding=\"3\">
<tr>
<a href=\"Maalogvisioner.asp\"><td width=\"100%\"><font size=\"1\" face=\"Verdana\" color=\"#FFFFFF\">Mål og visioner</font></td></a>
</tr>
</table>

</div>                                      

<div id=\"menu3\" onmouseover=\"menu(0,3)\" onmouseout=\"menu(1,3)\" id=\"menu3\" style=\"cursor:hand;position:absolute;visibility:hidden;background-color:19263E;width:100;\">

<table border=\"0\" width=\"100%\" style=\"border: 1 solid #000000\" cellspacing=\"0\" cellpadding=\"3\">
<tr>
<a href=\"Default.asp\"><td width=\"100%\"><font size=\"1\" face=\"Verdana\" color=\"#FFFFFF\">Velkommen</font></td></a>
</tr>
</table>

<table border=\"0\" width=\"100%\" style=\"border: 1 solid #000000\" cellspacing=\"0\" cellpadding=\"3\">
<tr>
<a href=\"Profil.asp\"><td width=\"100%\"><font size=\"1\" face=\"Verdana\" color=\"#FFFFFF\">Profil</font></td></a>
</tr>
</table>

<table border=\"0\" width=\"100%\" style=\"border: 1 solid #000000\" cellspacing=\"0\" cellpadding=\"3\">
<tr>
<a href=\"Maalogvisioner.asp\"><td width=\"100%\"><font size=\"1\" face=\"Verdana\" color=\"#FFFFFF\">Mål og visioner</font></td></a>
</tr>
</table>

</div>                                      

</td>
</tr>
</table>
</body>

</html>

Synes godt om

htorp Nybegynder

20. juli 2001 - 10:34 #20

pfp -> Er du opmærksom på at menuen ikke virker i alle browsere?

Det skyldes at document.all anvendes til at kalde css-lag. Document.all er IE4-5, nok ikke IE6.

NN4 bruger document.layers
NN6 og DOM bruger document.getelementbyID(\"lag\"). IE5 og frem kender også denne kaldemetode.

Synes godt om

pfp Nybegynder

20. juli 2001 - 13:49 #21

hvad betyder det når der står <td colspan=\"3\">?

Synes godt om

razmuz_dk Nybegynder

20. juli 2001 - 13:58 #22

Det betyder at den \"strækker\" sig over 3 td\'er i en \"ny etage\" (<tr>)

Forstår du?

fks

<table>
<tr>
<td colspan=3></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>

eller ..

<table>
<tr>
<td colspan=2>Denne strækker sig over td 1 og 2</td>
<td colspan=3>Denne strækker sig over td 3,4 og 5.</td>
</tr>
<tr>
<td>TD 1</td>
<td>TD 2</td>
<td>TD 3</td>
<td>TD 4</td>
<td>TD 5</td>
</tr>
</table>

Prøv at køre det i et html dok. så forstår du! :o]

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27
Aldersbegrænsning på min hjemmeside Af ØLMANDEN i HTML	3	29/09/202410:58	20/03/202513:38

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS

04/07

Test: Lille dansk højttaler til sommer og strand giver de store producenter kamp til stregen

04/07

Nørgaard: Microsoft har store problemer med AI - det kommer ikke til at gå godt

04/07

Find ly i skyggen - og søg et af disse 10 spændende it-job, der er ledige netop nu

04/07

Vil fyre tusindvis af ansatte globalt: Nu reagerer Microsofts danske organisation med 800 medarbejdere

04/07

Staten binder sig med ny aftale til Microsoft i usædvanlig lang tid - og det er der en særlig årsag til

04/07

Cepheo-chefer trods røde tal: "Vi har en stærkere pipeline, end vi har haft længe"

04/07

Pengene vælter ud af den danske Dynamics-kæmpe Cepheo i selskabets andet leveår - men forretningen buldrer frem

04/07

Om få uger er det slut med adgangskoder i Authenticator: Har du husket at flytte dine adgangskoder?

04/07

Du skal opdatere hurtigst muligt: Alvorlig sårbarhed opdaget i Citrix-software

04/07

AI i sundhed: Stort potentiale – og lige så store barrierer

04/07

Handelskrigen letter: USA løfter forbud mod eksport til Kina af software til chip-design

Vis flere artikler

IT-JOB

Politiets Efterretningstjeneste

Bliv IT-projektleder i PET og få et job med dybere mening (barselsvikariat)

MedCom

MedCom søger Akademisk-/AC-medarbejder til ledelses- og styregruppeunderstøttelse

KMD A/S

Technical Lead til Identity & Rights management Opus

KMD A/S

Senior Product Owner

Semler IT

Azure Solution Architect & Developer til Semler IT

Vis flere jobs

Seneste spørgsmål Seneste aktivitet

I går 19:57	SMB på Synology Af johnnylassen i Servere
I går 13:51	Anmeldelse af bog i Weekendavisen Af Ikke-ekspert i Fri debat
I går 11:22	20 år gammel mobil simlåst Af xMsBx i Mobiltelefoner
05/0719:11	Ændre autoudfyld i Outlook og Word Af TTA i Office & Kontorpakker
05/0712:27	Office Pro 2019 forsvinder Af mort1 i Office & Kontorpakker