Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Please Help Highlight Image

    Hi, I have say 12 pics on a page, in 3 rows of 4. The rows of pics are there so that a choice can be made from each row and I'm using a function <script> var highlight_color = '#FF0033'; function toggle_highlight(id) { var images = document.getElementsByTagName('img'); for (var i = 0; i < images.length; i++) { var image = images[i]; image.style.borderColor = image.id == id ? highlight_color : 'white'; } } </script> to toggle a border colour change so that you can see what was chosen from each row. The function I have used is fine in that it works, but I can only choose one picture and have the border changed, then if I click on another row the first border that changed obviously changes back and the new selection is highlighted. I don't really know where to go from here.
    Any help will be much appreciated.
    Thank you.

  • #2
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,535
    Thanks
    3
    Thanked 513 Times in 500 Posts
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <script>
    var highlight_color = '#FF0033';
    function toggle_highlight(img) {
     var tr=img;
     while (tr.parentNode&&tr.nodeName.toUpperCase()!='TR'){
      tr=tr.parentNode;
     }
     var images = tr.getElementsByTagName('img');
     for (var i = 0; i < images.length; i++) {
      var image = images[i];
      image.style.borderColor = image == img ? highlight_color : 'blue';
     }
    }
    
     </script> </head>
    
    <body>
    <img id="i1" onclick="toggle_highlight('i1')" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50" height="60" border="2" />
    <table>
      <tr>
        <td><img  onclick="toggle_highlight(this)" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50" height="60" border="2" /></td>
        <td><img  onclick="toggle_highlight(this)" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50" height="60" border="2" /></td>
      </tr>
      <tr>
        <td><img  onclick="toggle_highlight(this)" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50" height="60" border="2" /></td>
        <td><img  onclick="toggle_highlight(this)" src="http://www.vicsjavascripts.org.uk/StdImages/One.gif" width="50" height="60" border="2" /></td>
      </tr>
    </table></body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/

  • #3
    New to the CF scene
    Join Date
    Aug 2010
    Posts
    4
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Thank you

    Thank you Vwphillips, It seems so easy when you know how, wish I knew how some of the time lol.

    Thanks again! Thank you for your time.
    Much appreciated.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •