Hi Im trying to get a small and simple script to work and am having some issues! im quite new to js. So anyway, i want to populate a hidden input with a variable, passed when a user clicks on an image. Ive managed this no problem. But i also want to highlight the image that was clicked but i dont know how to get to that element through the current script. Is there an easy way of doing this or do i need a completely new script? script below: <script type="text/javascript" language="javascript"> function change_service(service) { document.getElementById('service').value = service; } </script> Code (markup): the image buttons: <form action="scripts/question_script.php" method="post" enctype="multipart/form-data"> <tr> <td> <a href="javascript:change_service('7day');"><img class="img" src="images/7day_pay_button.png" /></a> </td> <td> <a href="javascript:change_service('3day');"><img class="img" src="images/3day_pay_button.png" /></a> </td> <td> <a href="javascript:change_service('24hr');"><img class="img" src="images/24hr_pay_button.png" /></a> </td> <td> <a href="javascript:change_service('int');"><img class="img" src="images/interview.png" /></a> </td> <td> <a href="javascript:change_service('let');"><img class="img" src="images/letter.png" /></a> </td> <td> <a href="javascript:change_service('tra');"><img class="img" src="images/translate.png" /></a> </td> </tr><input type="hidden" name="service" value="" id="service"> </table> Code (markup):
if i was you i would change the way you coded few things. you can of course do exactly what you want to do - to populate a field with some info, and 'highlight' the image that is clicked. me, i would take out that code from the "a" tag. i would add an onclick command to the img tag instead, and place the functions in the head of the page. if you give all the images a unique id - say 'img1' , 'img2', 'img3' etc , then you can easily get to them by using document.getElementById('img1') and stylize it's border via css to in effect 'highlight' the image. the onclick passes the function 2 parameters - the first one is the unique id of the image that was clicked, and the second, the info to be passed to the text field. you can see a simple example in action here: demetri-media.com/JavaScript/imgHighlight.html you can look at the page source for the full coding, but here are the significant bits, which by itself will work. there are other ways, and certainly more efficient ways, but this is a simple way which spells out in 'longhand' exactly what is going on. once you understand that, you can change it to better suit your needs. in my example, rather than populate a hidden field, i populated an h1 tag's innerHTML. i changed back the code below to better represent your original code. i am sure this will make sense. if not, just ask. <html> <script type="text/javascript" > function change_service(i,t) { for(var q=1;q<4;q++){ document.getElementById("img"+q).style.borderStyle="solid"; document.getElementById("img"+q).style.borderWidth="5px"; document.getElementById("img"+q).style.borderColor="white"; } document.getElementById(i).style.borderColor="red"; document.getElementById('service').innerHTML = t; } </script> <style type="text/css"> img {border-style:solid; border-width:5px; border-color:white; } </style> </head> <body> <img id="img1" src="images/7day_pay_button.png" onclick="change_service('img1', 'picture 1')"/> <img id="img2" src="images/3day_pay_button.png" onclick="change_service('img2', 'picture 2')"/> <img id="img3" src="images/24hr_pay_button.png" onclick="change_service('img3', 'picture 3')"/> <h1 id="service">image info</h1> </body> </html> Code (markup):
may be you want something similar http://forums.digitalpoint.com/showthread.php?t=1852407&p=14473697#post14473697