Swap/restore image while show/hide divs

B

bridgemanusa

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:eek:penIt('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:eek:penIt('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:eek:penIt('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:eek:penIt('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
 
W

web.dev

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">
Click to expand...

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:eek:penIt('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>
Click to expand...

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

bridgemanusa

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>
 
E

Evertjan.

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">
<!--
Click to expand...

Do not use <!--
.closed
{
display: none;
}
.opened
{
display: block;
}
-->
Click to expand...

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";
}
}
Click to expand...

You need another } [this is your error !!!!]
</script>

</head>
<body>
<img src="images/open.gif" border="0"
Click to expand...

no need for border="0"
onclick="javascript:toggle(this,'list1')">
Click to expand...

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

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>
===========
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Similar Threads

Help with code 0
How can I hide a div using an event listener on multiple checkboxes? 6
Show/Hide layer in Netscape/IE problem 5
adding proper functionality to code.Please read comments in code andfirst test it in your browser to 2
Make 'Image X' spin 360deg on y-Axis until reset button clicked 1
I want to Display Excel As HTML In js 2
CSS Image swap not working. 1
Buttons lining up 1

Members online

Total: 50 (members: 1, guests: 49)
Robots: 471

Forum statistics

Threads
473,994
Messages
2,570,223
Members
46,813
Latest member
lawrwtwinkle111

Latest Threads

Top