anthony's imageswapping js

amgleft.js

   function swapPhoto(photoSRC,theCaption,theLink) {
     
    var displayedImage = document.getElementById("thephoto");
    var displayedCaption = document.getElementById("caption");
    
// to make the link go to a new window, i just added 'target="_blank"' to both links below. 
// target is just an attribute of the a tag in html
//
// however, i added a conditional to the image & link replacers. 
// it says that if there is no third variable, there won't be any links. it's written as follows:
// variableX=(variableY==null)? 'option1' : 'option2'
// which, in english, reads as:
// if variableY is null (i.e. there is no variableY), then put option1. otherwise, put option2.
// make sense?

   	displayedImage.innerHTML=(theLink==null)?('<img width="400" border="0" alt="' + theCaption + '" src="' + photoSRC + '"/>') : ('<a href="' + theLink + '"target="_blank"><img width="400" border="0" alt="' + theCaption + '" src="' + photoSRC + '"/></a>');
   	displayedCaption.firstChild.nodeValue = theCaption;
// we can get rid of the extra link section, if we're gonna combine the caption & the URL into one.
// so below i'm using theLink inside the href attribute, same as before, but theCaption inside.
// before it was <a href="theLink">theLink</a>
// and now it's     <a href="theLink">theCaption</a>
// dig?
   	displayedCaption.innerHTML=(theLink==null)? ('<p>' + theCaption + '</p>'): ('<a href="' + theLink + '" target="_blank">' + theCaption + '</a>');
 
 
// in your HTML, a link will look like this :
<a href="javascript:swapPhoto('logo_01.jpg','The Free Project Logo System', 'http://thefreeprojectlogosystem.com')">blahblahblah</a>
// that way, you're giving 3 variables to switch – the photoSRC, theCaption, & theLink
// if, however, there is no link, it can look like this:
<a href="javascript:swapPhoto('logo_01.jpg','The Free Project Logo System')">blahblahblah</a>

// and here's the html that it switches out:
<p id="thephoto"><img id="mainPhoto" src="/images/default.jpg" width="400" border="0" name="imgPhoto" alt="Main photo" /></p>
<p id="caption">where ideas come from</p>
// got rid of the extra section for links, that'll go into the caption area now