Changing Pictures in Links

1. Just be sure you have a complete address of your image, that must start with a "http://" and end with .jpg, png, gif etc ( as long as it is image ).

here is the sample below, just put this code and replace img.jpg with your image -

<a name="img1.jpg" onclick="toggleMe('para32'); showPic(this); return false;">Picture 1</a>

<a name="img2.jpg" onclick="toggleMe('para32'); showPic(this); return false;">Picture 2</a>

You can also change "Picture 1" with your captions. Just be sure it is place in between <a...>Picture 1</a>.

2. After putting all the pictures. add this img tag and place it below your links. (Note: You may also place it above the links, if you know how it goes. If you are a beginner, then doing this simple instruction is not bad though)

<img don="" id="placeholder" onclick="alert('Select link to change image.')" src="img1.jpg" t="" />

You may change the alert to any of your type. I just don't mind it.

3. Add this line since you are changing "href" to "name" so all of your links will become like ordinary text.

<style>a { cursor: pointer; }</style>

4. No need to change source code below. Just add this after any of your post, or in some area of your blog.

<script type="text/javascript">
function showPic(whichpic) {if (document.getElementById) {document.getElementById('placeholder').src = whichpic.name;if (whichpic.title) {document.getElementById('desc').childNodes[0].nodeValue = whichpic.title;} else {document.getElementById('desc').childNodes[0].nodeValue = whichpic.childNodes[0].nodeValue;}return false;} else {return true;}}
var previousToggle=null;function toggleMe(a){var e=document.getElementById(a);if(!e)return true;if(e.style.display=="none"){e.style.display="block";if(previousToggle)previousToggle.style.display="none";previousToggle=e;}return true;}
</script>

To see sample, you may visit this link and check out how it goes. Click here