PDA

View Full Version : onclick image swap - second click refresh

tpeck
08-14-2003, 10:53 AM
Dear all,

I am trying to make a simple wordsearch program. The user finds the word in a grid of letters and clicks on the letters of the discovered word. The letters are highlighted when clicked.

But I want that when an image is clicked it changes to another image until clicked a second time, in which case it returns to the first image.

I am nearly there, but cannot see how to make the code compact enough to allow for any number of letters being clicked on and off.

My example is for a simple 3 x 3 grid, but I can only get the first letter to switch.

*********************************

This works (sort of):

<html>
<head>
<title>wordsearch</title>
<script language="javascript">
function swap(imgname) {
obj = document.images[imgname];
obj.src = (obj.src.indexOf('off')==-1 )? image/n_off.gif" : image/n_on.gif";
}
</script>
</head>

<body>
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: collapse">
<tr>
<td align="center" bgcolor="#CCCCCC" width="20" height="20">
<a href="#" onClick="swap(&quot;sortarrow&quot;); return false;">
<img name="sortarrow" src="../../img/n_off.gif" border="0" width="19" height="26"></a></td>
<td align="center" bgcolor="#CCCCCC" width="20" height="20">E</td>
<td align="center" bgcolor="#CCCCCC" width="20" height="20">B</td>
</tr>
<tr>
<td align="center" bgcolor="#CCCCCC" width="20" height="20">O</td>
<td align="center" bgcolor="#CCCCCC" width="20" height="20">G</td>
<td align="center" bgcolor="#CCCCCC" width="20" height="20">L</td>
</tr>
<tr>
<td align="center" bgcolor="#CCCCCC" width="20" height="20">V</td>
<td align="center" bgcolor="#CCCCCC" width="20" height="20">N</td>
<td align="center" bgcolor="#CCCCCC" width="20" height="20">N</td>
</tr>
</table>
</body>
</html>

*****************************************
Many thanks,

Terry
Danne
08-14-2003, 01:42 PM
It seems to be working except for this:


obj.src = (obj.src.indexOf('off')==-1 )? "image/n_off.gif" : "image/n_on.gif";

...

<a href="#" onClick="swap('sortarrow'); return false;">
tpeck
08-14-2003, 01:51 PM
Sorry Danne,

...the bad code should be as below: (it's those funny quotes)

You can see the thing in action at:

http://www.aapress.com.au/vocab/lessons01-05/rev/ex5TRY3.html

Just click on and off on the first 'N'.

************************

<a href="#" onClick="swap(&quot;sortarrow&quot;); return false;">
<img name="sortarrow" src="image/n_off.gif" border="0" width="19" height="26"></a></td>

************************

Terry
Danne
08-14-2003, 03:13 PM
So it's working? The link doesn't...:)
tpeck
08-14-2003, 04:51 PM
Sorry...

I am sure I pasted in the link properly.

So the link is:

http://www.aapress.com.au/vocab/

lessons01-05/rev/ex5TRY3.html

Can you put it all together, cos it doesn't seem to keep together in this posting box.

Terry
cheesebag
08-14-2003, 05:41 PM
Try this (skip the links):

<script type="text/javascript" language="javascript">

function swapit(oImage) {
oImage.src = oImage.src.replace(/_(on)?(off)?/, (oImage.src.match(/_off/)) ? '_on' : '_off');
}

</script>
.....
.....
<td>
<img src="../../img/n_off.gif" border="0" width="19" height="26" onclick="swapit(this)">
</td>

You can add this to your stylesheet:

img {
cursor: hand;
cursor: pointer;
}
MrPink
08-14-2003, 05:59 PM
Tried your script cheesebag, but I get an error-message: 'x is undefined'....
cheesebag
08-14-2003, 06:05 PM
Oops! :o I was using the ever-popular variable x to test & left it in inadvertently. Try it now.
MrPink
08-14-2003, 06:16 PM
Perfect! Thanks....
tpeck
08-15-2003, 04:33 AM
Thanks!

It works - (I can't get the cursor change to work yet, but I'll try.)

You can see the full effect (hopefully) at:

http://www.aapress.com.au/vocab/demo/onoffdemo.html

I think it is very good. No idea exactly why the code works.

You are all geniuses. Thanks again.

Terry
MrPink
08-15-2003, 05:18 PM
I did this to get the cursor change:

<a href="#"><img src="../../img/n_off.gif" border="0" width="19" height="26" onclick="swapit(this)"></a>