furlanut 0 Newbie Poster

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.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.19 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.