Toggle image on onclick event

Amit1980

1 New Member

I have to toggle the arrow image on onclick event. Here is the code with the required functionility. What I want now is, when the page loads there will be right arrow images. The arrow should be chenge to down arrow when I the row expands to dispaly the child links. and if the collaps to hide child link the arrow should change back to right arroe image. In the below e.g code you will not be able to see the arrow images.
Here is the code I have.
CODE:

[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Untitled </title>
<script type="text/javascript">
//code for toggling-hide/display table
function ShowMenu(num,me nu,max,imd)
{
//alert('test toggle');
for(i = 0; i < max; i++)
{

//add number onto end of menu
var menu_div = menu + i;
//var menu_div1 = menu1 + i;
//if current show
if(i == num)
{
document.getEle mentById(menu_d iv).style.displ ay = 'inline';
//document.getEle mentById(menu_d iv1).style.disp lay = 'block';

}
else
{
//if not, hide
document.getEle mentById(menu_d iv).style.displ ay = 'none';

//document.getEle mentById(menu_d iv1).style.disp lay = 'none';
}

}

}
</script>
</head>
<body>
<table cellpadding="0" cellspacing="0" border="0" width="100%">
<tr>
<td colspan=3><img src="/virtuals/vap/CWW/images/spacer.gif" height=15 width=1></td>
</tr>
<tr>
<td width=15><img src="/virtuals/vap/CWW/images/spacer.gif" height=1 width=15></td>
<td "width=100% ">

<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#D DDDDD" width="100%" id="AutoNumber5 " bgcolor=#DDDDDD >
<tr>
<td width="100%">
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#1 11111" width="100%" id="AutoNumber6 ">
<tr>
<td width="100%">
<table border="0" cellpadding="3" cellspacing="0" style="border-collapse: collapse" bordercolor="#1 11111" id="AutoNumber7 " width="100%">
<tr>
<td valign="top" width="1"></td>

<td><b><font size="2" face="Tahoma" color="black">
<span style="font-size: 8pt">FAVORITE LINKS</span></font></b>
</td>

</tr>
</table>
</td>
</tr>

<tr>
<td width="100%" bgcolor="#FFFFF F">

<table border="0" cellpadding="5" cellspacing="0" style="border-collapse: collapse" bordercolor="#1 11111" width="100%" id="AutoNumber8 ">
<tr>
<td width ="100%">
<table width="100%" border=0 cellpadding=0 cellspacing=0 style="border-collapse: collapse" bordercolor="#1 11111" id="AutoNumber1 0" height="30" >

<tr>
<td width="10%" align ="left" width="" valign="middle" ><a style="cursor:h and" onclick="ShowMe nu('0','row','3 ','img0')"><img id='img0' src="/virtuals/vap/CWW/images/grey_arrow_righ t.jpg" height="13" width="13" alt="right arrow"></a></td>
<td width="100%" valign="top"><f ont style="font-size: 7pt" face="Tahoma">< b>TOP LINKS</b></font></td>
</tr>
<tr id='row0' style="display: none;"><td colspan="2">
<span><table width="100%" border=0 cellpadding=0 cellspacing=0 style="border-collapse: collapse">

<tr>
<td width="10%"></td>
<td width="100%" valign="top"><a href="HTTP://expense6.bmc.co m/eworkplace" class="bodyText "><font style="font-size: 8pt" face="Tahoma">E xpense Reports</font></a></td>
</tr>

<tr>
<td width="10%"></td>
<td width="100%" valign="top"><a href="HTTP://sharepoint.bmc. com/GlobalTravel/default.aspx" class="bodyText "><font style="font-size: 8pt" face="Tahoma">T ravel</font></a></td>
</tr>

</table>
</span>
</td>
</tr>

<tr>
<td colspan="2" width="100%">
<hr color="#dddddd" size="1" />
</td>
</tr>

<tr>
<td width="10%" align ="left" width="" valign="middle" ><a style="cursor:h and" onclick="ShowMe nu('1','row','3 ','img1')"><img id='img1' src="/virtuals/vap/CWW/images/grey_arrow_righ t.jpg" height="13" width="13"></a></td>
<td width="100%" valign="top"><f ont style="font-size: 7pt" face="Tahoma">< b>GET IT DONE</b></font></td>
</tr>
<tr id='row1' style="display: none;"><td colspan="2">
<span><table width="100%" border=0 cellpadding=0 cellspacing=0 style="border-collapse: collapse">

<tr>
<td width="10%"></td>
<td width="100%" valign="top"><a href="HTTPS://ncai.bmc.com:94 40/OA_HTML/US/OCAIPROD_login. htm" class="bodyText "><font style="font-size: 8pt" face="Tahoma">O racle Login</font></a></td>
</tr>

</table>
</span>
</td>
</tr>

<tr>
<td colspan="2" width="100%">
<hr color="#dddddd" size="1" />
</td>
</tr>

<tr>
<td width="10%" align ="left" width="" valign="middle" ><a style="cursor:h and" onclick="ShowMe nu('2','row','3 ','img2')"><img id='img2' src="/virtuals/vap/CWW/images/grey_arrow_righ t.jpg" height="13" width="13"></a></td>
<td width="100%" valign="top"><f ont style="font-size: 7pt" face="Tahoma">< b>CORPORATE</b></font></td>
</tr>
<tr id='row2' style="display: none;"><td colspan="2">
<span><table width="100%" border=0 cellpadding=0 cellspacing=0 style="border-collapse: collapse">

<tr>
<td width="10%"></td>
<td width="100%" valign="top"><a href="HTTP://banana.bmc.com/cgi-bin/calweb/calweb.exe" class="bodyText "><font style="font-size: 8pt" face="Tahoma">C alendar Application</font></a></td>
</tr>

<tr>
<td width="10%"></td>
<td width="100%" valign="top"><a href="HTTP://fishtail.bmc.co m/csg/staging/brandpack/" class="bodyText "><font style="font-size: 8pt" face="Tahoma">E mployee Brand Pack</font></a></td>
</tr>

</table>
</span>
</td>
</tr>

</table>
</td>
</tr>

</table>
</td>
</tr>

</table>
</td>
</tr>
</table>
</td>
<td width=15><img src="/virtuals/vap/CWW/images/spacer.gif" height=1 width=15></td>
</tr>
</table>
</body>
</html>[/HTML]

Nov 7 '08 #1

Subscribe Reply

5917

pronerd

392

Recognized Expert Contributor

And so your question is? Is there a problem? If so what? Is there an error if so what does it say?

Nov 7 '08 #2

Similar topics

18776

Input Type = "Image"

by: Jawahar Rajan | last post by:

All, I am using a few Input type of "Image" instead of a classic submit button in a form to achieve various tasks for example image1 - add user image2 - modify user image3 - delete user image4 - reSet user.

Javascript

17250

Programatically click <INPUT type=image ...> element

by: Csaba2000 | last post by:

I want to be able to programatically click on the center of an <INPUT type=image ...> element (I only care about IE 5.5+). This should work regardless of whether IE has focus. Normally you would do myDomElement.click and the mouse doesn't matter, but in the case of an input image element, what happens is the submitted url has something like "?x=12&y=7" appended to it (the numbers vary per mouse position on the clicked element). If you hit...

Javascript

2376

toggle .value property ?

by: Jürgen Heyn | last post by:

Good morning, on form 2 input elements and 1 image are placed. The 1st (Index) one is "hidden", the 2nd ) is an empty textbox. When clicking the picture I would like to toogle a boolean value. (displayed in the textbox). The following function reacts correctly on the first click. Any further click as no effect (is returns "TRUE" in the textbox). Where is the mistake ? How can I solve the problem ? Thank you very much in advance.

