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="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.
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