Please Help, Show/Hide with Checkboxes - JavaScript and AJAX forum at WebmasterWorld - WebmasterWorld

Forum Moderators: open

Message Too Old, No Replies

Please Help, Show/Hide with Checkboxes

Show/Hide Image Layers OnClick with CheckBoxes

virussh

11:57 pm on May 8, 2008 (gmt 0)

10+ Year Member

Hi guys,
Please Help me with Changing A HREF to CheckBoxes in this code.
Its important to Show the div with img after click on Checkbox & else Hide img...
Here is sample of code:

<html>
<head>
<style>
body{ margin-top: 10px; background-color: #FFFFFF; }
.top{ position:absolute; top:150px; }
.nav{ max-width: 300px; position: absolute; right: 10px; top: 5px; }
.position{ position:absolute; visibility: hidden; top: 5px; width: 460px; height: 560px; left: 50px; }
.window{ position:absolute; top: 5px; width: 460px; height: 560px; left: 50px; }
</style>
</head>
<body>
<script language="JavaScript">
function hide(id) {
if (document.layers) {
document.layers[id].visibility = 'hidden';
}
else if (document.all) {
document.all[id].style.visibility = 'hidden';
}
}

function show(id) {
if (document.layers) {
document.layers[id].visibility = 'visible';
}
else if (document.all) {
document.all[id].style.visibility = 'visible';
}
}
</script>
<span class="window" ID="img0"></span>
<div align="right" class="nav">
<table width="200" align="right" cellpadding="0" cellspacing="0" id="top" name="top">
<tr>
<td width="75"><a href="javascript:;" onClick="show('img1')">On</a> /
<a href="javascript:;" onClick="hide('img1'); return false"> Off</a>
<span class="position" ID="img1">
<img src="mexiko/drawing1.gif" /></span></td>
<td width="129">Súčastný stav</td>
</tr>
<tr>
<td><a href="javascript:;" onClick="show('img2')">On</a> /
<a href="javascript:;" onClick="hide('img2'); return false"> Off</a>
<span class="position" ID="img2">
<img src="mexiko/drawing2.gif" /></span></td>
<td>Návrh - objekty</td>
</tr
><tr>
<td><a href="javascript:;" onClick="show('img3')">On</a> /
<a href="javascript:;" onClick="hide('img3'); return false"> Off</a>
<span class="position" ID="img3">
<img src="mexiko/drawing3.gif" /></span></td>
<td>Návrh - Voda</td>
</tr>
</table>
</div>
</body>
</html>

Many Thanks

daveVk

1:52 pm on May 9, 2008 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Replace

<a href="javascript:;" onClick="show('img1')">On</a> /
<a href="javascript:;" onClick="hide('img1'); return false"> Off</a>

With

<input type="checkbox" onClick="showHide(this,'img1');" />

Plus new function

function showHide( el, img ) {
if ( el.checked ) { show(img); }
else { hide(img); }
}

virussh

3:28 pm on May 9, 2008 (gmt 0)

10+ Year Member

THANK YOU for FAST REPLY daveVk, but not work with FF and Mozilla.
Do you know why?

[edited by: engine at 3:38 pm (utc) on May 9, 2008]
[edit reason] no urls, thanks [/edit]

daveVk

12:52 am on May 10, 2008 (gmt 0)

WebmasterWorld Senior Member

10+ Year Member

Did original work in FF ? I assume working in IE Ok

TRY replacing

if (document.layers) {
document.layers[id].visibility = 'hidden';
}
else if (document.all) {
document.all[id].style.visibility = 'hidden';
}

WITH

document.getElementById(id).style.visibility = 'hidden';

and similarly in function show

document.getElementById(id).style.visibility = 'visible';

Should work for all modern browsers

virussh

7:42 am on May 10, 2008 (gmt 0)

10+ Year Member

hohhohoo it working now, thanks again!