Log in

View Full Version : Two instances with OnClick


dsagrera
02-24-2008, 06:04 AM
Hey people!
I'm new at javascript and i'm really stuck with something that (I think) should be an easy thing to do. I'll explain:
I have an image, let's call it IMAGE_1. When i do a click on it, it should change to IMAGE_2, but when i click on it again, it should change to IMAGE_1 again and so on...
I tought it was easy, but my knowledge in javascript is not enough to finish it... I've used logic so far, but no luck, here's the code:


<img src='/imagenes/turnos/IMAGE_1.gif' width='10' height='10' name='disponible' id='disponible' border='0' onClick="javascript:if(this.src='/imagenes/turnos/IMAGE_1.gif'){this.src='/imagenes/turnos/IMAGE_2.gif';}else{this.src='/imagenes/turnos/IMAGE_1.gif';}">

The first part works great, IMAGE_1 changes to IMAGE_2 on the first click, but i can't make it work to change to IMAGE_1 when I click on it again.

It's not working after 2 hours of testing all sort of things... any ideas? Thanks in advance!
coothead
02-24-2008, 12:17 PM
Hi there dsagrera,

and a warm welcome to these forums. ;)

Have a look at this example, you should be able to adapt it to your requirements...


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<base href="http://mysite.orange.co.uk/coothead/pop_up_gallery/">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
* {
margin:0;
padding:0;
}
#container {
text-align:center;
}
</style>

<script type="text/javascript">
window.onload = function() {
document.getElementById('pic').onclick=function() {
this.src=(this.src.indexOf('ball_shad.jpg') != -1)?'ball_shad_thumb.jpg':'ball_shad.jpg';
}
}
</script>

</head>
<body>

<div id="container">
<img id="pic" class="thumb" src="ball_shad_thumb.jpg" alt="">
</div>

</body>
</html>

coothead
dsagrera
02-24-2008, 12:47 PM
Ok, thanks coothead! by posting that example I finally fixed my code, and that function (IndexOf) helped me also to fix another problem I had with another script, so was 1 answer, 2 fixes! And that's great!

Here's the fixed code for anyone who wants to use it:


<img src='/imagenes/turnos/turno_disponible.gif' width='10' height='10' name='disponible' id='disponible' border='0' onClick="if(this.src.indexOf('turno_disponible.gif') < 0){this.src='/imagenes/turnos/turno_disponible.gif';}else{this.src='/imagenes/turnos/turno_reservado.gif';}">

The script starts with the light off ('image_1') turns on a red light ('image_2') with 1 click and turns it off on the second click ('image_1'). This also puts some information on a hidden text field and removes it if the light is off.

I thought of this script to make an update of several database records, based on that on "lights". The ones turned on will be updated, while the others will be left alone.

Again, thanks CootHead for your unvaluable help! Best regards.
coothead
02-24-2008, 01:05 PM
No problem, you're welcome. ;)