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

cba Nybegynder

17. maj 2001 - 16:29 Der er 16 kommentarer og
1 løsning

Mouse on/over i menu

Jeg er i gang med at hjemmestrikke et menusystem, og jeg har tænkt mig at bruge to grafikfiler til hvert menupunkt. De skal alle ha samme størrelse, både højde og bredde. Grafik-fil nr. 1 skal være den, som brugeren ser når man kommer ind på webbet. Der skal f.eks. stå \"Links\" med sorte bogstaver, og når musen er over denne grafikfil, så skal en anden grafikfil dukke op - hvor \"Links\" står med hvide bogstaver.
Hvordan får jeg nemmest det at fungere ?
Jeg er ikke god til scripts, så jeg må få en udførlig opskrift, også hvor man skal plasere de forskellige script.

Synes godt om

zyclon Nybegynder

17. maj 2001 - 16:32 #1

På webcafe.dk finder du en artikel om hvordan du laver JavaScript mouseovers.

http://www.webcafe.dk/diverse/artikler/100/da100.php3

/Zyclon

Synes godt om

nute Nybegynder

17. maj 2001 - 16:36 #2

det kan du da bruke CSS til:

<html>
<head>
<style>
.text{
BACKGROUND-COLOR: black;
COLOR: white;
}
.text:hover{
BACKGROUND-COLOR: white;
COLOR: black;
}
</style>
</head>
<body>
<A href=\"#\" class=\"text\">Test</span>
</body></html>

/nute

Synes godt om

sukos Juniormester

17. maj 2001 - 16:42 #3

Det her lægger du i head-delen:

<SCRIPT LANGUAGE=\"javascript\">

</SCRIPT>

Derefter i body-delen:

<a href=\"ditlink\" onMouseover=\"document.images[0].src=knap2.src\"
onMouseOut=\"document.images[0].src=knap1.src\"><img src=\"ditbillede_1.gif\" border=\"0\" width=\"\" height=\"\" alt=\"\"></a>

Det er god skik at angi str. på billederne!

document.images[0] er det nummer i rækken af billeder som du har på din side!!!

Synes godt om

sukos Juniormester

17. maj 2001 - 16:44 #4

Hvis du har flere billedlinks kører du bare derudaf:
knap1=new Image(); knap1.src=\'ditbillede_1.gif\';
knap2=new Image(); knap2.src=\'ditbillede_2.gif\';
knap3=new Image(); knap3.src=\'ditbillede_3.gif\';
knap4=new Image(); knap4.src=\'ditbillede_4.gif\';

Synes godt om

olebole Juniormester

17. maj 2001 - 16:45 #5

<ole>
Hvordan laver du din menu? Har du f.eks. billederne liggende i et <div>? For så duer sukos\' script ikke. Lidt mere info eller en URL, please :o)
/mvh
</bole>

Synes godt om

nute Nybegynder

17. maj 2001 - 16:49 #6

selv om sukos har postet det svar som er mest relevant til ditt spørsmål, vil jeg fraråde deg å bruke grafikk til dette. Hvis du kun skal få en annen farge på en tekst er det bedre å bruke CSS, fordi det ikke fyller så mange bytes.

Synes godt om

sukos Juniormester

17. maj 2001 - 16:55 #7

Det forstår jeg ikke helt?
Hvor virker det ikke i div?

Synes godt om

sukos Juniormester

17. maj 2001 - 16:59 #8

Arrgh, det virker fint i min Ie5. men ikke i min ns4.7, når der bruges absolute position!

Synes godt om

jakoba Nybegynder

17. maj 2001 - 17:44 #9

ns4 kan ikke dynamisk ændre style på baggrund og tekst.
det er en mulig grund til at vælge at bruge grafik.

Synes godt om

olebole Juniormester

17. maj 2001 - 17:45 #10

Nemlig :o)

onMouseover=\"document.layers[lagID].document.images[0].src=knap2.src\";

DET virker i NS4.x. Derfor vil det være fiksere at lave en funktion, hvor man vælger en swap-metode efter browsertype.

nute >> Så er man til gengæld låst i de kedelige systemskrifter. Det behøver ikke at fylde ret meget, hvis man komprimerer til f.eks. 8 farver.

/mvh

Synes godt om

nute Nybegynder

17. maj 2001 - 17:48 #11

jakoba >> en god grunn til å lage det som grafikk :)

olebole >> nja...men hvorfor lage ting vanskelig når man kan lage det i morgen ?? (eller hvordan var nå dét ordspråket....??) ;)

Synes godt om

olebole Juniormester

17. maj 2001 - 18:05 #12

jakoba >> Hvad har document.layers[lagID].bgColor=\"#00ff00\" nu gjort?

nute >> Hvis designeren har valgt Gill Sans som font til menu\'en - kan du så anvise en lettere metode? ;o)
/mvh

