Søg
Avatar billede rasta123 Nybegynder
19. juni 2003 - 22:39 Der er 11 kommentarer og
1 løsning

Menu med highlight

Hejsa.. Er der nogen der hurtigt kan hjælpe mig med et script til en menu i venstre side, hvor hvert menupunkt består af et billede, og når man kører musen over, skal der være en highlight.. Altså billedet bliver udskiftet med et andet!

På forhånd tak!
Avatar billede kimiwan Nybegynder
19. juni 2003 - 22:41 #1
har du forsøgt dig på google? -- der er masser af script eksempler lige til at kopiere over.

http://www.google.com/search?q=image+rollover
Avatar billede Slettet bruger
19. juni 2003 - 22:47 #2
Her er en kode til det, du rediger self. billedet med dine egne

-----------------------

<p>
<applet code="fphover.class" codebase="./" width="125" height="33">
  <param name="text" value="Knaptekst">
  <param name="color" value="#000080">
  <param name="hovercolor" value="#0000FF">
  <param name="textcolor" value="#FFFFFF">
  <param name="effect" value="glow">
  <param name="image" valuetype="ref" value="xxx.jpg">
  <param name="hoverimage" valuetype="ref" value="xxx2.jpg">
</applet><br>
<applet code="fphover.class" codebase="./" width="125" height="33">
  <param name="text" value="Knaptekst">
  <param name="color" value="#000080">
  <param name="hovercolor" value="#0000FF">
  <param name="textcolor" value="#FFFFFF">
  <param name="effect" value="glow">
  <param name="image" valuetype="ref" value="xxx.jpg">
  <param name="hoverimage" valuetype="ref" value="xxx2.jpg">
</applet><br>
<applet code="fphover.class" codebase="./" width="125" height="33">
  <param name="text" value="Knaptekst">
  <param name="color" value="#000080">
  <param name="hovercolor" value="#0000FF">
  <param name="textcolor" value="#FFFFFF">
  <param name="effect" value="glow">
  <param name="image" valuetype="ref" value="xxx.jpg">
  <param name="hoverimage" valuetype="ref" value="xxx2.jpg">
</applet><br>
<applet code="fphover.class" codebase="./" width="125" height="33">
  <param name="text" value="Knaptekst">
  <param name="color" value="#000080">
  <param name="hovercolor" value="#0000FF">
  <param name="textcolor" value="#FFFFFF">
  <param name="effect" value="glow">
  <param name="image" valuetype="ref" value="xxx.jpg">
  <param name="hoverimage" valuetype="ref" value="xxx2.jpg">
</applet><br>
<applet code="fphover.class" codebase="./" width="125" height="33">
  <param name="text" value="Knaptekst">
  <param name="color" value="#000080">
  <param name="hovercolor" value="#0000FF">
  <param name="textcolor" value="#FFFFFF">
  <param name="effect" value="glow">
  <param name="image" valuetype="ref" value="xxx.jpg">
  <param name="hoverimage" valuetype="ref" value="xxx2.jpg">
</applet><br>
&nbsp;</p>
Avatar billede miss-g Seniormester
19. juni 2003 - 22:47 #3
Her er et lille program der kan lave koden:

http://www.hojgard.dk/javascript/mouseover_generator.php
Avatar billede Slettet bruger
19. juni 2003 - 22:49 #4
ja mit var vel også et svar ;-)
Avatar billede skovenborg Nybegynder
19. juni 2003 - 23:16 #5
Ganske kort kan man gøre sådan:
<img src="billede1.png" onMouseOver="this.src = 'billede1h.png;" onMouseOut="this.src = 'billede1.png';">
så kan du bare lave en masse af dem.
Avatar billede 1409 Praktikant
19. juni 2003 - 23:19 #6
Eksemplet her er med to sider, en forside og en underside, men kan udvides i det uendelige:

I HEAD-området:

<SCRIPT LANGUAGE="javascript">
<!--
if (document.images) {

    var a1 = new Image();
    a1.src = "../grafik/knapper/forside.gif";
    var a2 = new Image();
    a2.src = "../grafik/knapper/forsidelys.gif";

    var b1 = new Image();
    b1.src = "../grafik/knapper/underside.gif";
    var b2 = new Image();
    b2.src = "../grafik/knapper/undersidelys.gif";
}

function Over(imgName) {
    if (document.images)
    document[imgName].src = eval(imgName + "2.src");
}

function Ud(imgName) {
    if (document.images)
    document[imgName].src = eval(imgName + "1.src");
}

