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

marnox Nybegynder

13. marts 2007 - 14:33 Der er 19 kommentarer og
1 løsning

Søger: mouseOver viser billede - mouseOut fjerner billede?

Jeg sidder med onmouseover og onmouseout, der ikke helt fungerer efter hensigten. Jeg har flere links under hinanden, der ved mouseover skal vise et billede. Det er bare, som om, mine billeder "skygger" for hinanden og jeg kan simpelthen ikke se fejlen. Alle id'er er unikke .. Samtidigt ved jeg ikke, hvordan man skriver i JavaScript at det billede der kommer frem ved mouseover skal fjernes igen ved mouseout ... denne kode:{document.eksempel.src = "ex_out.jpg";}
skal vel hedde noget helt andet, hvis der ikke skal være noget billede! (se nederst for eksempel på den kode, jeg sidder med)

Kan nogen hjælpe med et simpelt script, der ved mouseover på <a href="#">tekst</a> viser et billede og ved mouseout fjerner billedet igen?

=============koden=============
HTML:
<a href="eksempel.html" onmouseover="mouseOver()" onmouseout="mouseOut()" id="eksempel">eksempel</a>

java script:
function mouseOver()
{document.eksempel.src = "ex_over.jpg";}
function mouseOver()
{document.eksempel.src = "ex_out.jpg";}

===============================

På forhånd tak!

/Malene

Synes godt om

roenving Novice

13. marts 2007 - 14:42 #1

Hvor findes billedet henne ?-)

-- og er det det samme billede, der bare skal skiftes afhængig af, hvilket link, der er hover på ?o]

Synes godt om

marnox Nybegynder

13. marts 2007 - 14:55 #2

Hehe .. hej igen :-)

Tænker du på, hvilken mappe, billederne ligger i?

Synes godt om

marnox Nybegynder

13. marts 2007 - 14:58 #3

Hov .. glemte lige at svare på det sidste:

Der skal vel egentlig være et fast billede - med faste koordinater - som bliver skiftet ud med et andet, hvis man holder musen over linket.

Er det til at forstå, hvad jeg mener?

Synes godt om

roenving Novice

13. marts 2007 - 15:05 #4

Hører der et billede til hver link, altså er der lige så mange forskellige billeder på siden, som der er links, eller er der kun eet img-tag ?-)

Synes godt om

marnox Nybegynder

13. marts 2007 - 15:43 #5

Der hører et billede til hvert link, ja.

Synes godt om

roenving Novice

13. marts 2007 - 16:00 #6

Så f.eks.

<a href=" ... " onmouseover="vis('img1','ex_over.jpg');" onmouseout="vis('img1','ex_out.jpg');">Eksempel</a>

<img id="img1" src="ex_out.jpg">

<a href=" ... " onmouseover="vis('img2','ex2_over.jpg');" onmouseout="vis('img2','ex2_out.jpg');">Eksempel2</a>

<img id="img2" src="ex2_out.jpg">

<script type="text/javascript">
function vis(pic,bill){
document.getElementById(pic).setAttribute("src",bill);
}
</script>

Synes godt om

marnox Nybegynder

13. marts 2007 - 16:14 #7

årh ... ja - det er så straffen for at jeg ikke har smidt noget reel kode ind. Skal lige rette det til, så jeg kan se, om det er det, jeg mente...

Synes godt om

marnox Nybegynder

13. marts 2007 - 16:27 #8

Det virker! Tusind tak for det :-)

Så mangler jeg bare lige at finde ud af, hvordan det fungerer med de her points ... jeg gjorde det lidt forkert sidste gang...

/Malene

Synes godt om

marnox Nybegynder

13. marts 2007 - 16:30 #9

... det er fordi du har skrevet det som en kommentar, jeg ikke kunne give dig points før ...

Synes godt om

roenving Novice

13. marts 2007 - 16:31 #10

Velbekomme '-)

-- men behold selv de fleste point !-)

Synes godt om

marnox Nybegynder

13. marts 2007 - 16:55 #11

hmm ... problem: det virker ikke, hvis alle billeder skal vises samme sted ...

Synes godt om

marnox Nybegynder

13. marts 2007 - 17:03 #12

Det er vist på tide, jeg giver dig noget kode. HTML'en og JavaScriptet er her:
http://www.atra.dk/pages/test/medarbejderpixnr2.html

CSS'en her:
http://www.atra.dk/pages/test/medarbejderpixnr2.css

Synes godt om

roenving Novice

13. marts 2007 - 17:20 #13

Så bliver det en del simplere:

<a href=" ... " onmouseover="vis('katja.jpg');" onmouseout="vis();">Katja</a>

<script type="text/javascript">
function vis(pic){
document.getElementById("visBillede").setAttribute("src", (pic ? pic : "defaultImage.jpg") );
}
</script>

Synes godt om

marnox Nybegynder

13. marts 2007 - 17:26 #14

Simplere er godt!

Men kan jeg bede dig forklare den sidste del af scriptet?

/M

Synes godt om

roenving Novice

13. marts 2007 - 17:34 #15

(pic ? pic : "defaultImage.jpg") er den 'ternære' operator, altså en operator med 3 dele ...

