Swap/restore image while show/hide divs

Hi All:

I have a very long page of html that I want to take portions and hide
them in divs, then show when a link is clicked. I have the hide show
part working when the link is clicked, however I would really like to
use linked images instead to do the following:

- When open.gif is clicked, the contents of the div show and open.gif
is swapped with close.gif
- subsequently, when close.gif is clicked, the div contents get hidden
again and open.gig replaces close.gif

The tricky part (for me anyways) is to be able to do the image
swap/restore multiple times on the same page. Like I said, the div
show/hide function works fine and I kind of managed to get the imgae to
swap from open to clode but it wont swap back and I figure if I do it
multiple times whe way I wrote it (copied it) there is now way it would
work. Here is some sample code:

<HTML>
<HEAD>
<TITLE>main</TITLE>
<script language="JavaScript" type="text/JavaScript">
function openIt(train) {
showIt = document.all[train];
if (showIt.style.display == "none") {
showIt.style.display = ""
} else {
showIt.style.display = "none"
}
var x=1;
var pics=new Array('images/open.gif','images/close.gif');
window.document.images.this_one.src=pics[x];
if (x) { x=0; }
else { x=1; }
}
</script>
</HEAD>
<BODY bgcolor="white">
<a href="#" onclick="javascript:openIt('list1'); return false;"><img
src="images/open.gif" name="this_one" border="0"></a><br>
<div id="list1" style="display:none">
This will show/hide list1 when you click the above link
</div>
<a href="#" onclick="javascript:openIt('list2'); return false;">click
here to toggle</a><br>
<div id="list2" style="display:none">
This will show/hide list2 when you click the above link
</div>
<a href="#" onclick="javascript:openIt('list3'); return false;">click
here to toggle</a><br>
<div id="list3" style="display:none">
This will show/hide list3 when you click the above link
</div>
<a href="#" onclick="javascript:openIt('list4'); return false;">click
here to toggle</a>
<div id="list4" style="display:none">
This will show/hide list4 when you click the above link
</div>
</BODY>

If I can make this happen by swapping link text instead of images thats
OK too.

Thanks in advance for your help.

Eric B

bridgemanusa@hotmail.com wrote:[color=blue]
> Hi All:
>
> - When open.gif is clicked, the contents of the div show and open.gif
> is swapped with close.gif
> - subsequently, when close.gif is clicked, the div contents get hidden
> again and open.gig replaces close.gif
>
> <script language="JavaScript" type="text/JavaScript">[/color]

The language attribute is deprecated, just stick with the type
attribute.
[color=blue]
> function openIt(train) {
> showIt = document.all[train];
> if (showIt.style.display == "none") {
> showIt.style.display = ""
> } else {
> showIt.style.display = "none"
> }
> var x=1;
> var pics=new Array('images/open.gif','images/close.gif');
> window.document.images.this_one.src=pics[x];
> if (x) { x=0; }
> else { x=1; }
> }[/color]
[snip][color=blue]
> <a href="#" onclick="javascript:openIt('list1'); return false;"><img
> src="images/open.gif" name="this_one" border="0"></a><br>
> <div id="list1" style="display:none">
> This will show/hide list1 when you click the above link
> </div>[/color]

See if you like this better:

CSS:

..closed
{
display: none;
}

..opened
{
display: block;
}

HTML:

<img src = "images/open.gif" onclick = "toggle(this, 'list1')">
<div id = "list1" class = "closed">
text
</div>

javascript:

function toggle(imgElem, divId)
{
if(document.getElementById)
{
var divElem = document.getElementById(divId);
if(divElem.className == "closed")
{
imgElem.src = "images/close.gif";
divElem.className = "opened";
}
else
{
imgElem.src = "images/open.fig";
divElem.className = "closed";
}
}
}

Thanks, but I think I might still be missing something. The image
doesnt seem to respond to the "onclick" in FireFox and in IE I get an
Object Expected error. Eirher way, nothing seems to happen. Any ideas?

Thanks again, and here is the code.

<html>
<head>
<title>Untitled Document</title>
<style type="text/css">

</style>
<script type="text/javascript">
function toggle(imgElem, divId)
{
if(document.getElementById)
{
var divElem = document.getElementById(divId);
if(divElem.className == "closed")
{
imgElem.src = "images/close.gif";
divElem.className = "opened";
}
else
{
imgElem.src = "images/open.gif";
divElem.className = "closed";
}
}
</script>

</head>
<body>
<img src="images/open.gif" border="0"
onclick="javascript:toggle(this,'list1')">
<div id="list1" class="closed">text</div>
</body>
</html>

wrote on 26 jan 2006 in comp.lang.javascript:
[color=blue]
> Thanks, but I think I might still be missing something. The image
> doesnt seem to respond to the "onclick" in FireFox and in IE I get an
> Object Expected error. Eirher way, nothing seems to happen. Any ideas?
>
> Thanks again, and here is the code.
>
> <html>
> <head>
> <title>Untitled Document</title>
> <style type="text/css">
> [/color]

Do not use --> here
[color=blue]
> </style>
> <script type="text/javascript">
> function toggle(imgElem, divId)
> {
> if(document.getElementById)
> {
> var divElem = document.getElementById(divId);
> if(divElem.className == "closed")
> {
> imgElem.src = "images/close.gif";
> divElem.className = "opened";
> }
> else
> {
> imgElem.src = "images/open.gif";
> divElem.className = "closed";
> }
> }[/color]

You need another } [this is your error !!!!]
[color=blue]
> </script>
>
> </head>
> <body>
> <img src="images/open.gif" border="0"[/color]

no need for border="0"
[color=blue]
> onclick="javascript:toggle(this,'list1')">[/color]

do not use javascript: in an onclick
[unless you also use vbscript on the page]
[color=blue]
> <div id="list1" class="closed">text</div>[/color]
[color=blue]
> </body>
> </html>[/color]

This works IE6:

===========
<html><head><title>Untitled Document</title>
<style type="text/css">
.closed {display:none;}
.opened {display:block;}
</style>
<script type="text/javascript">
function toggle(imgElem, divId) {
if(document.getElementById) {
var divElem = document.getElementById(divId);
if(divElem.className == "closed") {
imgElem.src = "images/close.gif";
divElem.className = "opened";
} else {
imgElem.src = "images/open.gif";
divElem.className = "closed";
}
}
}
</script>

</head><body>
<img src="images/open.gif" onclick="toggle(this,'list1')">
<div id="list1" class="closed">text</div>
</body></html>
===========

--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)

Thanks Evertjan.!

It works perfectly. Sorry for my confusion.

Swap/restore image while show/hide divs

re: Swap/restore image while show/hide divs

re: Swap/restore image while show/hide divs

re: Swap/restore image while show/hide divs

re: Swap/restore image while show/hide divs

/bytes/development

/bytes/it

/bytes/about