Fotoboek

Status
Niet open voor verdere reacties.

loesje142

Gebruiker
Lid geworden
24 dec 2008
Berichten
5
Ik ben bezig met een soort van fotoboekje te maken voor op mijn site.
Ik zal er even bij vermelden dat ik niks weet van Javascript en in ook niet echt handig ben met Internet sites maken.:o

Ik had een Javascript van een andere pagina af gehaald en mijn eigen foto's er in gezet. Alles werkte heel goed ( vond ik al erg knap van mijzelf).
Tot dat ik het zelfde foto boekje er nog een keer onder wilde zetten. De foto's worden nog wel weergegeven maar ik kan ze niet meer wisselen als ik er met mijn muis op klik.
Is er iemand die mij kan helpen? Hier even een kopie van het script.


<html>

<head>

<!--dit gedeelte tussen de head tags plaatsen, hier niets wijzigen-->
<SCRIPT LANGUAGE="JavaScript">


<!-- Begin
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);

ns3up = (browserName == "Netscape" && browserVer >= 3);
ie4up = (browserName.indexOf("Microsoft") >= 0 && browserVer >= 4);

function doPic(imgName) {
if (ns3up || ie4up) {
imgOn = ("" + imgName);
document.mainpic.src = imgOn;
}
}
// End -->
</script>

</HEAD>



<body background="background.jpg" link="#000000" vlink="#000000" alink="blue">


<center>
<font face="monotype corsiva">
<h1></h1>
</center>
</font>
<font face="Comic Sans MS">
<h1></h1><br>
<br>
<br>
&nbsp;Titel</a>
<div align="left">
<table width=0 border=0 cellspacing=0 cellpadding=0>
<tr>
<td><a href="javascript:doPic('foto/069.jpg');"><img src="foto/069.jpg" width=75 height=65 border=0></a></td>
<td><a href="javascript:doPic('foto/068.jpg');"><img src="foto/068.jpg" width=75 height=65 border=0></a></td>
<td><a href="javascript:doPic('foto/067.jpg');"><img src="foto/067.jpg" width=75 height=65 border=0></a></td>
<td><a href="javascript:doPic('foto/066.jpg');"><img src="foto/066.jpg" width=75 height=65 border=0></a></td>
</tr>
<tr>
<td colspan=4 align=left><img name="mainpic" src="foto/069.jpg" width=300 height=225 border=0></td>
</td>
</tr>
</table>


</body>
</html>
 
Laatst bewerkt:
Het script gebruikt browser detectie. Genoeg rede om het meteen in de prullenbak te gooien. Zo te zien doet het niks behalve in Netscape en IE.

Maar de rede dat het maar één keer op een pagina kan voorkomen is dat het één hoofd element gebruikt om de grote plaatjes te weergeven, om precies te zijn "document.mainpic". Deze manier van elementen bereiken is ook stokoud en hoort niet meer gebruikt te worden.

Om twéé keer een fotoboek op één pagina te plaatsen moet je het script iig aanpassen om niet een vast element te gebruiken om de vergroting te laten zien. Je moet het element dus doorgeven in de functie.

iets als dit:

Code:
<script type="text/javascript">
function doPic(mainPic ,imgName)
{
  document.getElementById(mainPic).src = imgName;
}
</script>

En de html voor een fotoboek:
Code:
<a href="javascript:doPic([COLOR="Red"]"fotoboek1",[/COLOR] 'foto/069.jpg');"><img src="foto/069.jpg" width="75" height="65" alt=""></a>
<a href="javascript:doPic([COLOR="Red"]"fotoboek1",[/COLOR] 'foto/069.jpg');"><img src="foto/069.jpg" width="75" height="65" alt=""></a>
<a href="javascript:doPic([COLOR="Red"]"fotoboek1",[/COLOR] 'foto/069.jpg');"><img src="foto/069.jpg" width="75" height="65" alt=""></a>
<a href="javascript:doPic([COLOR="Red"]"fotoboek1",[/COLOR] 'foto/069.jpg');"><img src="foto/069.jpg" width="75" height="65" alt=""></a>
<a href="javascript:doPic([COLOR="Red"]"fotoboek1",[/COLOR] 'foto/069.jpg');"><img src="foto/069.jpg" width="75" height="65" alt=""></a>
<br />

