Foto's op de website+
-
JURION - Lid geworden op: 21 sep 2005, 20:31
- Locatie: Prov.Antwerpen
hallo,
ik zou foto's willen op onze website zetten, allemaal kleine foto's met een beetje tekst en wanneer je op de foto klikt dat hij dan groter word, zoals op volgende website :
http://www.kvcwesterlo.be/modules/wfcha ... pagenum=19
ik zou foto's willen op onze website zetten, allemaal kleine foto's met een beetje tekst en wanneer je op de foto klikt dat hij dan groter word, zoals op volgende website :
http://www.kvcwesterlo.be/modules/wfcha ... pagenum=19
-
wamukota - Lid geworden op: 13 dec 2004, 22:33
- Locatie: Brugge
Maak van iedere foto twee versies. Een grote foto (bv. 800 x 600) en een kleine foto (bv. 150 x 100).
Zorg dat je ze anders noemt.
Bv : foto_1_groot.jpg en foto_1_klein.jpg
Upload al je foto's naar je website in een mapje (bv. mijnfotos)
Dan maak je een HTML pagina waarin je voor iedere foto de volgende code opneemt :
<a href="mijnfotos/foto_1.groot.jpg" target="_blank"><img src="mijnfotos/foto_1_klein.jpg" border=0><br>Dit is foto 1</a>
Dan zal de gebruiker de kleine foto zien, zonder rand (<img ... >)
Als hij op de ftot klikt, dan wordt de foto_1_groot.jpg geladen en getoond in een apart venster.
Als je in hetzelfde venster wil blijven, dan laat je de target="_blank" uit de <a href> tag
Alain
Zorg dat je ze anders noemt.
Bv : foto_1_groot.jpg en foto_1_klein.jpg
Upload al je foto's naar je website in een mapje (bv. mijnfotos)
Dan maak je een HTML pagina waarin je voor iedere foto de volgende code opneemt :
<a href="mijnfotos/foto_1.groot.jpg" target="_blank"><img src="mijnfotos/foto_1_klein.jpg" border=0><br>Dit is foto 1</a>
Dan zal de gebruiker de kleine foto zien, zonder rand (<img ... >)
Als hij op de ftot klikt, dan wordt de foto_1_groot.jpg geladen en getoond in een apart venster.
Als je in hetzelfde venster wil blijven, dan laat je de target="_blank" uit de <a href> tag
Alain
-
coderunner - Lid geworden op: 27 mar 2006, 04:35
- Locatie: Aubauke - Aentwaerepe
Op bovenstaande website werd gewerkt met Flash ...JURION schreef:hallo,
ik zou foto's willen op onze website zetten, allemaal kleine foto's met een beetje tekst en wanneer je op de foto klikt dat hij dan groter word, zoals op volgende website :
http://www.kvcwesterlo.be/modules/wfcha ... pagenum=19
Een alternatief is door gebruik te maken van een javascript. Een voorbeeld met de code en uitleg van het script vind je hier
mvg,
Coderunner
-
JURION - Lid geworden op: 21 sep 2005, 20:31
- Locatie: Prov.Antwerpen
Coderunner, dit is wat ik wil, maar het is in het Engels en daar begrijp ik niet zoveel van, is er ergens een Nederlandse vertaling, in ieder geval al bedankt
ook aan wamukota, heb jou voorbeeld ook geprobeerd maar ik krijg er maar een foto op.
groetjes
ook aan wamukota, heb jou voorbeeld ook geprobeerd maar ik krijg er maar een foto op.
groetjes
-
waltherweymeersch - Lid geworden op: 06 mei 2005, 17:59
-
coderunner - Lid geworden op: 27 mar 2006, 04:35
- Locatie: Aubauke - Aentwaerepe
Hallo JURION,JURION schreef:Coderunner, dit is wat ik wil, maar het is in het Engels en daar begrijp ik niet zoveel van, is er ergens een Nederlandse vertaling, in ieder geval al bedankt
ook aan wamukota, heb jou voorbeeld ook geprobeerd maar ik krijg er maar een foto op.
groetjes
Ik heb een voorbeeld uitgewerkt en daar waar het kan alles vertaald en commentaar bijgevoegd.
Code: Selecteer alles
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>FotoAlbum</title>
<script language="JavaScript" type="text/javascript">
// hier definieer je alle foto's, Als je meer dan 5 foto's hebt, voeg er dan afbeeldingen[5]=["foto6.jpg", "#"] aan toe en verhoog het nummer
var afbeeldingen=new Array()
afbeeldingen[0]=["foto1.jpg", "#"] // "pad en naam van de foto", "eventuele hyperlink"
afbeeldingen[1]=["foto2.jpg", "#"]
afbeeldingen[2]=["foto3.jpg", "#"]
afbeeldingen[3]=["foto4.jpg", "#"]
afbeeldingen[4]=["foto5.jpg", "#"]
// Laad foto voor deze te tonen: "ja" of "nee"
var voorladen="ja"
// optioneel: hier kun je een target invullen bij framesgebruik
var optlinktarget=""
var beeldrandbreedte=0
var filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"
// hieronder niets meer wijzigen
if (voorladen=="ja"){
for (x=0; x<afbeeldingen.length; x++){
var ditbeeldje=new Image()
ditbeeldje.src=afbeeldingen[x][0]}}
function beeldcode(dezeafbeelding){
var beeldhtml=""
if (dezeafbeelding[1]!="")
beeldhtml='<a href="'+dezeafbeelding[1]+'" target="'+optlinktarget+'">'
beeldhtml+='<img src="'+dezeafbeelding[0]+'" border="'+beeldrandbreedte+'">'
if (dezeafbeelding[1]!="")
beeldhtml+='</a>'
return beeldhtml}
function wijzigbeeld(beeldplaatsing, beeldindex){
if (document.getElementById){
var imgobj=document.getElementById(beeldplaatsing)
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filterstring
imgobj.filters[0].Apply()}
imgobj.innerHTML=beeldcode(afbeeldingen[beeldindex])
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false}}
</script>
</head>
<body>
<table>
<tr>
<td width="200" height="500" valign="middle">
<!--Vervang foto1.jpg door de juiste benaming van de foto's-->
<!--Verander de width (= breedte foto) en de height (= hoogte foto) door de juiste waarde verhouding-->
<!--Plaats je meer dan 5 foto's verhoog dan de waarde in ('beeldplaatsing', nr)-->
<a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 0)">
<img src="foto1.jpg" width= 75 height= 50 border=0></a><br>
<a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 1)">
<img src="foto2.jpg" width="75" height="50" border="0"></a><br>
<a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 2)">
<img src="foto3.jpg" width="75" height="50" border="0"></a><br>
<a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 3)">
<img src="foto4.jpg" width="75" height="50" border="0"></a><br>
<a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 4)">
<img src="foto5.jpg" width="75" height="50" border="0"></a><br>
</td>
<td height="300">
<!--Hier wordt de vergrootte foto getoond-->
<!-- Hoogte en breedte van deze DIV-tag instellen op de grootste afbeelding -->
<div id="beeldplaatsing" style="width:600px;height:400px"></div>
</td>
</tr>
</table>
</body>
</html>
Nog hulp nodig? Laat het hier dan weten.
Succes.
mvg,
Coderunner
-
JURION - Lid geworden op: 21 sep 2005, 20:31
- Locatie: Prov.Antwerpen
Hallo Coderunner,
heb nog een paar probleempjes, als ik over de foto's ga met de muis dan krijg ik een error melding en tekenreeksconstante is niet afgesloten.
moet ik de foto's alleen invoegen bij <img src="foto2.jpg" width="75" height enz......
Mvg.
heb nog een paar probleempjes, als ik over de foto's ga met de muis dan krijg ik een error melding en tekenreeksconstante is niet afgesloten.
moet ik de foto's alleen invoegen bij <img src="foto2.jpg" width="75" height enz......
Mvg.
-
coderunner - Lid geworden op: 27 mar 2006, 04:35
- Locatie: Aubauke - Aentwaerepe
Hallo JURION,
Ten eerste de echte vergrootte foto:Verander foto1.jpg foto2.jpg enz door de juiste fotobenaming
Heb je minder foto's dan verwijder je de overbodige lijnen
Heb je meer foto's dan voeg je volgende lijn toe en verhoog je het nummer achter afbeeldingen[nr]
Ten tweede de thumbnail:Verander foto1.jpg foto2.jpg enz door de juiste fotobenaming
Heb je minder foto's dan verwijder je de overbodige lijnen
Heb je meer foto's dan voeg je volgende lijnen toe en verhoog je het nummer achter ('beeldplaatsing', nr)
Zie dat je in beide gevallen evenveel foto's hebt!
Nog hulp nodig? Laat het hier dan weten.
Succes.
mvg,
Coderunner
Krijg je een foutmelding dan is de code niet helemaal goed gekopieerd en/of heb je bij het wijzigen van de fotobenaming een teken vergeten, kijk deze nog eens na of geef een url waar ik de broncode kan zien waar je fout(en) zitten.heb nog een paar probleempjes, als ik over de foto's ga met de muis dan krijg ik een error melding en tekenreeksconstante is niet afgesloten
Je dient de juiste benaming van de foto's in te vullen op twee plaatsen.moet ik de foto's alleen invoegen bij <img src="foto2.jpg" width="75" height enz......
Mvg.
Ten eerste de echte vergrootte foto:
Code: Selecteer alles
var afbeeldingen=new Array()
afbeeldingen[0]=["foto1.jpg", "#"]
afbeeldingen[1]=["foto2.jpg", "#"]
afbeeldingen[2]=["foto3.jpg", "#"]
afbeeldingen[3]=["foto4.jpg", "#"]
afbeeldingen[4]=["foto5.jpg", "#"]
Heb je minder foto's dan verwijder je de overbodige lijnen
Heb je meer foto's dan voeg je volgende lijn toe en verhoog je het nummer achter afbeeldingen[nr]
Code: Selecteer alles
afbeeldingen[5]=["foto6.jpg", "#"]
enz
Ten tweede de thumbnail:
Code: Selecteer alles
<a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 0)">
<img src="foto1.jpg" width= 75 height= 50 border=0></a><br>
<a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 1)">
<img src="foto2.jpg" width="75" height="50" border="0"></a><br>
<a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 2)">
<img src="foto3.jpg" width="75" height="50" border="0"></a><br>
<a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 3)">
<img src="foto4.jpg" width="75" height="50" border="0"></a><br>
<a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 4)">
<img src="foto5.jpg" width="75" height="50" border="0"></a><br>
Heb je minder foto's dan verwijder je de overbodige lijnen
Heb je meer foto's dan voeg je volgende lijnen toe en verhoog je het nummer achter ('beeldplaatsing', nr)
Code: Selecteer alles
<a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 5)">
<img src="foto6.jpg" width="75" height="50" border="0"></a><br>
Nog hulp nodig? Laat het hier dan weten.
Succes.
mvg,
Coderunner
-
JURION - Lid geworden op: 21 sep 2005, 20:31
- Locatie: Prov.Antwerpen
Hallo coderunner,
hieronder de htlm tekst zoals ik ze op mijn pagina heb staan, er is nog maar 1 foto geselecteerd en heb de pagina nog niet op het net staan(omdat ze nog niet klaar is, wil er nog enkele andere dingen bij doen later)
hopelijk heb je er wat aan,
toch al bedankt
jurion
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>spelersalbum</title>
<script language="JavaScript" type="text/javascript">
var afbeeldingen=new Array()
afbeeldingen[0]=["../../../../WEBSITE%20VETERANEN%20MAP/foto's%20kaartprijskamp%202006/Afbeelding%20100.jpg", "#"]
afbeeldingen[1]=["foto2.jpg", "#"]
afbeeldingen[2]=["foto3.jpg", "#"]
afbeeldingen[3]=["foto4.jpg", "#"]
afbeeldingen[4]=["foto5.jpg", "#"]
// Laad foto voor deze te tonen: "ja" of "nee"
var voorladen="ja"
// optioneel: hier kun je een target invullen bij framesgebruik
var optlinktarget=""
var beeldrandbreedte=0
var
filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0
Duration=0.7)"
// hieronder niets meer wijzigen
if (voorladen=="ja"){
for (x=0; x<afbeeldingen.length; x++){
var ditbeeldje=new Image()
ditbeeldje.src=afbeeldingen[x][0]}}
function beeldcode(dezeafbeelding){
var beeldhtml=""
if (dezeafbeelding[1]!="")
beeldhtml='<a href="'+dezeafbeelding[1]+'" target="'+optlinktarget+'">'
beeldhtml+='<img src="'+dezeafbeelding[0]+'"
border="'+beeldrandbreedte+'">;'
if (dezeafbeelding[1]!="")
beeldhtml+='</a>' return beeldhtml}
function wijzigbeeld(beeldplaatsing, beeldindex){
if (document.getElementById){
var imgobj=document.getElementById(beeldplaatsing)
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filterstring
imgobj.filters[0].Apply()}
imgobj.innerHTML=beeldcode(afbeeldingen[beeldindex])
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false}}
</script>
</head>
<body>
<table>
<tr>
<td width="200" height="500" valign="top" align="right">
<!--Vervang foto1.jpg door de juiste benaming van de foto's-->
<!--Verander de width (= breedte foto) en de height (= hoogte foto) door de juiste waarde
verhouding-->
<!--Plaats je meer dan 5 foto's verhoog dan de waarde in ('beeldplaatsing', nr)-->
<a href="../../../../WEBSITE%20VETERANEN%20MAP/foto's%20kaartprijskamp%202006/Afbeelding%20100.jpg" onMouseover="wijzigbeeld('beeldplaatsing', 0)"><img src="../../../../WEBSITE%20VETERANEN%20MAP/foto's%20kaartprijskamp%202006/Afbeelding%20100.jpg" width="75" height="50" border="0"></a><br>
<a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 1)"><img src="foto2.jpg" width="75" height="50" border="0"></a><br>
<a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 2)"><img src="foto3.jpg" width="75" height="50" border="0"></a><br>
<a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 3)"><img src="foto4.jpg" width="75" height="50" border="0"></a><br>
<a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 4)"><img src="foto5.jpg" width="75" height="50" border="0"></a><br>
</td>
<td height="300">
<!--Hier wordt de vergrootte foto getoond-->
<!-- Hoogte en breedte van deze DIV-tag instellen op de grootste
afbeelding -->
<div id="beeldplaatsing" style="width:600px;height:400px"></div>
</td>
</tr> </table>
</body>
</html>
hieronder de htlm tekst zoals ik ze op mijn pagina heb staan, er is nog maar 1 foto geselecteerd en heb de pagina nog niet op het net staan(omdat ze nog niet klaar is, wil er nog enkele andere dingen bij doen later)
hopelijk heb je er wat aan,
toch al bedankt
jurion
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>spelersalbum</title>
<script language="JavaScript" type="text/javascript">
var afbeeldingen=new Array()
afbeeldingen[0]=["../../../../WEBSITE%20VETERANEN%20MAP/foto's%20kaartprijskamp%202006/Afbeelding%20100.jpg", "#"]
afbeeldingen[1]=["foto2.jpg", "#"]
afbeeldingen[2]=["foto3.jpg", "#"]
afbeeldingen[3]=["foto4.jpg", "#"]
afbeeldingen[4]=["foto5.jpg", "#"]
// Laad foto voor deze te tonen: "ja" of "nee"
var voorladen="ja"
// optioneel: hier kun je een target invullen bij framesgebruik
var optlinktarget=""
var beeldrandbreedte=0
var
filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0
Duration=0.7)"
// hieronder niets meer wijzigen
if (voorladen=="ja"){
for (x=0; x<afbeeldingen.length; x++){
var ditbeeldje=new Image()
ditbeeldje.src=afbeeldingen[x][0]}}
function beeldcode(dezeafbeelding){
var beeldhtml=""
if (dezeafbeelding[1]!="")
beeldhtml='<a href="'+dezeafbeelding[1]+'" target="'+optlinktarget+'">'
beeldhtml+='<img src="'+dezeafbeelding[0]+'"
border="'+beeldrandbreedte+'">;'
if (dezeafbeelding[1]!="")
beeldhtml+='</a>' return beeldhtml}
function wijzigbeeld(beeldplaatsing, beeldindex){
if (document.getElementById){
var imgobj=document.getElementById(beeldplaatsing)
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filterstring
imgobj.filters[0].Apply()}
imgobj.innerHTML=beeldcode(afbeeldingen[beeldindex])
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false}}
</script>
</head>
<body>
<table>
<tr>
<td width="200" height="500" valign="top" align="right">
<!--Vervang foto1.jpg door de juiste benaming van de foto's-->
<!--Verander de width (= breedte foto) en de height (= hoogte foto) door de juiste waarde
verhouding-->
<!--Plaats je meer dan 5 foto's verhoog dan de waarde in ('beeldplaatsing', nr)-->
<a href="../../../../WEBSITE%20VETERANEN%20MAP/foto's%20kaartprijskamp%202006/Afbeelding%20100.jpg" onMouseover="wijzigbeeld('beeldplaatsing', 0)"><img src="../../../../WEBSITE%20VETERANEN%20MAP/foto's%20kaartprijskamp%202006/Afbeelding%20100.jpg" width="75" height="50" border="0"></a><br>
<a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 1)"><img src="foto2.jpg" width="75" height="50" border="0"></a><br>
<a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 2)"><img src="foto3.jpg" width="75" height="50" border="0"></a><br>
<a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 3)"><img src="foto4.jpg" width="75" height="50" border="0"></a><br>
<a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 4)"><img src="foto5.jpg" width="75" height="50" border="0"></a><br>
</td>
<td height="300">
<!--Hier wordt de vergrootte foto getoond-->
<!-- Hoogte en breedte van deze DIV-tag instellen op de grootste
afbeelding -->
<div id="beeldplaatsing" style="width:600px;height:400px"></div>
</td>
</tr> </table>
</body>
</html>
-
coderunner - Lid geworden op: 27 mar 2006, 04:35
- Locatie: Aubauke - Aentwaerepe
Hallo JURION,
Je fout zit hier
Moet zijn:
Let op:
-Bij <a href="#" ... > moet je niets veranderen.
-Alleen waar <img src="foto1.jpg" ...> verander je foto1.jpg door de juiste benaming van je foto,
in jouw voorbeeld :
../../../../WEBSITE%20VETERANEN%20MAP/foto's%20kaartprijskamp%202006/Afbeelding%20100.jpg"
Dit is de werkende versie
GOEDE RAAD
Gebruik aub GEEN spaties is folders en bestandsnamen. Dit resulteert in de "%20" html code wat de code is voor een spatie, sommige browsers hebben daar last mee.
DUS NIET:
WEBSITE%20VETERANEN%20MAP/foto's%20kaartprijskamp%202006/Afbeelding%20100.jpg
MAAR:
Schrijf de bestandsnamen en/of folders aan elkaar en begin elk nieuw woord met een hoofdletter
zie onderstaande voorbeelden.
WebsiteVeteranenMap/FotosKaartprijskamp2006/Afbeelding100.jpg
of
Gebruik de underscore om woorden te scheiden
Website_Veteranen_Map/Fotos_Kaartprijskamp_2006/Afbeelding_100.jpg
Let er dan wel op dat de bestandsnamen en folders dezelfde schrijfwijze hebben!
Succes
mvg,
Coderunner
Je fout zit hier
Code: Selecteer alles
<a href="../../../../WEBSITE%20VETERANEN%20MAP/foto's%20kaartprijskamp%202006/Afbeelding%20100.jpg" onMouseover="wijzigbeeld('beeldplaatsing', 0)"><img src="../../../../WEBSITE%20VETERANEN%20MAP/foto's%20kaartprijskamp%202006/Afbeelding%20100.jpg" width="75" height="50" border="0"></a><br>
Code: Selecteer alles
<a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 0)"><img src="../../../../WEBSITE%20VETERANEN%20MAP/foto's%20kaartprijskamp%202006/Afbeelding%20100.jpg" width="75" height="50" border="0"></a><br>
-Bij <a href="#" ... > moet je niets veranderen.
-Alleen waar <img src="foto1.jpg" ...> verander je foto1.jpg door de juiste benaming van je foto,
in jouw voorbeeld :
../../../../WEBSITE%20VETERANEN%20MAP/foto's%20kaartprijskamp%202006/Afbeelding%20100.jpg"
Dit is de werkende versie
Code: Selecteer alles
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 6.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>spelersalbum</title>
<script language="JavaScript" type="text/javascript">
var afbeeldingen=new Array()
afbeeldingen[0]=["../../../../WEBSITE%20VETERANEN%20MAP/foto's%20kaartprijskamp%202006/Afbeelding%20100.jpg", "#"]
afbeeldingen[1]=["foto2.jpg", "#"]
afbeeldingen[2]=["foto3.jpg", "#"]
afbeeldingen[3]=["foto4.jpg", "#"]
afbeeldingen[4]=["foto5.jpg", "#"]
// Laad foto voor deze te tonen: "ja" of "nee"
var voorladen="ja"
// optioneel: hier kun je een target invullen bij framesgebruik
var optlinktarget=""
var beeldrandbreedte=0
var filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"
// Laad foto voor deze te tonen: "ja" of "nee"
var voorladen="ja"
// optioneel: hier kun je een target invullen bij framesgebruik
var optlinktarget=""
var beeldrandbreedte=0
var filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"
// hieronder niets meer wijzigen
if (voorladen=="ja"){
for (x=0; x<afbeeldingen.length; x++){
var ditbeeldje=new Image()
ditbeeldje.src=afbeeldingen[x][0]}}
function beeldcode(dezeafbeelding){
var beeldhtml=""
if (dezeafbeelding[1]!="")
beeldhtml='<a href="'+dezeafbeelding[1]+'" target="'+optlinktarget+'">'
beeldhtml+='<img src="'+dezeafbeelding[0]+'" border="'+beeldrandbreedte+'">'
if (dezeafbeelding[1]!="")
beeldhtml+='</a>'
return beeldhtml}
function wijzigbeeld(beeldplaatsing, beeldindex){
if (document.getElementById){
var imgobj=document.getElementById(beeldplaatsing)
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filterstring
imgobj.filters[0].Apply()}
imgobj.innerHTML=beeldcode(afbeeldingen[beeldindex])
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false}}
</script>
</head>
<body>
<table>
<tr>
<td width="200" height="500" valign="top" align="right">
<!--Vervang foto1.jpg door de juiste benaming van de foto's-->
<!--Verander de width (= breedte foto) en de height (= hoogte foto) door de juiste waarde
verhouding-->
<!--Plaats je meer dan 5 foto's verhoog dan de waarde in ('beeldplaatsing', nr)-->
<a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 0)"><img src="../../../../WEBSITE%20VETERANEN%20MAP/foto's%20kaartprijskamp%202006/Afbeelding%20100.jpg" width="75" height="50" border="0"></a><br>
<a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 1)"><img src="foto2.jpg" width="75" height="50" border="0"></a><br>
<a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 2)"><img src="foto3.jpg" width="75" height="50" border="0"></a><br>
<a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 3)"><img src="foto4.jpg" width="75" height="50" border="0"></a><br>
<a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 4)"><img src="foto5.jpg" width="75" height="50" border="0"></a><br>
</td>
<td height="300" align="center">
<!--Hier wordt de vergrootte foto getoond-->
<!-- Hoogte en breedte van deze DIV-tag instellen op de grootste afbeelding -->
<div id="beeldplaatsing" style="width:600px;height:400px"></div>
</td>
</tr> </table>
</body>
</html>
Gebruik aub GEEN spaties is folders en bestandsnamen. Dit resulteert in de "%20" html code wat de code is voor een spatie, sommige browsers hebben daar last mee.
DUS NIET:
WEBSITE%20VETERANEN%20MAP/foto's%20kaartprijskamp%202006/Afbeelding%20100.jpg
MAAR:
Schrijf de bestandsnamen en/of folders aan elkaar en begin elk nieuw woord met een hoofdletter
zie onderstaande voorbeelden.
WebsiteVeteranenMap/FotosKaartprijskamp2006/Afbeelding100.jpg
of
Gebruik de underscore om woorden te scheiden
Website_Veteranen_Map/Fotos_Kaartprijskamp_2006/Afbeelding_100.jpg
Let er dan wel op dat de bestandsnamen en folders dezelfde schrijfwijze hebben!
Succes
mvg,
Coderunner
-
JURION - Lid geworden op: 21 sep 2005, 20:31
- Locatie: Prov.Antwerpen
Hoi,
als ik naar het voorbeeld ga kijken van m'n pagina krijg ik nog een foutmelding nl.
(er is een runtime-fout opgetreden, wilt u beginnen met de foutopsporing?
Regel:21
fout: tekenreeksconstante is niet afgesloten)
en als ik dan de foutopsporing doe krijg ik als fout op de volgende regel :
filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0
Duration=0.7)"
sorry voor de last maar ik ben nog maar een beginneling in html
vriendelijke groeten
als ik naar het voorbeeld ga kijken van m'n pagina krijg ik nog een foutmelding nl.
(er is een runtime-fout opgetreden, wilt u beginnen met de foutopsporing?
Regel:21
fout: tekenreeksconstante is niet afgesloten)
en als ik dan de foutopsporing doe krijg ik als fout op de volgende regel :
filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0
Duration=0.7)"
sorry voor de last maar ik ben nog maar een beginneling in html
vriendelijke groeten
-
coderunner - Lid geworden op: 27 mar 2006, 04:35
- Locatie: Aubauke - Aentwaerepe
Hoi Jurion,JURION schreef:Hoi,
als ik naar het voorbeeld ga kijken van m'n pagina krijg ik nog een foutmelding nl.
(er is een runtime-fout opgetreden, wilt u beginnen met de foutopsporing?
Regel:21
fout: tekenreeksconstante is niet afgesloten)
en als ik dan de foutopsporing doe krijg ik als fout op de volgende regel :
filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0
Duration=0.7)"
sorry voor de last maar ik ben nog maar een beginneling in html
vriendelijke groeten
Dit is helemaal geen last hoor
Er gaat blijkbaar iets mis tijdens het kopiëren van de html code.
Welk programma gebruik je om je website te maken ?
Je krijgt die fout omdat blijkbaar bij het kopiëren de lijn wordt äfgekapt en ipv op één lijn, de code op meerdere lijnen plaats. De code moet achter elkaar staan op een lijn ZONDER een spatie
var filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"
Je weet al als het niet lukt dat je hier terecht kan
mvg,
Coderunner
-
JURION - Lid geworden op: 21 sep 2005, 20:31
- Locatie: Prov.Antwerpen
coderunner,
ik heb alles op een lijn gezet en dat is in orde maar nu krijg ik weer een andere foutmelding
regel 24
fout ')' wordt verwacht als ik dan de foutopsporing doe kom ik aan het volgende
for (x=0; x<afbeeldingen.length; x++){
maar daar mag ik niets aan veranderen, zegt u in de tekst.
ik gebruik FrontPage 2000 Versie: 4.0.2.2717
groetjes
ik heb alles op een lijn gezet en dat is in orde maar nu krijg ik weer een andere foutmelding
regel 24
fout ')' wordt verwacht als ik dan de foutopsporing doe kom ik aan het volgende
for (x=0; x<afbeeldingen.length; x++){
maar daar mag ik niets aan veranderen, zegt u in de tekst.
ik gebruik FrontPage 2000 Versie: 4.0.2.2717
groetjes
-
coderunner - Lid geworden op: 27 mar 2006, 04:35
- Locatie: Aubauke - Aentwaerepe
Hoi JURION,JURION schreef:coderunner,
regel 24
fout ')' wordt verwacht als ik dan de foutopsporing doe kom ik aan het volgende
for (x=0; x<afbeeldingen.length; x++){
maar daar mag ik niets aan veranderen, zegt u in de tekst.
groetjes
Er blijkt heel veel mis te lopen met het kopiëren van de code blijkbaar, want in mijn code staat niet
Code: Selecteer alles
for (x=0; x<afbeeldingen.length; x++){
Code: Selecteer alles
for (x=0; x<afbeeldingen.length; x++){
Hulp nodig, je kent de weg
mvg,
Coderunner
-
JURION - Lid geworden op: 21 sep 2005, 20:31
- Locatie: Prov.Antwerpen
coderunner,
ga nog een keer alles doorsturen hopelijk lukt het dan
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>spelersalbum</title>
<script language="JavaScript" type="text/javascript">
var afbeeldingen=new Array()
afbeeldingen[0]=["../../../../webfotos/foto1.jpg", "#"]
afbeeldingen[1]=["../../../../webfotos/foto2.jpg", "#"]
afbeeldingen[2]=["../../../../webfotos/foto3.jpg", "#"]
afbeeldingen[3]=["../../../../webfotos/foto4.jpg", "#"]
afbeeldingen[4]=["../../../../webfotos/foto5.jpg", "#"]
// Laad foto voor deze te tonen: "ja" of "nee"
var voorladen="ja"
// optioneel: hier kun je een target invullen bij framesgebruik
var optlinktarget=""
var beeldrandbreedte=0
var
filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"
// hieronder niets meer wijzigen
if (voorladen=="ja"){
for (x=0; x<afbeeldingen.length; x++){
var ditbeeldje=new Image()
ditbeeldje.src=afbeeldingen[x][0]}}
function beeldcode(dezeafbeelding){
var beeldhtml=""
if (dezeafbeelding[1]!="")
beeldhtml='<a href="'+dezeafbeelding[1]+'" target="'+optlinktarget+'">'
beeldhtml+='<img src="'+dezeafbeelding[0]+'"
border="'+beeldrandbreedte+'">;'
if (dezeafbeelding[1]!="")
beeldhtml+='</a>' return beeldhtml}
function wijzigbeeld(beeldplaatsing, beeldindex){
if (document.getElementById){
var imgobj=document.getElementById(beeldplaatsing)
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filterstring
imgobj.filters[0].Apply()}
imgobj.innerHTML=beeldcode(afbeeldingen[beeldindex])
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false}}
</script>
</head>
<body bgcolor="#FFFF00" text="#0000FF">
<table bgcolor="#FFFF00" width="913" border="3" cellpadding="2" bordercolorlight="#0000FF" bordercolordark="#0000FF" bordercolor="#0000FF">
<td width="50" align="left" bordercolor="#0000FF" bgcolor="#0000FF">
<tr>
<td width="39">
<td width="80" height="500" valign="top" align="right" bgcolor="#0000FF">
<!--Vervang foto1.jpg door de juiste benaming van de foto's-->
<!--Verander de width (= breedte foto) en de height (= hoogte foto) door de juiste waarde
verhouding-->
<!--Plaats je meer dan 5 foto's verhoog dan de waarde in ('beeldplaatsing', nr)-->
<a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 0)"><img src="../../../../webfotos/foto1.jpg" width="75" height="50" border="0"></a><br>
<a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 1)"><img src="../../../../webfotos/foto2.jpg" width="75" height="50" border="0"></a><br>
<a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 2)"><img src="../../../../webfotos/foto3.jpg" width="75" height="50" border="0"></a><br>
<a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 3)"><img src="../../../../webfotos/foto4.jpg" width="75" height="50" border="0"></a><br>
<a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 4)"><img src="../../../../webfotos/foto5.jpg" width="75" height="50" border="0"></a><br>
</td>
<td bordercolor="#FF0000" bordercolorlight="#FF0000" bordercolordark="#FF0000" width="50" bgcolor="#FF0000">
<td height="300" align="center" bgcolor="#0000FF" width="600">
<!--Hier wordt de vergrootte foto getoond-->
<!-- Hoogte en breedte van deze DIV-tag instellen op de grootste
afbeelding -->
<div id="beeldplaatsing" style="width:600px;height:400px"></div>
</td>
<td width="34">
</tr>
<td width="39"> </table>
</body>
</html>
hier volgt m'n emailadres
jurion@hotmail.com
groetjes
ga nog een keer alles doorsturen hopelijk lukt het dan
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<title>spelersalbum</title>
<script language="JavaScript" type="text/javascript">
var afbeeldingen=new Array()
afbeeldingen[0]=["../../../../webfotos/foto1.jpg", "#"]
afbeeldingen[1]=["../../../../webfotos/foto2.jpg", "#"]
afbeeldingen[2]=["../../../../webfotos/foto3.jpg", "#"]
afbeeldingen[3]=["../../../../webfotos/foto4.jpg", "#"]
afbeeldingen[4]=["../../../../webfotos/foto5.jpg", "#"]
// Laad foto voor deze te tonen: "ja" of "nee"
var voorladen="ja"
// optioneel: hier kun je een target invullen bij framesgebruik
var optlinktarget=""
var beeldrandbreedte=0
var
filterstring="progid:DXImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"
// hieronder niets meer wijzigen
if (voorladen=="ja"){
for (x=0; x<afbeeldingen.length; x++){
var ditbeeldje=new Image()
ditbeeldje.src=afbeeldingen[x][0]}}
function beeldcode(dezeafbeelding){
var beeldhtml=""
if (dezeafbeelding[1]!="")
beeldhtml='<a href="'+dezeafbeelding[1]+'" target="'+optlinktarget+'">'
beeldhtml+='<img src="'+dezeafbeelding[0]+'"
border="'+beeldrandbreedte+'">;'
if (dezeafbeelding[1]!="")
beeldhtml+='</a>' return beeldhtml}
function wijzigbeeld(beeldplaatsing, beeldindex){
if (document.getElementById){
var imgobj=document.getElementById(beeldplaatsing)
if (imgobj.filters && window.createPopup){
imgobj.style.filter=filterstring
imgobj.filters[0].Apply()}
imgobj.innerHTML=beeldcode(afbeeldingen[beeldindex])
if (imgobj.filters && window.createPopup)
imgobj.filters[0].Play()
return false}}
</script>
</head>
<body bgcolor="#FFFF00" text="#0000FF">
<table bgcolor="#FFFF00" width="913" border="3" cellpadding="2" bordercolorlight="#0000FF" bordercolordark="#0000FF" bordercolor="#0000FF">
<td width="50" align="left" bordercolor="#0000FF" bgcolor="#0000FF">
<tr>
<td width="39">
<td width="80" height="500" valign="top" align="right" bgcolor="#0000FF">
<!--Vervang foto1.jpg door de juiste benaming van de foto's-->
<!--Verander de width (= breedte foto) en de height (= hoogte foto) door de juiste waarde
verhouding-->
<!--Plaats je meer dan 5 foto's verhoog dan de waarde in ('beeldplaatsing', nr)-->
<a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 0)"><img src="../../../../webfotos/foto1.jpg" width="75" height="50" border="0"></a><br>
<a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 1)"><img src="../../../../webfotos/foto2.jpg" width="75" height="50" border="0"></a><br>
<a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 2)"><img src="../../../../webfotos/foto3.jpg" width="75" height="50" border="0"></a><br>
<a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 3)"><img src="../../../../webfotos/foto4.jpg" width="75" height="50" border="0"></a><br>
<a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 4)"><img src="../../../../webfotos/foto5.jpg" width="75" height="50" border="0"></a><br>
</td>
<td bordercolor="#FF0000" bordercolorlight="#FF0000" bordercolordark="#FF0000" width="50" bgcolor="#FF0000">
<td height="300" align="center" bgcolor="#0000FF" width="600">
<!--Hier wordt de vergrootte foto getoond-->
<!-- Hoogte en breedte van deze DIV-tag instellen op de grootste
afbeelding -->
<div id="beeldplaatsing" style="width:600px;height:400px"></div>
</td>
<td width="34">
</tr>
<td width="39"> </table>
</body>
</html>
hier volgt m'n emailadres
jurion@hotmail.com
groetjes