// -->
</SCRIPT>

... og i BODY-området:

<A HREF="forside.html" ONMOUSEOVER="Over('a');" ONMOUSEOUT="Ud('a');"><IMG SRC="../grafik/knapper/forside.gif" NAME="a" WIDTH=69 HEIGHT=18 BORDER=0 ALT="Forside"></A>

<A HREF="underside.html" ONMOUSEOVER="Over('b');" ONMOUSEOUT="Ud('b');"><IMG SRC="../grafik/knapper/underside.gif" NAME="b" WIDTH=69 HEIGHT=18 BORDER=0 ALT="Underside"></A>
Avatar billede skovenborg Nybegynder
19. juni 2003 - 23:29 #7
jesper_c >> Er det nu klogt at bruge en java-menu? Du risikerer at mange mennesker ikke kan navigere rundt på din side hvis de ikke lige har java installeret (nogen pga. sikkerhedsproblemmer).
Avatar billede rangerbs Nybegynder
19. juni 2003 - 23:35 #8
<html>
<head>

<script language="JavaScript" type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
  if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

</head>
<body onLoad="MM_preloadImages('billede.jpg')">

<a href="billedet.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('billedet','','billedet2.gif',1)"><img src="billedet.gif" alt="billedet" name="billedet" width="100" height="20" border="0"></a>

</body>
</html>
Avatar billede Slettet bruger
19. juni 2003 - 23:56 #9
Gir dig fuldt ret skovenborg,
men det er alligevel en løsning, men ja der er nok andre alternativer som fungere bedre :-)
Avatar billede skovenborg Nybegynder
20. juni 2003 - 01:34 #10
Ja, der er mange løsninger til sådan et problem. Her er et lille eksempel mere:
  <script language="javascript">
    function image_menu()
    {
    menu = new Array();
    arrindex=0;
    //For at lave flere skal du lave skrive
    //menu[arrindex++] = "link url;;billede1 url;;billede2 url";
    //hvor billede1 er det viste billede og billede2 er det billede der skal skiftes til
    menu[arrindex++] = "/test/;;/test/mig1.jpg;;/test/mig2.jpg";
    menu[arrindex++] = "/test/test.php;;/test/mig2.jpg;;/test/billeder/logo.png";
    for (i=0;i<menu.length;i++)
    {
        strarr = menu[i].split(";;");
                billede = new Image();
        billede.src = strarr[1];
        billede2 = new Image();
        billede2.src = strarr[2];
        document.write("<a href='" + strarr[0] + "'><img src='" + strarr[1] + "' onMouseOver='this.src = \"" + strarr[2] + "\";' onMouseOut='this.src = \"" + strarr[1] + "\";'></a><br>");
    }

    }
    image_menu();
</script>

Scriptet her kan sættes hvor som helst i dit script. Det skal bare kaldes der hvor du vil have menuen. Fx i en tabel:
<table>
  <tr>
  <td>
    <script language="javascript">
    image_menu();
    </script>
  </td>
  </tr>
</table>
Så god fornøjelse med at prøve alle de her utallige muligheder af :-)
Avatar billede skovenborg Nybegynder
20. juni 2003 - 01:36 #11
øhm, de der eksempler er bare nogen jeg testede det af på. Et mere konkret eksempel kunne være:
menu[arrindex++] = "http://www.google.com;;billede1.jpg;;billede2.jpg";
Avatar billede rasta123 Nybegynder
22. juni 2003 - 19:45 #12
Mange tak for hjælpen alle, men hvad jeg søgte var bare det helt simple, som skovenborg skrev!.. Det virker så udemærket!.. Tak for det
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
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 21/08/202610:41
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I går 20:17 Kan man kopiere en DVD og afspille den på * Linux Mint - Cinnamon - 22.1 - "Xia" * ? Af Ikke-ekspert i Linux
27/0821:03 Kan man få Word viewer gratis Af Strawberry i Word
26/0813:28 Findes der en brugsanvisning til : "ONKYO Stereo Casette - Tape Deck - R1" Af Ikke-ekspert i Musik & videoafspillere
24/0820:07 Libra Office 26.2.5.2 - Er sort - Kan an ændre til lysere baggrund ? (Windows 11) Af Ikke-ekspert i Office & Kontorpakker
24/0811:24 Hvor kan jeg finde hjælp til at flytte fra min gamle Samsung Flip4 til min nye Samsung Galaxy S24 Af vbr i Apps til Android
White papers
Flere white papers »