?
Solved

onClick -> change image -> onClick -> change back

Posted on 2003-03-24
5
Medium Priority
?
2,520 Views
Last Modified: 2012-06-27
This may be very simple for the people who know javascript but I'm not one of them :)

All I want to do is change the image on a fold down menu like this:
http://www.dansteinman.com/dynapi/docs/examples/collapsemenu2.html
An "arrow_right.gif" to an "arrow_down.gif" and back...

somebody?

thanks /Jesper
0
Comment
Question by:Japfreak2000
  • 3
  • 2
5 Comments
 
LVL 1

Expert Comment

by:Antithesis
ID: 8198418
If the image doesn't have a name already, give it one:

----------
<img name="imgname" src="arrow_down.gif">
----------

Then put this code in the head:

----------
<script language="javascript">
img1 = "arrow_right.gif";
img2 = "arrow_down.gif";
function chng(c_img)  {
    if (c_img.src.indexOf(img1) != -1) c_img.src = img2;
    else c_img.src = img1;
}
</script>
----------

Then put an onclick attribute in the link:

----------
<a href="" onlick="chng('imgname')">Link</a>
----------
0
 

Author Comment

by:Japfreak2000
ID: 8198929
I tried this

----------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript">
img1 = "arrow_right.gif";
img2 = "arrow_down.gif";
function chng(c_img)  {
   if (c_img.src.indexOf(img1) != -1) c_img.src = img2;
   else c_img.src = img1;
}
</script>

</head>
<body bgcolor="#FFFFFF" text="#000000">
<a href="#" onclick="chng('imgname')"><img name="imgname" src="arrow_down.gif" border="0"></a>
</body>
</html>
----------

But it doesn't seem to work?
0
 
LVL 1

Accepted Solution

by:
Antithesis earned 60 total points
ID: 8198981
Oh, duh!
----------
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript">
img1 = "arrow_right.gif";
img2 = "arrow_down.gif";
function chng(c_img)  {
  if (document[c_img].src.indexOf(img1) != -1) document[c_img].src = img2;
  else document[c_img].src = img1;
}
</script>

</head>
<body bgcolor="#FFFFFF" text="#000000">
<a href="#" onclick="chng('imgname')"><img name="imgname" src="arrow_down.gif" border="0"></a>
</body>
</html>
----------
0
 

Author Comment

by:Japfreak2000
ID: 8199171
Now it seem to work.
Thank you :)
0
 

Author Comment

by:Japfreak2000
ID: 8217786
another thing....
My friend says it doesn't work on MAC.
The "arrow_down.gif" disappeares, but if you click again the "arrow_right.gif" comes back... Do you know what the trouble can with this??

/J
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

612 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question