Avatar billede gizmo1234 Nybegynder
04. april 2004 - 00:30 Der er 8 kommentarer og
1 løsning

Skift billede funktion

Hej.
Jeg står og mangler den funktion som der bruges på bla. http://www.bilbasen.dk/

Prøv at søg på en bil, og så vælg en bestemt bil, så kan man køre musen over nogle små billeder af bilen, og så kommer de så udskiftet med det store billede.

Er det ikke javascript?

Hvis ja, hvordan gør man?

Det skal være sådan at der vises et billede, fx billede1, og så skal der i bunden være små billeder af billede1, billede2, billede3 og billede4. Når man så kører musen over billede2, så skiftes det store billede ud med billede2, og den bliver ved med at vise billede 2 i det store billede, selvom man fjerner musen. Det skal først være når man kører musen over et af de andre små billeder, at det store billede skifter. Hvordan gør man det?

PS, jeg har stortset ingen forstand på javascript
Avatar billede jakobclausen Nybegynder
04. april 2004 - 00:39 #1
Jo det er JavaScript.
KOden kan du finde her: http://www.script.dk/sourcecode.jsp?resourceId=139
Avatar billede gizmo1234 Nybegynder
04. april 2004 - 00:44 #2
Ok, der er lidt problemer der.
1: Jeg kan ikke download filen
2: I eksemplet, skifter den tilbage til det gamle billede når man fjerner musen igen, det må den ikke
Avatar billede gizmo1234 Nybegynder
04. april 2004 - 00:48 #3
Det er nærmere noget af dette her jeg leder efter:

http://www.script.dk/sourcecode.jsp?category=16&resourceId=139

Hvis man så bare kan få den til at blive på billedet, indtil man kører musen over et andet. Kan man det?
Avatar billede jakobclausen Nybegynder
04. april 2004 - 00:52 #4
Ja det er en meget lille rettelse i koden, og så skulle det være ordnet.
Avatar billede jakobclausen Nybegynder
04. april 2004 - 00:54 #5
<-- Kode fra Script.dk -->

<html> <head> <title>ChangeImg2</title>

<SCRIPT>
//Script by Ricki Runge
//Find more at www.script.dk

img = new Image;

function changeImg(imgName) {
  img.src = imgName;
  document.pic.src = img.src;
}
</SCRIPT>
</head>
<body>

<center><h1>ChangeImg2</h1>
Kør musen hen over billed 1 eller 2, og billed 0 vil skifte.<br>
<img src="0.gif" border=1 alt="Picture" name="pic"><br>
<a href="http://HereGoesURL" onMouseover="changeImg('1.gif')" onMouseout="changeImg('0.gif')"><img src="1.gif" border=1 alt="Link 1"></a>
<a href="http://HereGoesURL" onMouseover="changeImg('2.gif')" onMouseout="changeImg('0.gif')"><img src="2.gif" border=1 alt="Link 2"></a><br>

<br><hr><center>Scriptet er lavet af <a href="mailto:ricki@script.dk">Ricki Runge</a> - <a href="http://www.script.dk/archive/javascript/changeimg2.zip">Klik her for at downloade kildekoden</a></center>
</body> </html>

Jeg har ikke testet, men skulle mene at det vil virke som du gerne vil hvis du fjerner "onMouseout="changeImg('0.gif')" i begge linierne
Avatar billede jakobclausen Nybegynder
04. april 2004 - 00:59 #6
Med rettelse: http://www.bokaj.dk/eksperten/485540.htm

Kode:
<html> <head> <title>ChangeImg2</title>

<SCRIPT>
//Script by Ricki Runge
//Find more at www.script.dk

img = new Image;

function changeImg(imgName) {
  img.src = imgName;
  document.pic.src = img.src;
}
</SCRIPT>
</head>
<body>

<center><h1>ChangeImg2</h1>
Kør musen hen over billed 1 eller 2, og billed 0 vil skifte.<br>
<img src="0.gif" border=1 alt="Picture" name="pic"><br>
<a href="http://HereGoesURL" onMouseover="changeImg('1.gif')"><img src="1.gif" border=1 alt="Link 1"></a>
<a href="http://HereGoesURL" onMouseover="changeImg('2.gif')"><img src="2.gif" border=1 alt="Link 2"></a><br>

<br><hr><center>Scriptet er lavet af <a href="mailto:ricki@script.dk">Ricki Runge</a> - <a href="http://www.script.dk/archive/javascript/changeimg2.zip">Klik her for at downloade kildekoden</a></center>
</body> </html>
Avatar billede gizmo1234 Nybegynder
04. april 2004 - 01:07 #7
Det ser ud til at virke, men der er lige en sidste lille detalje.

http://www.soebiler.dk/pass/lager/billede.php

Prøv at køre fra billede 2 til billede 1. Kan du ikke se at den hopper lidt? Hvorfor gør den det?

Her er min kode:

<html> <head> <title>ChangeImg2</title>

<SCRIPT>
img = new Image;

function changeImg(imgName) {
  img.src = imgName;
  document.pic.src = img.src;
}
</SCRIPT>
</head>
<body>


<img src="http://biga-aarhus.dk/pass/upload/metropol3_stor.jpg" border=1 alt="Picture" name="pic" width="270"><br><br><br>
<a onMouseover="changeImg('http://biga-aarhus.dk/pass/upload/vitrine_stor.jpg')"><img src="http://biga-aarhus.dk/pass/upload/vitrine_stor.jpg" width="70" height="55" border=1></a>
<a onMouseover="changeImg('http://biga-aarhus.dk/pass/upload/rondo_stor.jpg')"><img src="http://biga-aarhus.dk/pass/upload/rondo_stor.jpg" width="70" height="55" border=1></a>

<a onMouseover="changeImg('http://biga-aarhus.dk/pass/upload/metropol3_stor.jpg')"><img src="http://biga-aarhus.dk/pass/upload/metropol3_stor.jpg" width="70" height="55" border=1></a><br>

</body> </html>
Avatar billede gizmo1234 Nybegynder
04. april 2004 - 01:09 #8
Dooh hvor dum må man være? Da fordi at det øverste billede er lidt større i nummer 1 :)

Nå, men det funker jo 100%

Mange tusinde tak! :)
Avatar billede jakobclausen Nybegynder
04. april 2004 - 09:09 #9
Hehe godt du fandt ud af 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
Vi tilbyder markedets bedste kurser inden for webudvikling

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