I am trying to swap images but it wont work. When i remove the very last table, the code works but as soon as I add it, it wont work. Can anyone help me fix this?
<html>
<head>
<STYLE type=text/css>
.hand {cursor:pointer;cursor:hand;border:0;}
</STYLE>
<script language=JavaScript>
intImage = 2;
function swapImage() {
switch (intImage) {
case 1:
IMG1.src = http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/"opened.gif"
intImage = 2
return(false);
case 2:
IMG1.src = http://www.codingforums.com/archive/index.php/"closed.gif"
intImage = 1
return(false);
}
}
</script>
<title>Developers Info</title>
</head>
<body>
<table width='100%' border='0' cellspacing='1' cellpadding='4'>
<tr>
<td align='center'><b><IMG id="IMG1" name="IMG1" src=http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/"opened.gif"
onclick="swapImage();" class="hand"></b></td>
</tr>
</table>
<table width='100%' border='0' cellspacing='1' cellpadding='4'>
<tr>
<td align='center'><b><IMG id="IMG1" name="IMG1" src=http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/"opened.gif"
onclick="swapImage();" class="hand"></b></td>
</tr>
</table>
</body>
</html>
BTW: I had an idea about using id's to define the function but I am not very proficient with javascript, so can anyone please help me?
Thank you,
Saf
WillGibson
02-03-2005, 10:42 PM
You are using the same name and id for both <img> tags. That is why adding the second table makes things blow up.
change the first one to
<IMG id="IMG1" name="IMG1" src=http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/"opened.gif" onclick="swapImage(document.getElementById("IMG1"));" class="hand">
and the second one to
<IMG id="IMG2" name="IMG2" src=http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/"opened.gif" onclick="swapImage(document.getElementById("IMG2"));" class="hand">
and change the javascript function swapImage() to use the object passed in.
you will also need another intImage type var...Dont use the same name
_Aerospace_Eng_
02-03-2005, 11:00 PM
if u dont want to change back and forth then u can use something i came up with
<html>
<head>
<STYLE type=text/css>
.hand {cursor:pointer;cursor:hand;border:0;}
</STYLE>
<title>Developers Info</title>
</head>
<script language=JavaScript>
function swap(imageid,image){
document.getElementById(''+imageid+'').src=''+image+'';
}
</script>
<body>
<table width='100%' border='0' cellspacing='1' cellpadding='4'>
<tr>
<td align='center'><b><IMG id="IMG1" name="IMG1" src=http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/"opened.gif" onclick="swap('IMG1','closed.gif');" class="hand"></b></td>
</tr>
</table>
<table width='100%' border='0' cellspacing='1' cellpadding='4'>
<tr>
<td align='center'><b><IMG id="IMG2" name="IMG2" src=http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/"opened.gif" onclick="swap('IMG2','closed.gif');" class="hand"></b></td>
</tr>
</table>
</body>
</html>
Thanks _Aerospace_Eng_ , that is exactly what I wanted, but I found a bug that I hope you can fix for me. When I click the image it changes to the second image but when I click it again, it does not change back to the original one.
Thanks again,
Saf
PROWEBWORKS.NET
02-04-2005, 03:27 AM
You don't need to call a function to swap images, besides document.getElementById will NOT work in some older browsers like Netscape 4.75. This is guaranteed to work every time:
<a href=http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/"#" onMouseover="pic1.src='pic2.gif'" onMouseout="pic1.src='pic1.gif'"><img src=http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/"pic1.gif" width=150 height=25 border=0 name="pic1"></a>
You don't need to call a function to swap images, besides document.getElementById will NOT work in some older browsers like Netscape 4.75. This is guaranteed to work every time:
<a href=http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/"#" onMouseover="pic1.src='pic2.gif'" onMouseout="pic1.src='pic1.gif'"><img src=http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/"pic1.gif" width=150 height=25 border=0 name="pic1"></a>
I am not trying to get a mouseover but rather a click, and I dont care about cross browser compatibility.
waolly
02-04-2005, 04:32 PM
This script will persistently swap between images when they are clicked on - not the most general but think it's what you need.
<html>
<head>
<STYLE type=text/css>
.hand {cursor:pointer;cursor:hand;border:0;}
</STYLE>
<title>Developers Info</title>
</head>
<script language=JavaScript>
function swap(img){
img.src=(img.src.indexOf('closed.gif')>=0)?'opened.gif':'closed.gif';
}
</script>
<body>
<table width='100%' border='0' cellspacing='1' cellpadding='4'>
<tr>
<td align='center'><b><IMG id="IMG1" name="IMG1" src=http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/http://www.codingforums.com/archive/index.php/"opened.gif" onclick="swap(this);" class="hand"></b></td>
</tr>
</table>
<table width='100%' border='0' cellspacing='1' cellpadding='4'>
<tr>
<td align='center'><b><IMG id="IMG2" name="IMG2" src=http://www.codingforums.com/archive/index.php/"closed.gif" onclick="swap(this);" class="hand"></b></td>
</tr>
</table>
</body>
</html>
TOP