<img [COLOR="Red"]id="fotoboek1"[/COLOR] src="foto/069.jpg" width="300" height="225" alt="">


Voor een tweede fotoboek moet je dan de id van het grote plaatje weizigen en de andere id doorgeven aan de functie doPic:

Code:
<a href="javascript:doPic([COLOR="Red"]"fotoboek2",[/COLOR] 'foto/069.jpg');"><img src="foto/069.jpg" width="75" height="65" alt=""></a>
<a href="javascript:doPic([COLOR="Red"]"fotoboek2",[/COLOR] 'foto/069.jpg');"><img src="foto/069.jpg" width="75" height="65" alt=""></a>
<a href="javascript:doPic([COLOR="Red"]"fotoboek2",[/COLOR] 'foto/069.jpg');"><img src="foto/069.jpg" width="75" height="65" alt=""></a>
<a href="javascript:doPic([COLOR="Red"]"fotoboek2",[/COLOR] 'foto/069.jpg');"><img src="foto/069.jpg" width="75" height="65" alt=""></a>
<a href="javascript:doPic([COLOR="Red"]"fotoboek2",[/COLOR] 'foto/069.jpg');"><img src="foto/069.jpg" width="75" height="65" alt=""></a>
<br />

<img [COLOR="Red"]id="fotoboek2"[/COLOR] src="foto/069.jpg" width="300" height="225" alt="">
 
Laatst bewerkt:
Bedankt, maar wat bedoel je precies met "Het script gebruikt browser detectie. Genoeg rede om het meteen in de prullenbak te gooien. Zo te zien doet het niks behalve in Netscape en IE."

Kan ik het dan beter helemaal niet gebruiken?
 
Niet zoals het er eerst stond. Maar wat in mijn reactie staat zou moeten werken in alle standards-compliant browsers ;)
 
Ik heb het net geprobeerd wat jij had gemaakt. Alleen als ik nu op de kleine foto's klik verwisselt de grote foto niet. Ik zal vast wel wat fout gedaan hebben.:confused:
 
Misschien, maar ik maak ook geregeld foutjes :p Zou best nog eens aan mij kunnen liggen. Kun je je volledige html code laten zien?
 
Ik heb het nu zo staan:

<html>

<head>
<script type="text/javascript">
function doPic(mainPic ,imgName)
{
document.getElementById(mainPic).src = imgName;
}
</script>

</HEAD>



<body background="background.jpg" link="#000000" vlink="#000000" alink="blue">


<center>
<font face="monotype corsiva">
<h1></h1>
</center>
</font>
<font face="Comic Sans MS">
<h1></h1>
<br>
<br>
&nbsp;</a>
<div align="left">
<table width=0 border=0 cellspacing=0 cellpadding=0>
<tr>
<td><a href="javascript:doPic("fotoboek1",'foto/069.jpg');"><img src="foto/069.jpg" width="75" height="65" border=0 alt=""></a></td>
<td><a href="javascript:doPic("fotoboek1",'foto/068.jpg');"><img src="foto/068.jpg" width="75" height="65" border=0 alt=""></a></td>
<td><a href="javascript:doPic("fotoboek1",'foto/067.jpg');"><img src="foto/067.jpg" width="75" height="65" border=0 alt=""></a></td>
<td><a href="javascript:doPic("fotoboek1",'foto/066.jpg');"><img src="foto/066.jpg" width="75" height="65" border=0 alt=""></a></td>
</tr>
<tr>
<td colspan=4 align=left><img id="fotoboek1" src="foto/069.jpg" width="300" height="225"border=0 alt=""></td>

</td>
</tr>
</table>
<br>
<br>

</body>
</html>

Succes ik snap er niks van:D
 
oh natuurlijk, het ligt aan de dubbele quotes (mijn fout dus :p )

Dit moet herschreven:
Code:
<a href="javascript:doPic("fotoboek1",'foto/069.jpg');">

naar dit:
Code:
<a href="javascript:doPic('fotoboek1','foto/069.jpg');">

(enkele quotes om fotoboek1 inplaats van dubbele quotes)

De dubbele quotes verstoren de dubbelle quotes van <a href="">. Het zou in ieder geval moeten werken met enkele quotes :)
 
JA! nu werkt het:) Super bedankt... Dat het aan zo iets kan liggen. :shocked: Had ik nooit gevonden.
 
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan