Avatar billede ladyhawk Praktikant
26. marts 2004 - 07:57 Der 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...

1000 Tak for hjælpen
Avatar billede ladyhawk Praktikant
26. marts 2004 - 07:59 #1
Avatar billede ladyhawk Praktikant
26. marts 2004 - 08:00 #2
Jeg er i gang med en side til en bil forhandler, så jeg skal også have plads til Data om bilerne...
Avatar billede skovenborg Nybegynder
26. marts 2004 - 09:04 #3
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).
Avatar billede ladyhawk Praktikant
26. marts 2004 - 09:07 #4
Jeg ved godt at jeg måske er lidt krævende, men kunne du ikke vise mig hele scriptet?
Avatar billede cdc Novice
26. marts 2004 - 09:31 #5
er det et udtræk fra en db eller laver du det hele selv
Avatar billede ladyhawk Praktikant
26. marts 2004 - 09:53 #6
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.
Avatar billede skovenborg Nybegynder
26. marts 2004 - 14:56 #7
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');"

Håber du forstår ideen bag scriptet :-)
Avatar billede ladyhawk Praktikant
26. marts 2004 - 21:48 #8
<html>
<head>
<title>On Mouse Over Billeder

<script type="text/javascript">
  var imgName = "foto";
  var standardImg = "296701655_1.jpg";
  function changePic(imgSrc) {
        document.images[imgName].src = imgSrc;
}
</script>
</head>


<body>
<img src="standardfoto.jpg" width="150" height="150" name="foto">
<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)">
</body>
</html>

Jeg må have klokket i det, da der ikke bliver vist nogle billeder???
Avatar billede roenving Novice
26. marts 2004 - 21:59 #9
Det er strengvariabler, altså skal der plinger om:

<img src="foto1.jpg" width="60" onmouseover="changePic('296701655_1.jpg');" onmouseout="changePic(standardImg)">
<img src="foto2.jpg" width="60" onmouseover="changePic('296701655.jpg');" onmouseout="changePic(standardImg)">
<img src="foto3.jpg" width="60" onmouseover="changePic('296701655_3.jpg');" onmouseout="changePic(standardImg)">
<img src="foto4.jpg" width="60" onmouseover="changePic('296701655_2.jpg');" onmouseout="changePic(standardImg)">

-- og standardImg er defineret som variabel, så den kan genbruges !-)
Avatar billede skovenborg Nybegynder
26. marts 2004 - 22:01 #10
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).

Desuden burde du skrive:
<img src="foto1.jpg" width="60" onmouseover="changePic('296701655_1.jpg');" onmouseout="changePic(standardImg)">
<img src="foto2.jpg" width="60" onmouseover="changePic('296701655.jpg');" onmouseout="changePic(standardImg)">
<img src="foto3.jpg" width="60" onmouseover="changePic('296701655_3.jpg');" onmouseout="changePic(standardImg)">
<img src="foto4.jpg" width="60" onmouseover="changePic('296701655_2.jpg');" onmouseout="changePic(standardImg)">

Det sådan set det der er pointen med standardImg - den skal netop være en genvej til det billede du vil vise ved onmouseout.
Avatar billede ladyhawk Praktikant
27. marts 2004 - 00:53 #11
Vil det sige at begge skal sættes ind i scriptet? Altså både med navn og med standardImg betegenlse?

Efter at have rettet fejlene, sker der stadig ikke noget....  :o(

<html>
<head>
<title>On Mouse Over Billeder

<script type="text/javascript">
  var imgName = "foto";
  var standardImg="296701655_1.jpg";
  function changePic(imgSrc) {
        document.images[imgName].src = imgSrc;
}
</script>
</head>

<body>
<table border="0" width="500">
  <tr>
  <td>
    <img src="standardfoto.jpg" width="250" height="188" name="foto">
      <img src="foto1.jpg" width="60" onmouseover="changePic('296701655_1.jpg');" onmouseout="changePic(standardImg)">
      <img src="foto2.jpg" width="60" onmouseover="changePic('296701655.jpg');" onmouseout="changePic(standardImg)">
      <img src="foto3.jpg" width="60" onmouseover="changePic('296701655_3.jpg');" onmouseout="changePic(standardImg)">
    <img src="foto4.jpg" width="60" onmouseover="changePic('296701655_2.jpg');" onmouseout="changePic(standardImg)">
  </td>
</tr>
</table>
</body>
</html>
Avatar billede ladyhawk Praktikant
27. marts 2004 - 00:59 #12
Billederne ligger i samme mappe som dokumentet.
Avatar billede skovenborg Nybegynder
27. marts 2004 - 01:03 #13
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.
Avatar billede ladyhawk Praktikant
27. marts 2004 - 01:03 #14
Ahhhhh  fik lige set på min title -tag....den var ikke afsluttet, og nu sker der sørme noget...HA HAA  det ser kanon ud....

1000000000 tak for hjælpen.

Nu mangler jeg bare at der kommes med et svar, så jeg kan komme af med mine point...:o)
Avatar billede ladyhawk Praktikant
27. marts 2004 - 01:08 #15
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?
Avatar billede skovenborg Nybegynder
27. marts 2004 - 01:14 #16
*GG* - det da også rigtigt. Sådan en irriterende fejl er også svær at se ;-)

Hvorfor sætter du ikke bare stien ind i selve billedet fra starten:
<img src="296701655_1.jpg" width="250" height="188" name="foto">

Ellers skal du skrive:
<body onload="document.images[imgName].src = standardImg;">
Her vil det dog også være en god ide at preloade billedet først
Avatar billede ladyhawk Praktikant
27. marts 2004 - 01:21 #17
Ja, nogen gange kan man blive helt frustreret....og nu virker det fint. :o)
Avatar billede skovenborg Nybegynder
27. marts 2004 - 01:24 #18
det var da godt - og tak for point :-)
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