26. marts 2004 - 07:57Der er
17 kommentarer og 1 løsning
Skift billede - nok en gang!
Hej :o)
Jeg har kigget lidt på de forskellige sp om netop dette.....Jeg syntes ikke lige jeg kan gennemskue det, så jeg kunne godt tænke mig at få leveret et helt script, som jeg kan klippe og sætte ind i mit dokument.
Er der en venlig sjæl der kan hjælpe mig....gerne hurtigt...
du skal vel ikke gøre meget mere end at rette lidt i din funktion: function SkiftBillede(navn,nr) { var stort = document.images['stortbillede'].src; var name = stort.substr(53); document.images['stortbillede'].src = 'http://www.bilbasen.dk/images/bilinfo_billeder250/' + navn; }
document.images er nemlig et array som indeholder alle billede og derfor skal de tilgås med document.images[]. Parenteser bruges kun hvis det var en funktion (eller egentlig en metodhode i dette tilfælde).
Altså. Jeg skal lave en liste over brugte biler. Brugeren skal derfor have mulighed for at se billeder af bilen.
Og Den måde Bilbasen har sat deres visning med billederne, op på, kan jeg rigtig godt lide. Men jeg er ikke så skrap til java script endnu, så jeg kan ikke selv lave scriptet. Der skal ikke briges data baser. Det skal kun bruget til visning af billeder, og naturligvis også info om den pågældende bil.
undskyld - overså lige at det nok ikke var din side (bilbasen altså).
Du kan prøve den her for at skifte billeder ud: <script type="text/javascript"> var imgName = "bld"; var standardImg = "standardbld.png"; function changePic(imgSrc) { document.images[imgName].src = imgSrc; } </script> </head> <body> <img src="standardbld.png" width="150" height="150" name="bld"> <img src="bld1.png" width="20" onmouseover="changePic(this.src);" onmouseout="changePic(standardImg)"> <img src="bld2.png" width="20" onmouseover="changePic(this.src);" onmouseout="changePic(standardImg)"> <img src="bld3.png" width="20" onmouseover="changePic(this.src);" onmouseout="changePic(standardImg)"> </body> </html>
så det eneste du skal tilføje dine billeder du vil have vist er altså onmouseover="changePic(this.src);" onmouseout="changePic(standardImg)" den tager automatisk billedet fra dine "thumpnails" og indsætter i det store billede. Du kan også skrive en url i stedet fx: onmouseover="changePic('billede.jpg');"
der skal enkeltanførselstegn rundt om dine url's til billederne, altså der skal stå: <img src="foto1.jpg" width="60" onmouseover="changePic('296701655_1.jpg');" onmouseout="changePic('296701655_1.jpg')"> <img src="foto2.jpg" width="60" onmouseover="changePic('296701655.jpg');" onmouseout="changePic('296701655_1.jpg')"> <img src="foto3.jpg" width="60" onmouseover="changePic('296701655_3.jpg');" onmouseout="changePic('296701655_1.jpg')"> <img src="foto4.jpg" width="60" onmouseover="changePic('296701655_2.jpg');" onmouseout="changePic('296701655_1.jpg')">
Hvis de ikke er der tror javascript du referer til et objekt eller en variabel (i dette tilfælde tror den du prøver at få jpg-propertien fra objectet 296701655_1).
hmm, tror mere det pga. billederne ikke er loadet endnu. Da jeg lavede scriptet regnede jeg med at stien på img-elementet var den samme som den du skulle skifte det store foto ud med, altså: <img src="296701655_1.jpg" width="60" onmouseover="changePic('296701655_1.jpg');" onmouseout="changePic(standardImg)"> eller blot: <img src="296701655_1.jpg" width="60" onmouseover="changePic(this.src);" onmouseout="changePic(standardImg)">
Når du nu sætter et helt andet billede ind vil jeg anbefale dig at preloade dem først. <script type="text/javascript"> img1 = new Image(); img1.src = "296701655_1.jpg"; img2 = new Image(); img2.src = '296701655_1.jpg'; img3 = new Image(); img3.src = '296701655.jpg'; img4 = new Image(); img4.src = '296701655_3.jpg'; img5 = new Image(); img5.src = '296701655_2.jpg'; var imgName = "foto"; var standardImg="296701655_1.jpg"; function changePic(imgSrc) { document.images[imgName].src = imgSrc; } </script>
På den måde bliver dine billeder loadet før du egentlig skal til at bruge mouseover effekten.
Nu er der bare tilbage at sprøge hvordan jeg får det store billede at se, når siden loader. Det vives nemlig ikke før jeg har ført musen hen over et af de små billeder.
Har det noget me preload at gøre? I så fald, hvordan gør jeg det?
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.