Javascript

2287

toggle question

by: leegold2 | last post by:

I wondered if anyone would give me code- I think it would be easy, but I'm a complete newbie. What I want to do is to show many tables in a brief truncated format and then for each table offer the user the ability to toggle so they can see the full content of each table individually. The code I got from the net below works fine for *one* table but when I try to add a 2nd table it does not work. How can I apply this toggle individually to...

Javascript

2093

toggle image with onLoad event

by: Brian | last post by:

Im trying to toggle a series of images with an onLoad event. I have my code checking the value of a hidden textbox. Depending on the value pf the text box, it will display one image for one and another image for the rest of them... When the page loads, i get the same image for all of them.. here is a snippet of my code.. When the page loads for the first time, there should be no value, so i should get the second image for all of them.....

Javascript

17572

how to toggle images when one clicks a image/ link

by: Madame Blablavatsky | last post by:

hello, i have an image that is also a link: <a href="javascript:opmaak('bold','')"><img src='bold_uit.gif name='uit'></a> when the image/link is clicked it triggers a javascript that enables people to type bold.

Javascript

22126

Change image of imagebutton

by: ruca | last post by:

Hi gurus, I have a imagebutton in my WebForm, and I want that when I click (mouse down) on her the imagebutton change image and when I "unclick" (mouse up) change to the original image. Basically I want to know how can I have the mousedown and mouseup buttons events. I think that I have to do this in JavaScript. Can you help me on this?

