Bandit Design » Our Design Our Portfolio Contact Us
TumbleLog Our Thoughts
< Back
Javascript Image Swap With Caption
Tutorial by James of Bandit.co.nz
Copyright James Nisbet 2005 ~ 2006

In the following tutorial I will explain how to create a Javascript function that changes an image and caption like used on Bandit.co.nz.

The first thing we need to do is insert the script tags. These should be within the head tags of your document.


<script type='text/javascript' language='javascript'>
<!-- //

// -->
</script>

Notice the <!-- // and // --> ? We add these to prevent older browsers that don't support Javascript from causing errors.

Okay, now that we've got the script tags, we need to declare a new function. We do this by writing the following:


function doChange() {

}

This will create a function called doChange. Functions are small pieces of code that can be 'called' again and again, anywhere in your code. This is useful in situations where you may use the same code more than once.

Next we need to add variables into the function's input so that we can customise the output of the function each time we call it.

To do this, we need to add some variables between the '(' and ')' of our function.

  • First we need a variable to specify the text we want in the caption, so we will add a variable; cptn.

  • Then we want a variable to specify the source of the image we want to swap to, so we will add a variable; newimge, separated by a comma.

  • Next we need a variable to specify the name of the image we are changing, so we will add a variable; currentimg, again separated by a comma.

  • Finally, as an optional extra you could add a forth variable to specify the class of your caption, this may be useful for changing it's colour, as seen on Bandit.co.nz. We do this by adding a cptnclass variable.


Your function should now look like this:


function doChange(cptn, newimge, currentimg, cptnclass) {

}

Okay, now we need to add the guts of the function...

The first thing we want to do is check what browser your visitor is using. We do this by checking the browsers capabilities, not by the browser name. Why ? Because browsers get updated and changed all the time, so we don't care what its' name is, we care what it can do.

Do this by adding the following line to your function:


if(document.all) { var newcptn = document.all("caption"); }
else { var newcptn = document.getElementById("caption"); }

What we're doing here is firstly checking if the browser supports the document.all method (primarily IE), otherwise we're using the document.getElementById method. Secondly we're using the chosen method to find a <div> tag in our document by the name of 'caption'. We set this result of this method to a new variable named newcptn for future reference.

Next we need to change the caption text to the text specified in our first function variable.


newcptn.innerHTML=cptn;

What we are doing here is selecting the HTML of the caption <div> tag. We do this by using the variable we just created in the last step.

Next we need to change our image to the new image. We do this by selecting the current image's location, and swapping it with our new image's location. We do this by adding the following line:


currentimg.src=newimge;

Note that this code is using information input into the function variables that we added earlier.

Finally we (optionally) add the class change code:


if(doChange.arguments.length>3) it.className=cptnclass;

We first check to see if the cptnclass variable is being used, if so, we change the className of the caption text's <div> tag.

I hope that wasn't too confusing...

Here is the finished result:


<script type='text/javascript' language='javascript'>
<!-- //
function doChange(cptn, newimge, currentimg, cptnclass) {
if(document.all) { var it = document.all("caption"); }
else { var it = document.getElementById("caption"); }
newcptn.innerHTML=cptn;
currentimg.src=newimge;
if(doChange.arguments.length>3) it.className=cptnclass;
}
// -->
</script>


Now that we've written the function, we need to use it. First thing you need to do is add a line in your webpage with the following:


<div name='caption' id='caption'>This is my caption</div>


Then add the following to the tag of image that you want to swap:


onMouseOver="doChange('Stuff to show in your caption.','yournewimage.jpg',this);"

And


onMouseOut="doChange('This is my caption','youroldimage.jpg',this);"

The onmouseover event simply means the function will launch when you move your mouse over the image, and the onmouseout event means the function will launch when you move your mouse off the image.The this in the above code simply points the function variable to the image you're using the function with.

Here's the piece of code direct off Bandit.co.nz with my usage:


<img src="img/buttonWritingsOff.jpg" alt="banditWritings" width="103" height="109" border="0"
onMouseOver="doChange('Articles, Tutorials, Reviews and Bloggings.','img/buttonWritingsOn.jpg',this);"
onMouseOut="doChange('','img/buttonWritingsOff.jpg',this,'blue');" class="ebox">

Have fun. If you have any issues, please drop me a line.

If you liked this tutorial please tell a friend.


< Back

Page dynamically created in 0.015 seconds by morBandit's phpTutorial v28.02.05. 5322 page views.