Synes godt om

cba Nybegynder

17. maj 2001 - 18:06 #13

Desværre er der en del jeg ikke forstår, så jeg forklarer lidt mere:
Jeg skal lave 8 almindelige link, og dem hægter jeg på nogen grafikfiler, som er ren grafik - uden ord. Men ovenpå disse grafikfiler lægger jeg nogen små grafikfiler, som faktisk bare er ord (f.eks. sitemap - og det er skrevet med sorte bogstaver på hvid baggrund).
Og så vil jeg gerne ha nogen andre grafikfiler, som skal at dukke op når mus er over. De skal ha hvide bogstaver på sort baggrund.
Hvis det er mere smart med ren tekst, så er det bare super, men det ved jeg bare ikke.
Håber det hjælper ?

Synes godt om

jakoba Nybegynder

17. maj 2001 - 18:09 #14

Indrømmet. I et layer kan man ændre baggrundsfarven i NS4.
eller man kunne lave 2 layers og flippe imellem dem. (det er muligt, men sikken et mas).

Synes godt om

olebole Juniormester

17. maj 2001 - 18:21 #15

cba >> Kan du ikke vise os koden? Meget gerne en URL til et eksempel.

jakoba >> Det er vel det nærmeste, men kommer definitionen på \'overkill\'...! :o)

Synes godt om

cba Nybegynder

18. maj 2001 - 16:55 #16

Her er koden:
Jeg må tilføje, at knap1a knap2a knap3a er dem jeg vil ha at dukke op når mus er over knap1 .... o.s.v.

Der ligger kode i HEAD, som ikke er OK og der mangler kode hvor: knap1 knap2 og knap3 er brugt til link.

<html>
<head>
<SCRIPT LANGUAGE=\"javascript\">

</SCRIPT>
</head>

<body>
<br>

<table border=\"0\" width=\"150\">
<tr>
<td width=\"150\"><a href=\"side1.htm\"><img border=\"0\" src=\"knap1.jpg\" width=\"150\" height=\"50\"></a></td>
</tr>
<tr>
<td width=\"150\"><a href=\"side2.htm\"><img border=\"0\" src=\"knap2.jpg\" width=\"150\" height=\"50\"></a></td>
</tr>
<tr>
<td width=\"150\"><a href=\"side3.htm\"><img border=\"0\" src=\"knap3.jpg\" width=\"150\" height=\"50\"></a></td>
</tr>
</table>
<br>

<img border=\"0\" src=\"knap1a.jpg\" width=\"150\" height=\"50\"><br>
<br>
<img border=\"0\" src=\"knap2a.jpg\" width=\"150\" height=\"50\"><br>
<br>
<img border=\"0\" src=\"knap3a.jpg\" width=\"150\" height=\"50\"><br>

</body>

</html>

Synes godt om

sukos Juniormester

18. maj 2001 - 17:53 #17

<html>
<head>
<SCRIPT LANGUAGE=\"javascript\">

</SCRIPT>

</head>

<body>
<br>

<table border=\"0\" width=\"150\">
<tr>
<td width=\"150\"><a href=\"side1.htm\" onMouseover=\"document.images[0].src=knap1.src\" onMouseOut=\"document.images[0].src=knap2.src\"><img border=\"0\" src=\"knap1.jpg\" width=\"150\" height=\"50\"></a></td>
</tr>
<tr>
<td width=\"150\"><a href=\"side2.htm\" onMouseover=\"document.images[1].src=knap3.src\"
onMouseOut=\"document.images[1].src=knap4.src\"><img border=\"0\" src=\"knap2.jpg\" width=\"150\" height=\"50\"></a></td>
</tr>
<tr>
<td width=\"150\"><a href=\"side3.htm\" onMouseover=\"document.images[2].src=knap5.src\"
onMouseOut=\"document.images[2].src=knap6.src\"><img border=\"0\" src=\"knap3.jpg\" width=\"150\" height=\"50\"></a></td>
</tr>
</table>
<br>

<img border=\"0\" src=\"knap1a.jpg\" width=\"150\" height=\"50\"><br>
<br>
<img border=\"0\" src=\"knap2a.jpg\" width=\"150\" height=\"50\"><br>
<br>
<img border=\"0\" src=\"knap3a.jpg\" width=\"150\" height=\"50\"><br>

</body>

</html>

De tre sidste billeder har ikke nogen mouseover-effekt!
Det kan gøres med et link eller <span>, (tror jeg)

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 JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Sæt vindue størrelse Af poulmadsen i JavaScript	1	08/10/202417:18	13/10/202412:33
Opgavestyring Af ingeman i JavaScript	1	15/09/202416:06	15/09/202420:40
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript	4	24/06/202422:50	26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23

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