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

collapsable side bar (IE)

P: n/a
J
Hello,

I'd like to create sections that are collapsible via clicking on a
graphic next to (or above) the section (e.g. collapsible cells of a table)

I've given both the graphic and the section an ID property and I have
written this:

function hideShow (name1)
{
if (document.all(name1).style.display == "none")
document.all(name1).style.display = "inline"
else
document.all(name1).style.display = "none"
}

which seems to work, but how can I pass in the image ID and have the
image swapped each time I collapse/expand the section?

any help appreciated,
BK.
Jul 23 '05 #1
Share this Question
Share on Google+
3 Replies


P: n/a
The simple answer is, provide a name in the image tag, then:

document.images[imagename].src = "img/image1.jpg";

However, when creating an image swap, you should consider precashing the
images, so the user doesn't get bogged down with a delay (ugly visual
stuff).

To name the image tag:

<img id="image1" border="0" src="img/image1.jpg" />

To precash the images:

var cachedImg = new Object( );
cachedImg['image1'] = new Image();
cachedImg['image1'].src = "img/image2.jpg";

then, when you do the swap:

document.images['image1'].src = cachedImg['image1'].src

That'll do the trick!
"J" <l5*@9klerer.com> wrote in message
news:ss***************@newsfe3-gui.ntli.net...
Hello,

I'd like to create sections that are collapsible via clicking on a graphic
next to (or above) the section (e.g. collapsible cells of a table)

I've given both the graphic and the section an ID property and I have
written this:

function hideShow (name1)
{
if (document.all(name1).style.display == "none")
document.all(name1).style.display = "inline"
else
document.all(name1).style.display = "none"
}

which seems to work, but how can I pass in the image ID and have the image
swapped each time I collapse/expand the section?

any help appreciated,
BK.

Jul 23 '05 #2

P: n/a
On Thu, 13 Jan 2005 22:18:00 GMT J wrote:
Hello, I'd like to create sections that are collapsible via clicking on a
graphic next to (or above) the section (e.g. collapsible cells of a
table) I've given both the graphic and the section an ID property and I have
written this: function hideShow (name1)
{
if (document.all(name1).style.display == "none")
document.all(name1).style.display = "inline"
else
document.all(name1).style.display = "none"
} which seems to work, but how can I pass in the image ID and have the
image swapped each time I collapse/expand the section? any help appreciated,
BK.

DYnamicdrive.com has a menu called "switch menu" which does what you want.
You can see it in action at my site www.somestuff.batcave.net/
You're close though.
Take a look at their source code to see what they did.
Jul 23 '05 #3

P: n/a
JRS: In article <ss***************@newsfe3-gui.ntli.net>, dated Thu, 13
Jan 2005 22:18:00, seen in news:comp.lang.javascript, J
<l5*@9klerer.com> posted :
function hideShow (name1)
{
if (document.all(name1).style.display == "none")
document.all(name1).style.display = "inline"
else
document.all(name1).style.display = "none"
}

function hideShow (name1) { var T = document.all(name1).style
T.display = (T.display == "none") ? "inline" : "none" }

function hideShow (name1) { with (document.all(name1).style)
display = (display == "none") ? "inline" : "none" }

should be more economical equivalents.

--
John Stockton, Surrey, UK. ?@merlyn.demon.co.uk Turnpike v4.00 IE 4
<URL:http://www.jibbering.com/faq/> JL/RC: FAQ of news:comp.lang.javascript
<URL:http://www.merlyn.demon.co.uk/js-index.htm> jscr maths, dates, sources.
<URL:http://www.merlyn.demon.co.uk/> TP/BP/Delphi/jscr/&c, FAQ items, links.
Jul 23 '05 #4

This discussion thread is closed

Replies have been disabled for this discussion.