Notifikationer

Markér alle som læst Log ud

kimg Nybegynder

14. juli 2003 - 15:00 Der er 21 kommentarer og
1 løsning

skift billede

Jeg mangler et script, der skifter billeder onmouseover, jeg har f.eks 10 små billeder, der bliver vist, ved onmouseover, der hvor billederne skal vises, er der i forvejen et billede. så det billede skal vises igen når cursor fjernes fra de små billeder.

Kim

Synes godt om

dk_akj Nybegynder

14. juli 2003 - 15:13 #1

Du vil altså vise en forstørret udgave af billedet når du holder musen over det lille ??

//akj

Synes godt om

roenving Novice

14. juli 2003 - 15:14 #2

For at det skal virke gnidningsløst skal du også preloade mouseover-billederne:

<script language="javascript">
var imgs = new Array();
imgs[0] = new Image;
imgs[0].src = 'pic1.gif';
imgs[1] = new Image;
imgs[1].src = 'pic1_on.gif';
imgs[2] = new Image;
imgs[2].src = 'pic1.gif';
imgs[3] = new Image;
imgs[3].src = 'pic1_on.gif';

//osv.

</script>

<img src='pic1.gif' onmouseover="this.src=imgs[0].src" onmouseout=this.src=imgs[1].src">

Synes godt om

roenving Novice

14. juli 2003 - 15:15 #3

-- jeg glemte lige en "
<img src='pic1.gif' onmouseover="this.src=imgs[0].src" onmouseout="this.src=imgs[1].src">

Synes godt om

roenving Novice

14. juli 2003 - 15:17 #4

-- og jeg fik byttet om på imgs[0] og [1] i tagget ...

-- forøvrigt er denne lavet uden det link man tit ser rundt om den slags billeder ...

Synes godt om

kimg Nybegynder

14. juli 2003 - 15:28 #5

det skulle virke sådan at man køre cursor over de små billeder, så de bliver vist som det store billede

Synes godt om

roenving Novice

14. juli 2003 - 15:36 #6

Har de alle samme størrelse ?-)

Synes godt om

kimg Nybegynder

14. juli 2003 - 15:37 #7

Synes godt om

roenving Novice

14. juli 2003 - 15:38 #8

-- og skal det lægge sig det samme sted eller skal det lissom springe ud af det lille ?o]

Synes godt om

roenving Novice

14. juli 2003 - 15:51 #9

Synes godt om

roenving Novice

14. juli 2003 - 16:29 #10

Ved selv at teste det fandt jeg lige nogle småfejl og så en irriterende effekt -- men det kommer meget an på, om du vil have dem til at springe frem, eller der findes et fast sted, de skal vises:

<script language="javascript" type="text/javascript">
function getPos(elm) {
for(var zx=zy=0;elm!=null;zx+=elm.offsetLeft,zy+=elm.offsetTop,elm=elm.offsetParent);
return {x:zx,y:zy}
}
function aabnStort(elm){
fil = elm.src.substring(0,elm.src.indexOf("."))+"_stor.jpg";
document.getElementById("storBillede").src = fil;
bdiv = document.getElementById("stortBillede");
bdiv.style.top = getPos(elm).y+2;
bdiv.style.left = getPos(elm).x+2;
bdiv.style.display='block';
}
</script>

<div id="stortBillede" style="position:absolute;z-index:5;display:none;" onmouseout="this.style.display='none';"><img id="storBillede" src="" width="500"></div>

Og så dine små billeder:
<img src="../billede.jpg" width="100" onmouseover="aabnStort(this);">

Synes godt om

kimg Nybegynder

14. juli 2003 - 16:31 #11

Jeg får fejlmelding. uafsluttet streng
Her kan du se et eks. på hvad jeg søger, http://www.bilbasen.dk/biler/forhandlere/showcar.asp?id=618100063
eneste forskel er at mit første billede ikke ligger som lille billede.

Synes godt om

roenving Novice

14. juli 2003 - 16:39 #12

Ja, det var bl.a. den rettelse jeg har lavet ...

Men så skal vi bare fjerne positioneringsdelen og behøver ikke en div bagved ...

Synes godt om

kimg Nybegynder

14. juli 2003 - 19:30 #13

så ikke din rettelse, det virker ikke lige efter hensigten.

placering således:

stort billede

små1 små2 osv.

Synes godt om

roenving Novice

14. juli 2003 - 21:54 #14

Det er forstået, jeg ville placere det sådan:

<html>
<script language="javascript" type="text/javascript">
function aabnStort(elm){
fil = elm.src;//.substring(0,elm.src.indexOf("."))+"_stor.jpg";
document.getElementById("storBillede").src = fil;
}
</script>
<body>
<table CELLPADDING="3" BORDER="1" STYLE="border-color:#ddddd0d" align="center">
<tr><td colspan="5" align="center"><img id="storBillede" width="300" height="200" src="../billede.jpg"></td></tr>
<tr><td align="center"><img width="54" height="36" src="../billede.jpg" onmouseover="aabnStort(this);"></td>
<td align="center"><img width="54" height="36" src="../billede.jpg" onmouseover="aabnStort(this);"></td>
<td align="center"><img width="54" height="36" src="../billede.jpg" onmouseover="aabnStort(this);"></td>
<td align="center"><img width="54" height="36" src="../billede.jpg" onmouseover="aabnStort(this);"></td>
<td align="center"><img width="54" height="36" src="../billede.jpg" onmouseover="aabnStort(this);"></td></tr>
</table>
</body>
</html>

-- det er en hel del simplere uden positionering, så hvis du nu indsætter dine billeders navne i den nederste række og startbilledets i den øverste skulle den være der ...

Jeg har i det eksempel, jeg har lavet regnet med 5 billeder og udkommenteret den del, som tænker i forskellige billeder, men det kan du forhåbentlig finde tilbage til ?-)

Ellers må du spørge !-)

Synes godt om

kimg Nybegynder

14. juli 2003 - 22:26 #15

ja, det ser godt ud, men kan man få den til at vise start billedet, når cursor ikke er over lille billede.

Synes godt om

rangerbs Nybegynder

14. juli 2003 - 22:28 #16

Jeg lytter lige med engang :D

Synes godt om

roenving Novice

14. juli 2003 - 22:41 #17

Ja, du sætter bare det billede ind som src i det store billede !-)

Synes godt om

kimg Nybegynder

14. juli 2003 - 22:55 #18

Jeg har sat billede ind, men når jeg kører cursor over de små billeder skifter de som de skal, kan man ikke få det til at vise det oprindlige billede når cursor ikke er over et af de små billeder

Synes godt om

roenving Novice

14. juli 2003 - 23:01 #19

Nej, den havde jeg ikke fået med i den sidste udgave, så skal du sætte onmouseout på de små billeder:

<td align="center"><img width="54" height="36" src="../billede.jpg" onmouseover="aabnStort(this);" onmouseout="visDefault();">

-- og inde i script-sektionen:

function visDefault(){
document.getElementById("storBillede").src = "mitStandardBillede.jpg";
}

Synes godt om

kimg Nybegynder

14. juli 2003 - 23:37 #20

Takker det virker perfekt, kommer du med et svar

Kim

Synes godt om

roenving Novice

14. juli 2003 - 23:39 #21

Velbekomme '-)

Synes godt om

roenving Novice

15. juli 2003 - 00:23 #22

-- og tak for points ;~}

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
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.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS