Can I sort blogs by the age of their starters?
Swap/restore image while show/hide divs
Hello Guest		   
  • Login
• Register…
• Start blog		   • Who, Where, When
• What can I do?
• What to Read?		   • Polls
• Avatars
• Interests		   • Cities and Countries
• Random blog
• Users search		   • Search
• Games
• Tests
• QAIX		   • Сообщества
• Talxy Chat
• Horoscope
• Online		  
Зарегистрируйся!
QAIX > Javascript web-programming > Swap/restore image while show/hide divs 11 April 2008 18:24:55
  Recent blog posts: 
How to make a Christmas photo…
Every Christmas people take a off from their busy schedule. This is the time they can enjoy with their…

Car web design, motorbike…
If you are looking for Car website design, Auto web design, bike web design, or anything similar our…

The Best Video Converter-a…
iOrgSoft Inc. has released the powerful Video Converter - iOrgSoft Video Converter 1.6.0, the latest…

Photo DVD Maker New Website…
AnvSoft Inc., the multimedia software developer, unveils a new website…

How to rip DVD movie, convert…
It is no doubt that PSP is an excellent game player. However, it is not playing games all the time; you…

World’s Most Unusual Christmas…
This Christmas, don’t go with that ho-hum, run-of-the-tree-far­­m tree your family always gets…

Facebook account cracker
facebook account cracker (50 GBP) Before you're told what this tool does, it's worth noting that…

BlackBerry Storm review…
As BlackBerry fans, you can’t miss the BlackBerry Storm. At Nov 6th, 2008, the word on the street is…

Review on Any DVD Cloner
Have you ever had a DVD Movie collection broken or lost? Have you ever wanted to backup movies but…

All recruitment agencys come…
What is RCCSS? RCCSS is a new unique peice of software which will scan millions of major sites and…

  They have birthday today: 
akram mellice
Daffy little vampire
  Forums:   
    topic feeds

• QAIX  all topics, blogs and comments

• PHP web-programming

• Perl web-programming

• ASP web-programming

• Visual Basic Programming

• .Net Development

• C/C++ Programming

• Java Programming

• Javascript web-programming

• Apache HTTP Server

• Web-design

• Web-hosting, dedicated, colocation

• HTML web-programming

• XML development

• General Web-programming

• Content Management Systems

• ColdFusion

• Search Engine Optimization

• Hardware

• Software, Computer Help

• MySQL database development

• PostgreSQL database development

• MS Access database development

• Oracle database development

• MS SQL database development

• Informix database development

• Buy / Sell

• Open discussion

• Anonymous
  Discuss: 
