ik wil een fotoboekje maken, hierbij moeten er bovenaan kleine afbeeldingen staan, en zodra je met de muis over de kleine afbeelding gaat moet zich daaronder een grotere verzie van die afbeelding EN een kleine uitleg in de vorm van tekst tevoorschijn komen!
iemand enig idee hoe i dit het best aan kan pakken?
ik ben al wel zo ver dat als ik op een kleine afbeelding ga staan, dat er een grote afbeelding onder komt, echter ik weet niet hoe ik ook nog die tekst erbij kan laten verschijnen
alvast bedankt!!!
dit heb ik nu:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>V.O.F. De Goeije Kroon</title>
<STYLE type="text/css">
BODY { scrollbar-3dlight-color: ;
scrollbar-arrow-color:#118611;
scrollbar-base-color:#ff0000;
scrollbar-track-color:#118611;
scrollbar-darkshadow-color:#118611;
scrollbar-face-color:#ff0000;
scrollbar-highlight-color:#;
scrollbar-shadow-color: #}
</STYLE>
<script language="JavaScript" type="text/javascript">
// hier definieer je alle afbeeldingen
var afbeeldingen=new Array()
afbeeldingen[0]=["images/foto/f 001.jpg", "#"] // "pad en naam van de foto", "eventuele hyperlink"
afbeeldingen[1]=["images/foto/f 002.jpg", "#"]
afbeeldingen[2]=["images/foto/f 003.jpg", "#"]
afbeeldingen[3]=["images/foto/f 004.jpg", "#"]
afbeeldingen[4]=["images/foto/f 005.jpg", "#"]
afbeeldingen[5]=["images/foto/f 006.jpg", "#"]
afbeeldingen[6]=["images/foto/f 007.jpg", "#"]
afbeeldingen[7]=["images/foto/f 008.jpg", "#"]
afbeeldingen[8]=["images/foto/f 009.jpg", "#"]
afbeeldingen[9]=["images/foto/f 010.jpg", "#"]
afbeeldingen[10]=["images/foto/f 011.jpg", "#"]
afbeeldingen[11]=["images/foto/f 012.jpg", "#"]
afbeeldingen[12]=["images/foto/f 013.jpg", "#"]
afbeeldingen[13]=["images/foto/f 014.jpg", "#"]
var voorladen="ja" // "ja" of "nee"
var optlinktarget="" // optioneel: hier kun je een target invullen bij framesgebruik
var beeldrandbreedte=0
var filterstring="progid
XImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"
// hieronder niets 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="#c0f5b0">
<font face="Arial Black"size="3" color="#118611">
<center>
<table border="0">
<tr>
<td><a href="home.html" target="hoofdscherm"><img src="images/home.bmp"alt="" width="40"height="40" border="0"></a></td>
<td><a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 0)">
<img src="images/foto/f 001.jpg" width= 40 height=30 border=0></a></td>
<td><a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 1)">
<img src="images/foto/f 002.jpg" width= 40 height=30 border=0></a></td>
<td><a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 2)">
<img src="images/foto/f 003.jpg" width= 40 height=30 border=0></a></td>
<td><a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 3)">
<img src="images/foto/f 004.jpg" width= 40 height=30 border=0></a></td>
<td><a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 4)">
<img src="images/foto/f 005.jpg" width= 40 height=30 border=0></a></td>
<td><a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 5)">
<img src="images/foto/f 006.jpg" width= 40 height=30 border=0></a></td>
<td><a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 6)">
<img src="images/foto/f 007.jpg" width= 40 height=30 border=0></a></td>
<td><a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 8)">
<img src="images/foto/f 008.jpg" width= 40 height=30 border=0></a></td>
<td><a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 8)">
<img src="images/foto/f 009.jpg" width= 40 height=30 border=0></a></td>
<td><a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 9)">
<img src="images/foto/f 010.jpg" width= 40 height=30 border=0></a></td>
<td><a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 10)">
<img src="images/foto/f 011.jpg" width= 40 height=30 border=0></a></td>
<td><a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 11)">
<img src="images/foto/f 012.jpg" width= 40 height=30 border=0></a></td>
<td><a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 12)">
<img src="images/foto/f 013.jpg" width= 40 height=30 border=0></a></td>
<td><a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 13)">
<img src="images/foto/f 014.jpg" width= 40 height=30 border=0></a></td>
<td><a href="foto2.html" target="hoofdscherm"><img src="images/next.bmp"alt="" border="0"></a></td>
</tr>
</table>
</center>
<!-- Hoogte en breedte van deze DIV-tag instellen op de grootste afbeelding -->
<!-- Te plaatsen waar je wil dat de foto's verschijnen. -->
<br><br>
<center>
<div id="beeldplaatsing" style="width:640px;height:480px"></div>
</center>
</body>
</html>
iemand enig idee hoe i dit het best aan kan pakken?
ik ben al wel zo ver dat als ik op een kleine afbeelding ga staan, dat er een grote afbeelding onder komt, echter ik weet niet hoe ik ook nog die tekst erbij kan laten verschijnen
alvast bedankt!!!
dit heb ik nu:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>V.O.F. De Goeije Kroon</title>
<STYLE type="text/css">
BODY { scrollbar-3dlight-color: ;
scrollbar-arrow-color:#118611;
scrollbar-base-color:#ff0000;
scrollbar-track-color:#118611;
scrollbar-darkshadow-color:#118611;
scrollbar-face-color:#ff0000;
scrollbar-highlight-color:#;
scrollbar-shadow-color: #}
</STYLE>
<script language="JavaScript" type="text/javascript">
// hier definieer je alle afbeeldingen
var afbeeldingen=new Array()
afbeeldingen[0]=["images/foto/f 001.jpg", "#"] // "pad en naam van de foto", "eventuele hyperlink"
afbeeldingen[1]=["images/foto/f 002.jpg", "#"]
afbeeldingen[2]=["images/foto/f 003.jpg", "#"]
afbeeldingen[3]=["images/foto/f 004.jpg", "#"]
afbeeldingen[4]=["images/foto/f 005.jpg", "#"]
afbeeldingen[5]=["images/foto/f 006.jpg", "#"]
afbeeldingen[6]=["images/foto/f 007.jpg", "#"]
afbeeldingen[7]=["images/foto/f 008.jpg", "#"]
afbeeldingen[8]=["images/foto/f 009.jpg", "#"]
afbeeldingen[9]=["images/foto/f 010.jpg", "#"]
afbeeldingen[10]=["images/foto/f 011.jpg", "#"]
afbeeldingen[11]=["images/foto/f 012.jpg", "#"]
afbeeldingen[12]=["images/foto/f 013.jpg", "#"]
afbeeldingen[13]=["images/foto/f 014.jpg", "#"]
var voorladen="ja" // "ja" of "nee"
var optlinktarget="" // optioneel: hier kun je een target invullen bij framesgebruik
var beeldrandbreedte=0
var filterstring="progid
XImageTransform.Microsoft.GradientWipe(GradientSize=1.0 Duration=0.7)"// hieronder niets 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="#c0f5b0">
<font face="Arial Black"size="3" color="#118611">
<center>
<table border="0">
<tr>
<td><a href="home.html" target="hoofdscherm"><img src="images/home.bmp"alt="" width="40"height="40" border="0"></a></td>
<td><a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 0)">
<img src="images/foto/f 001.jpg" width= 40 height=30 border=0></a></td>
<td><a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 1)">
<img src="images/foto/f 002.jpg" width= 40 height=30 border=0></a></td>
<td><a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 2)">
<img src="images/foto/f 003.jpg" width= 40 height=30 border=0></a></td>
<td><a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 3)">
<img src="images/foto/f 004.jpg" width= 40 height=30 border=0></a></td>
<td><a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 4)">
<img src="images/foto/f 005.jpg" width= 40 height=30 border=0></a></td>
<td><a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 5)">
<img src="images/foto/f 006.jpg" width= 40 height=30 border=0></a></td>
<td><a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 6)">
<img src="images/foto/f 007.jpg" width= 40 height=30 border=0></a></td>
<td><a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 8)">
<img src="images/foto/f 008.jpg" width= 40 height=30 border=0></a></td>
<td><a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 8)">
<img src="images/foto/f 009.jpg" width= 40 height=30 border=0></a></td>
<td><a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 9)">
<img src="images/foto/f 010.jpg" width= 40 height=30 border=0></a></td>
<td><a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 10)">
<img src="images/foto/f 011.jpg" width= 40 height=30 border=0></a></td>
<td><a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 11)">
<img src="images/foto/f 012.jpg" width= 40 height=30 border=0></a></td>
<td><a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 12)">
<img src="images/foto/f 013.jpg" width= 40 height=30 border=0></a></td>
<td><a href="#" onMouseover="wijzigbeeld('beeldplaatsing', 13)">
<img src="images/foto/f 014.jpg" width= 40 height=30 border=0></a></td>
<td><a href="foto2.html" target="hoofdscherm"><img src="images/next.bmp"alt="" border="0"></a></td>
</tr>
</table>
</center>
<!-- Hoogte en breedte van deze DIV-tag instellen op de grootste afbeelding -->
<!-- Te plaatsen waar je wil dat de foto's verschijnen. -->
<br><br>
<center>
<div id="beeldplaatsing" style="width:640px;height:480px"></div>
</center>
</body>
</html>
Laatst bewerkt:
