By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
431,943 Members | 1,921 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 431,943 IT Pros & Developers. It's quick & easy.

Swap/restore image while show/hide divs

P: n/a
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

Jan 26 '06 #1
Share this Question
Share on Google+
4 Replies


P: n/a

br**********@hotmail.com wrote:
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">
The language attribute is deprecated, just stick with the type
attribute.
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; }
} [snip] <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>


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";
}
}
}

Jan 26 '06 #2

P: n/a
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">
<!--
..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" border="0"
onclick="javascript:toggle(this,'list1')">
<div id="list1" class="closed">text</div>
</body>
</html>

Jan 26 '06 #3

P: n/a
wrote on 26 jan 2006 in comp.lang.javascript:
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">
<!--
Do not use <!--
.closed
{
display: none;
}
.opened
{
display: block;
}
-->
Do not use --> here
</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";
}
}
You need another } [this is your error !!!!]
</script>

</head>
<body>
<img src="images/open.gif" border="0"
no need for border="0"
onclick="javascript:toggle(this,'list1')">
do not use javascript: in an onclick
[unless you also use vbscript on the page]
<div id="list1" class="closed">text</div> </body>
</html>


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)
Jan 26 '06 #4

P: n/a
Thanks Evertjan.!

It works perfectly. Sorry for my confusion.

Jan 27 '06 #5

This discussion thread is closed

Replies have been disabled for this discussion.