Yesterday I finished work on a site that required me to setup a thumbnail gallery. When you click a thumbnail, the main image on the page changes and the text underneath that image changes.
I had worked on the image swap previously, so the biggest question was “How am I going to get the text to switch?”
I poked around a bit and found a solution that works for me.
Step 1: Insert this section of code into the <head> section of your page. Really all you need to know is that it gets the job done.
<script type=”text/JavaScript”>
<!–
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf(”?”))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}function MM_setTextOfTextfield(objName,x,newText) { //v3.0
var obj = MM_findObj(objName); if (obj) obj.innerHTML = newText;
}
//–>
</script>
Step 2: In the main section of your page, create a <div> tag and give that <div> tag an id. If you insert text into your <div> tag, that will be the the text that displays when the page loads, but that text will change when the user makes a selection.
<div id=”MainText”>This is the beginning Text</div>
Step 3: Setup your links. Each link will have some Javascript in it, to tell it what to do with the <div> area.
<a href=”#” onClick=”MM_setTextOfTextfield(’MainText’,”,’This is the text that appears when the link is clicked’)”>Click Here</a>