PDA

View Full Version : Images with show/hide script

sticks464
03-18-2009, 01:14 PM
I would like to be able to use images to trigger the show/hide toggle effect instead of text links. What do I have to change?
Here's my page that currently works.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
:focus {outline:none;}
img {border:none;}
.thidden {
overflow: hidden;
background-color: #FFFFFF;
}
.hiddennote {
border: 0;
border-bottom: 1px solid #FFFFFF;
padding: 3px;
color: #FFF;
background-color: #036036;
height:250px;
text-align:left;
overflow:auto;
}
.nameof {
margin: 5px 2px 5px 2px;
font-weight: bold;
}
</style>

<script type="text/javascript">
<!--
var thisBoggyExplorer = 0;
if(navigator.appName == "Microsoft Internet Explorer") thisBoggyExplorer = 1;
function toggle(id) {
var duration = 200;
var step_duration = 10;
var el = document.getElementById(id);
if(!el || !el.style || (el.morph_data && el.morph_data.timeout)) return;
var steps = Math.max(Math.ceil(duration/step_duration),1);
if(!el.morph_data) {
el.morph_data = new Object();
el.morph_data.style_overflow = el.style.overflow;
el.style.overflow = 'hidden';
}
if(el.style.display == 'none') {
el.style.display = 'block';
if(thisBoggyExplorer) el.style.height = null;
el.morph_data.naturalHeight = el.offsetHeight;
el.style.height = thisBoggyExplorer+'px';
el.morph_data.style_height = thisBoggyExplorer+'px';
el.style.overflow = 'hidden';
}
if(el.style.height == thisBoggyExplorer+'px') {
morph_height(el,thisBoggyExplorer,el.morph_data.naturalHeight,duration,steps,0);
document.getElementById('ahref_'+id).innerHTML = 'Hide';
}
else {
el.morph_data.naturalHeight = el.offsetHeight;
el.morph_data.style_height = el.style.height;
morph_height(el,el.offsetHeight,thisBoggyExplorer,duration,steps,0);
document.getElementById('ahref_'+id).innerHTML = 'Show';
}
}
function morph_height(el,from,to,duration,steps,step) {
var h = Math.ceil(from + (to-from)*(Math.sin((step/steps-0.5)*Math.PI)+1)*0.5);
if(step == steps) h = to;
el.style.height = h+'px';
if(h==to) {
if((thisBoggyExplorer) && (el.style.height == thisBoggyExplorer+'px')) el.style.display = 'none';
return;
}
var t = duration/steps;
if(el.style.height == thisBoggyExplorer+'px') el.style.position = 'static';
setTimeout(function(){morph_height(el,from,to,duration,steps,step+1)},t);
}
-->
</script>
</head>

<body>
<div class="nameof"><a name="n1"></a>
<a href="javascript:void('0')" id="ahref_test01" onclick="toggle('test01');">Show</a>
</div>
<div id="test01" class="thidden" style="display:none;">
<table class="hiddennote" width="1000" border="2" cellpadding="4" bordercolor="#72A4D2">
<tr>
<td><p>Sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat. Ullamco laboris nisi duis aute irure dolor consectetur adipisicing elit. Cupidatat non proident, ut enim ad minim veniam, ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, duis aute irure dolor velit esse cillum dolore. Quis nostrud exercitation sed do eiusmod tempor incididunt sunt in culpa.</p></td>
<td ><p>Sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat. Ullamco laboris nisi duis aute irure dolor consectetur adipisicing elit. Cupidatat non proident, ut enim ad minim veniam, ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, duis aute irure dolor velit esse cillum dolore. Quis nostrud exercitation sed do eiusmod tempor incididunt sunt in culpa.</p></td>
<td ><p>Sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat. Ullamco laboris nisi duis aute irure dolor consectetur adipisicing elit. Cupidatat non proident, ut enim ad minim veniam, ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, duis aute irure dolor velit esse cillum dolore. Quis nostrud exercitation sed do eiusmod tempor incididunt sunt in culpa.</p></td>
<td><p>Sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat. Ullamco laboris nisi duis aute irure dolor consectetur adipisicing elit. Cupidatat non proident, ut enim ad minim veniam, ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, duis aute irure dolor velit esse cillum dolore. Quis nostrud exercitation sed do eiusmod tempor incididunt sunt in culpa.</p></td>
<td ><p>Sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat. Ullamco laboris nisi duis aute irure dolor consectetur adipisicing elit. Cupidatat non proident, ut enim ad minim veniam, ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, duis aute irure dolor velit esse cillum dolore. Quis nostrud exercitation sed do eiusmod tempor incididunt sunt in culpa.</p></td>
</tr>
</table>
</div>