after prompting I got…
I have the following code in the event onbeforeunload if ( typeof executingPostBack != 'undefined'…

How to draw a line graph using…
Hi all, I have one requirement.Is there any way to create a line graph using javascript.If it…

Iframe Problem
I have an iframe within a jsp page which displays rows from a database. I then have a checkbox where…

Is there any way to lock…
Hi: I have a javascript that creates a custom scrollbar for a div in the middle of my page. The problem…

Published page doesn't behave…
Hi, I just published a website from Expression Web and had used javascript so that when your mouse…
  Recent forum topics: 
Rakudo bug reports still go to…
Some of you may have seen the announcements on the Parrot lists that Parrot will be starting to use…

Stop sql Injection attacks and…
HI there, not long ago I found a website explaining a feature of a dbi-addon (or catalyst-addon) which…

[JCA/JBoss] - getOutputStream()…
Hi Guru, My project was developed by using JDeveloper10g. I have deployed the EAR file to…
  Recent forum comments:
RE: Macro: Substitution font and…
Not a macro approach, but after you have the data in the page you could just use Edit Select All in…

RE: Macro: Substitution font and…
You wouldn't want to use points to size your characters on the web page. Use pixels, em, en, ex…

RE: Problem with uploader
Matthew Whipple wrote: If the open failed then wouldn't the die kick in and at least say something in…

RE: [JCA/JBoss] - getOutputStream()…
Put Your Java Code in Servlet. It will work fine Try to avoid scriplet in jsp

RE: ASP Access Recordset Paging
Thanks a lot! You've been really helpful. What eventually solved the problem was moving the DB from…

RE: ASP Access Recordset Paging
e.l. wrote: You are not using odbc, so you should have removed those groups from the crosspost. I…

RE: ASP Access Recordset Paging
Thanks for the quick reply. 1. I use MS Office Access 2003 (11.8166.8202) SP3 2. The code of my…

RE: ASP Access Recordset Paging
e.l. wrote: We can't answer without seeing: 1. your database type and version 2. your connection string…

RE: ASP Access Recordset Paging
Hi, I'm having a different problem, but the same error message (ADODB.Recordset (0x800A0CB3) ). I…

RE: how to retrieve CheckBox value…
Evertjan. wrote: More like .Count…
  Moderators:
 Administrator
 Protorioris

Swap/restore image while show/hide divs

Guest 11 April 2008 18:24:55
 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="JavaScrip­t" type="text/JavaScri­pt">
function openIt(train) {
showIt = document.all[train];
if (showIt.style.displ­ay == "none") {
showIt.style.displa­y = ""
} else {
showIt.style.displa­y = "none"
}
var x=1;
var pics=new Array('images/open.­gif','images/close.g­if');
window.document.ima­ges.this_one.src=pic­s[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.gi­f" 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

Add comment
Web.Dev 26 January 2006 06:05:47 [ permanent link ]
 
bridgemanusa@hotmai­l.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="JavaScrip­t" type="text/JavaScri­pt">

The language attribute is deprecated, just stick with the type
attribute.
function openIt(train) {> showIt = document.all[train];> if (showIt.style.displ­ay == "none") {> showIt.style.displa­y = ""> } else {> showIt.style.displa­y = "none"> }> var x=1;> var pics=new Array('images/open.­gif','images/close.g­if');> window.document.ima­ges.this_one.src=pic­s[x];> if (x) { x=0; }> else { x=1; }> }
[snip]> <a href="#" onclick="Javascript­:openIt('list1'); return false;"><img> src="images/open.gi­f" 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.getElem­entById)
{
var divElem = document.getElement­ById(divId);
if(divElem.classNam­e == "closed")
{
imgElem.src = "images/close.gif";­
divElem.className = "opened";
}
else
{
imgElem.src = "images/open.fig";
divElem.className = "closed";
}
}
}

Add comment
Guest 27 January 2006 01:20:55 [ permanent link ]
 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/javascri­pt">
function toggle(imgElem, divId)
{
if(document.getElem­entById)
{
var divElem = document.getElement­ById(divId);
if(divElem.classNam­e == "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.gi­f" border="0"
onclick="javascript­:toggle(this,'list1'­)">
<div id="list1" class="closed">text­</div>
</body>
</html>

Add comment
Evertjan. 27 January 2006 01:32:38 [ permanent link ]
 wrote on 26 jan 2006 in comp.lang.javascrip­t:
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/javascri­pt">> function toggle(imgElem, divId)> {> if(document.getElem­entById)> {> var divElem = document.getElement­ById(divId);> if(divElem.classNam­e == "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.gi­f" 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/javascri­pt">
function toggle(imgElem, divId) {
if(document.getElem­entById) {
var divElem = document.getElement­ById(divId);
if(divElem.classNam­e == "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.gi­f" onclick="toggle(thi­s,'list1')">
<div id="list1" class="closed">text­</div>
</body></html>
===========


--
Evertjan.
The Netherlands.
(Please change the x'es to dots in my emailaddress)
Add comment
Guest 27 January 2006 06:54:23 [ permanent link ]
 Thanks Evertjan.!

It works perfectly. Sorry for my confusion.

Add comment
Guest 11 April 2008 18:24:55 [ permanent link ]
 =,B­ lamoooo
hi from russia
Add comment
 

Add new comment

As:
Login:  Password:  
 
 
  
 
Пожалуйста, относитесь к собеседникам уважительно, не используйте нецензурные слова, не злоупотребляйте заглавными буквами, не публикуйте рекламу и объявления о купле/продаже, а также материалы нарушающие сетевой этикет или УК РФ.

QAIX > Javascript web-programming > Swap/restore image while show/hide divs 11 April 2008 18:24:55
see also:
[PHP-DEV] final classes and const…
[PHP-DEV] Registering multi classes in…
[PHP-DEV] PEAR Meeting - Summary online
пройди тесты:
Do you know women?
see also:
Hi! ^^
  Copyright © 2001—2008 QAIX
Idea: Miсhael Monashev
Помощь и задать вопросы можно в сообществе support.qaix.com.
Сообщения об ошибках оставляем в сообществе bugs.qaix.com.
Предложения и комментарии пишем в сообществе suggest.qaix.com.
Информация для родителей.
Write us at:
If you would like to report an abuse of our service, such as a spam message, please .