Viewing Thread:
"[javascript] - Dynamically changing content"

Javascript can be frustrating. But it is useful for changing the contents of a page on the fly without requiring a full reload of the page.

Imagine you have a page which displays a number of pieces of 'teaser' content, and when the user moves their mouse over the 'teaser' content you want to display the full content. Do you really want to have to re-load the entire page when only a small section is going to change? Probably not...

A Basic Example
This is probably more easily explained with an example. So imagine you have a page which displays a number of small ('thumbnail') images. Each thumbnail image has a corresponding full-size image. If a user likes the look of an image they're going to want to see the full-size version. With 'traditional' HTML you'd make the small image a link, the user would click the image and go to a new page with the full version of the image on it. But what if you want to make life easier for the user? Less clicking, less loading times, less hassle?

Well, javascript could be your answer. In the example above this is what your code would look like:

HTML
<!-- Somewhere in the HTML Head, include this to import your .js file -->
<!-- (replace changebigimage.js with the name of your .js file) -->
<script language="JavaScript" src="changebigimage.js"></script>

<!-- Your thumbnail Images -->
<img src = "my_thumbnail_01.jpg" onMouseOver = "changebigimage('my_bigimage_01.jpg');" />
<img src = "my_thumbnail_02.jpg" onMouseOver = "changebigimage('my_bigimage_02.jpg');" />
<!-- Add as many images as you want... -->
<img src = "my_thumbnail_10.jpg" onMouseOver = "changebigimage('my_bigimage_10.jpg');" />

<!-- Somewhere else in your code have an img tag where you want the big version of the image to display -->
<!-- (make sure you give the img tag an id!) -->
<img id = "big_image" src="" />

JavaScript
<!--
// This code should be saved to a .js file (eg. changebigimage.js)
function changebigimage(big_image_src) {
document.getElementById('big_image').src = big_image_src;
}
// -->


So what is actually going on here?!?
Well, first the HTML:
- The