ASP.NET

3318

image map test page - won't work in IE6 or FF

by: lofty00 | last post by:

hello, sorry about the repost - I've been posting to several groups and I've decided it's better to make a single repost to all of them rather than an extra post in each. I've been trying to work out why I can't get the image maps to work in IE6 on a page I'm working on (which is now working in firefox). I've written the page below as a test case. It's now refusing to work in Firefox either, and I can't see anything wrong with it so...

Javascript

6156

Simple Toggle checkbox function on IMAGE click

by: ameshkin | last post by:

I have a checkbox with an ID of svc_tp_1, and an image that corresponds with this checkbox below it. <input type="checkbox" name="checkbox" id="svc_tp_1" value="svc_tp_1" / <img src="images/screen_print.jpg" onclick="toggle('svc_tp_1'); return true;" /> I know how to get the checkbox to check when the image is clicked, but what I really want is a toggle. When a user clicks on the image, the system should first check to see if svc_tp_1...

Javascript

8687

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main usage, and What is the difference between ONU and Router. Let’s take a closer look ! Part I. Meaning of...

General

9174

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. Here is my compilation command: g++-12 -std=c++20 -Wnarrowing bit_field.cpp Here is the code in...

C / C++

8884

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the choice of these technologies. I'm particularly interested in Zigbee because I've heard it does some...

General

7751

AI Job Threat for Devs

by: agi2029 | last post by:

Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then launch it, all on its own.... Now, this would greatly impact the work of software developers. The idea...

Career Advice

6534

Access Europe - Using VBA to create a class based on a table - Wed 1 May

by: isladogs | last post by:

The next Access Europe User Group meeting will be on Wednesday 1 May 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome a new presenter, Adolph Dupré who will be discussing some powerful techniques for using class modules. He will explain when you may want to use classes instead of User Defined Types (UDT). For example, to manage the data in unbound forms. Adolph will...

Microsoft Access / VBA

5875

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert into image. Globals.ThisAddIn.Application.ActiveDocument.Select();...

C# / C Sharp

4376

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The last exercise I practiced was to create a LAN-to-LAN VPN between two Pfsense firewalls, by using IPSEC protocols. I succeeded, with both firewalls in the same network. But I'm wondering if it's possible to do the same thing, with 2 Pfsense firewalls...

Networking - Hardware / Configuration

2347

How to add payments to a PHP MySQL app.

by: muto222 | last post by:

How can i add a mobile payment intergratation into php mysql website.

PHP

2009

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence can significantly impact your brand's success. BSMN Consultancy, a leader in Website Development in Toronto offers valuable insights into creating effective websites that not only look great but also perform exceptionally well. In this comprehensive...

General