-- den svarer til f.eks. IIF i gammel Excel (HVIS i en nyere dansk), og vil kunne skrives:

if(pic)
document.getElementById("visBillede").setAttribute("src",pic);
else
document.getElementById("visBillede").setAttribute("src", "defaultImage.jpg");

-- og det er ren dovenskab at forkorte det, der skulle ikke være nogen forskelle på performance !-)

Synes godt om

marnox Nybegynder

14. marts 2007 - 08:36 #16

Tak for forklaringen :-) Jeg kan bare ikke få det til at virke - gør jeg noget forkert?:

========================================
<a href="#nogo" onmouseover="vis('tine_nrm.jpg');" onmouseout="vis();">TINE</a>

<script type="text/javascript">
function vis(pic){
document.getElementById("visBillede").setAttribute("src", (pic ? pic : "medarbejdere.jpg") );
}
</script>
========================================

Hvis du på nogen måde er i tvivl om, hvad det er, jeg leder efter, kan du på http://www.atra.dk/pages/test/medarbejderpixnr2.html
se en lille oversigt med tekstlinks og et billede til højre. Dét billede skal skifte til et, der passer til navnet, når musen kører over de forskellige navne.

Der er med andre ord 12 billeder, der som mouseover skal placeres samme sted og 12 links der skal placeres forskelligt.

/M

Synes godt om

roenving Novice

14. marts 2007 - 10:00 #17

Tjah, det er jo ikke sådan, den ser ud nu ...

-- og så har du en xml-dklaration foran doctype, den vil notorisk få IE til at glemme alt om standarder, så fjern den, og så f.eks. sådan:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html;charset=iso-8859-1" />
<meta name="generator" content="Adobe GoLive" />
<title>ATRA arkitekter A/S</title>
<link rel="stylesheet" type="text/css" href="http://www.atra.dk/pages/test/medarbejderpixnr2.css" media="all" />

<script type="text/javascript">
function vis(pic){
document.getElementById("img12").setAttribute("src", "http://www.atra.dk/pages/test/" + (pic ? pic : "medarbejder.jpg") );
}
</script>
</head>

<body>
<div id="center">
<div id="left">
<a href="" onmouseover="vis('gitted_omo.jpg');" onmouseout="vis();" class="link" id="gitted">GITTE D</a>
<img id="img1" src="medarbejder.jpg">

<a href="" onmouseover="vis('gitteh_omo.jpg');" onmouseout="vis();" class="link" id="gitteh">GITTE H</a>
<img id="img2" src="medarbejder.jpg">

<a href="" onmouseover="vis('erling_omo.jpg');" onmouseout="vis();" class="link" id="erling">ERLING</a>
<img id="img3" src="medarbejder.jpg">

<a href="" onmouseover="vis('lars_omo.jpg');" onmouseout="vis();" class="link" id="lars">LARS</a>
<img id="img4" src="medarbejder.jpg">

<a href="" onmouseover="vis('niels_omo.jpg');" onmouseout="vis();" class="link" id="niels">NIELS</a>
<img id="img5" src="medarbejder.jpg">

<a href="" onmouseover="vis('randi_omo.jpg');" onmouseout="vis();" class="link" id="randi">RANDI</a>
<img id="img6" src="medarbejder.jpg">

<a href="" onmouseover="vis('carlegon_omo.jpg');" onmouseout="vis();" class="link" id="carlegon">CARL EGON</a>
<img id="img7" src="medarbejder.jpg">

<a href="" onmouseover="vis('canny_omo.jpg');" onmouseout="vis();" class="link" id="conny">CONNY</a>
<img id="img8" src="medarbejder.jpg">

<a href="" onmouseover="vis('camilla_omo.jpg');" onmouseout="vis();" class="link" id="camilla">CAMILLA</a>
<img id="img9" src="medarbejder.jpg">

<a href="" onmouseover="vis('martin_omo.jpg');" onmouseout="vis();" class="link" id="martin">MARTIN</a>
<img id="img10" src="medarbejder.jpg">

<a href="" onmouseover="vis('rikke_omo.jpg');" onmouseout="vis();" class="link" id="rikke">RIKKE</a>
<img id="img11" src="medarbejder.jpg">

<a href="" onmouseover="vis('tine_omo.jpg');" onmouseout="vis();" class="link" id="tine">TINE</a>
<img id="img12" src="http://www.atra.dk/pages/test/medarbejder.jpg">

</div></div>

</body>

</html>

Synes godt om

roenving Novice

14. marts 2007 - 10:02 #18

Hrm, jeg glemte at fjerne alle de overflødige billeder !-)

-- du skal nemlig kun beholde img12 (eller en af de andre, så skal henvisningen i funktionen bare laves om !o]

Synes godt om

marnox Nybegynder

14. marts 2007 - 12:24 #19

FEDT! Nu virker det og det er LIGE som jeg havde håbet på. Tusind tak for din hjælp.

/Malene

Synes godt om

roenving Novice

14. marts 2007 - 12:33 #20

-- og jeg takker for point ;~}

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
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
Ajax - indlæs webside og derefter hente data Af nemlig i JavaScript	4	21/05/202417:19	22/06/202422:07
Disable button efter 1. klik Af nemlig i JavaScript	2	05/05/202415:37	05/05/202416:25

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