<div class="nameof"><a name="n2"></a>
<a href="javascript:void('0')" id="ahref_test02" onclick="toggle('test02');">Show</a> &nbsp;
</div>
<div id="test02" class="thidden" style="display:none;">
<table class="hiddennote" width="1000" border="2" cellpadding="4" bordercolor="#72A4D2">
<tr>
<td><p>Sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat. Ullamco laboris nisi duis aute irure dolor consectetur adipisicing elit. Cupidatat non proident, ut enim ad minim veniam, ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, duis aute irure dolor velit esse cillum dolore. Quis nostrud exercitation sed do eiusmod tempor incididunt sunt in culpa.</p></td>
<td><p>Sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat. Ullamco laboris nisi duis aute irure dolor consectetur adipisicing elit. Cupidatat non proident, ut enim ad minim veniam, ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, duis aute irure dolor velit esse cillum dolore. Quis nostrud exercitation sed do eiusmod tempor incididunt sunt in culpa.</p></td>
<td><p>Sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat. Ullamco laboris nisi duis aute irure dolor consectetur adipisicing elit. Cupidatat non proident, ut enim ad minim veniam, ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, duis aute irure dolor velit esse cillum dolore. Quis nostrud exercitation sed do eiusmod tempor incididunt sunt in culpa.</p></td>
<td><p>Sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat. Ullamco laboris nisi duis aute irure dolor consectetur adipisicing elit. Cupidatat non proident, ut enim ad minim veniam, ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, duis aute irure dolor velit esse cillum dolore. Quis nostrud exercitation sed do eiusmod tempor incididunt sunt in culpa.</p></td>
</tr>
</table>
</div>
</body>
</html>
coothead
03-18-2009, 01:39 PM
Hi there sticks464,

replace....

<a href="javascript:void('0')" id="ahref_test01" onclick="toggle('test01');">Show</a>

...with...

<img src="your_image.jpg" onclick="toggle('test01');"alt="">

..and...

<a href="javascript:void('0')" id="ahref_test02" onclick="toggle('test02');">Show</a>

...with...

<img src="your_image.jpg" onclick="toggle('test02');"alt="">

Also remove or comment out these two lines in the javascript...


document.getElementById('ahref_'+id).innerHTML = 'Hide';

document.getElementById('ahref_'+id).innerHTML = 'Show';
sticks464
03-18-2009, 04:11 PM
Hi Coothead, that woks fine using one static image. What I need is the image to change when the hidden element is displayed and change back to the original image when the element is hidden again.
coothead
03-18-2009, 04:45 PM
Hi there sticks464,

are you using the same images - (i.e. on and off) - for each instance of the show and hide?
sticks464
03-18-2009, 05:12 PM
I'm using side_arrow.gif for show and down_arrow.gif for hide for all instances (dimensions 13 x17px).
coothead
03-18-2009, 05:25 PM
Hi there sticks464,

your images should now look like this...


<img id="ahref_test01" src="side_arrow.gif" onclick="toggle('test01');"alt="">

<img id="ahref_test02" src="side_arrow.gif" onclick="toggle('test02');"alt="">


These lines in the javascript ...


document.getElementById('ahref_'+id).innerHTML = 'Hide';

document.getElementById('ahref_'+id).innerHTML = 'Show';



...should be replaced with these...


document.getElementById('ahref_'+id).src='down_arrow.gif';

document.getElementById('ahref_'+id).src='side_arrow.gif';
sticks464
03-18-2009, 05:54 PM
Excellent! Works perfect. Thank you.
coothead
03-18-2009, 06:03 PM
No problem, you're very welcome. :agree: