I am persevering with Javascript slowly, and attempting to modify a code I saw that I thought would work for me - click to change/enlarge image and attach appropriate caption.
I have:
function showPreview(path){
var theImageElement=document.getElementById("img");
var theCaptionElement=document.getElementById("legend");
theImageElement.src = path;
/*if(path == "../WSRUxhtml/photo/LImg/Barfleur.jpg"){
theCaptionElement.innerHTML="Barfleur arriving at Portsmouth";
}
else if(path == "../WSRUxhtml/photo/LImg/Noordam.jpg"){
theCaptionElement.innerHTML="Noordam at Malaga";
}*/
}
</script> <style>
#disphoto{
float:left;
padding:10px;
}
#images{
border:1px solid #cccccc;
margin-bottom:10px;
text-align:center;
vertical-align:middle;
padding-top:10px;
position:relative;
}
.big{ width:500px;
height:375px;
}
.small{ width:250px;
height:187px;
}
#legend{
font-style:normal;
text-align:center;
font-weight:bold;
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
font-size:12pt;
}
#previewImg {
border:12px double #3f7cef;
border-radius:12px;
background:#ffffff;
width:510px;
height:auto;
}
</style> <body> <div id="disphoto"> <div id="images" ><a href="#" onclick="showPreview('../WSRUxhtml/photo/LImg/Driade.jpg');" ><img src="../WSRUxhtml/photo/LImg/Driade.jpg" class="small" /></a></div> <div id="images" ><a href="#" onclick="showPreview('../WSRUxhtml/photo/LImg/Barfleur.jpg');"><img src="../WSRUxhtml/photo/LImg/Barfleur.jpg" class="small"/></a></div> <div id="images" ><a href="#" onclick="showPreview('../WSRUxhtml/photo/LImg/Ryndam.jpg');"><img src="../WSRUxhtml/photo/LImg/Ryndam.jpg" class="small" /></a></div> <div id="images" ><a href="#" onclick="showPreview('../WSRUxhtml/photo/LImg/Noordam.jpg');"><img src="../WSRUxhtml/photo/LImg/Noordam.jpg" class="small" /></a></div> <div id="images" ><a href="#" onclick="showPreview('../WSRUxhtml/photo/LImg/Oriana(2).jpg');"><img src="../WSRUxhtml/photo/LImg/Oriana(2).jpg" class="small" /></a></div> <div id="images" ><a href="#" onclick="showPreview('../WSRUxhtml/photo/LImg/Fjordsol.jpg');"><img src="../WSRUxhtml/photo/LImg/Fjordsol.jpg" class="small" /></a></div> </div> <div id="main_legend"> <div id="legend"><Driade entering Naples</div> <div id="legend"><Barfleur arriving at Portsmouth</div> <div id="legend"><Ryndam at Malaga</div> <div id="legend"><Noordam at Malaga</div> <div id="legend"><Oriana at Malaga</div> <div id="legend"><Laid up at Ostend</div> </div> <div id="previewImg"> <div id="large"><img src="../WSRUxhtml/photo/LImg/Driade.jpg" id="img" class="big" /></div> <div id="legend">Driade entering Naples</div> </div> </body>
the function showPreview(path) in its entirety only changes the caption (i.e. no enlarged image at all)
omitting the code /* ..*/ I see the enlarged image but no new caption (i.e only the caption applied to the first image appears under all)
I must be getting close, can someone throw me a lifeline. Many thanks.