deirdre moore

In Spring, 2010 I took COIN 71 - An introduction to computer programming using the JavaScript language. Even though I received a grade of A in that course, I feel I basically scraped through with a minimum of knowledge, it was really a very frustrating class, due to an absolutely dreadful teacher. However, I did come up with 3 things in JavaScript which are quite nice IMHO. So here they are:

The first JS trick is a routine to swap out an image in a webpage. I have used it to make my blog seem more interactive. It's also an effective way to present a before and after sequence.

So you have a small post with an image and some text as a caption, in addition to a button which calls the function. This function changes the source and caption of the image, in other words puts a new picture and new text into the caption of the picture. You can also change the text written on the button.

Hello I'm the default Caption Text

This is some random text to go along with the picture. Just some senseless prattle

This is just some text to go alongside the image. I could do this all day. I think I'm very funny and so do my friends.

Blogger has placed the image in a table. You must reference the variables you want to change by giving identifiers (names) to the <img> and <td class="tr-caption"> tags.

So in your html page (or to a seperate JS file), define the image and caption and enter the default values:

The above code creates the id and puts a value in the caption field of the table holding the image.

Instantiate a button

The JS function called when button named myButton1 is clicked is called swapImage(). swapImage() examines the value of the label on the button, then changes the image source and table caption based on that value. Very simple but works very well. One thing left to do is change the value of the a tag (SRC link to large photo).

						

function swapImage()
{
 if  (document.getElementById("myButton1").value=="Show me
	           the first")
 {
  document.getElementById("myButton1").value="Show me
 		  	the second";
  document.myImage.src ="http://name of first image file.JPG"
  document.getElementById('myCaption').innerHTML="Caption
 				      for first image" ;
 }
 else
 {
  document.getElementById("myButton1").value="Show me
                                 the first" ;
  document.myImage.src ="http://name of second image file.JPG";
  document.getElementById('myCaption').innerHTML="Caption
                 for second image" ;
 }
}
 

The second little JS function that I'm quite proud of is one which will actually not pass the W3C validation as it is illegal to give an id a name that is a number. (That sentence pains me with its obfuscation). This is a technique I wrote in June 2010 for my friend Éodie's website - she's an architect. I have 4 thumbnail images inside a table. (My img tags are id 1-4, and onClick causes each img to call SelectImg() passing the same number to the function.The large image area has id = 0 and at start up it is displaying the image's "alt " value). SelectImg() inserts some text as a caption based on an Array. It's a bit clunky, but it is just a small amount of code and it has a nice effect.

 

function SelectImg(id) {
 var lastID = 0;
 var textVal = new Array ();
 textVal[1] = "This is the white house. Élodie has built several
                                                   white houses." ;
 textVal[2] = "Falling Water - credited to FLW, but it was actually
                                        Élodie who built it." ;
 textVal[3] = "Élodie was employed for many years
                                            by Mrs. WInchester." ;
 textVal[4] = "On a trip to India last year, Élodie
                                            built the Taj Mahal." ;
 if (lastID > 0) {
 	document.getElementById(lastID).className = "thumbNormal";
 	}
 	document.getElementById(id).className = "thumbSelected";
 	document.getElementById(0).src =
 	                           document.getElementById(id).src;
 	document.getElementById('the_text').innerHTML = textVal[id];
    lastID = id;
}
 

The above code puts some appropriate text (stored as an array) under the large image. Try it for yourelf below.