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 4 of 4
  1. #1
    Regular Coder
    Join Date
    Jun 2004
    Location
    underground
    Posts
    186
    Thanks
    0
    Thanked 0 Times in 0 Posts

    radioStateImages

    Here's something I've been playing with:
    Join in the fun.
    Code:
    <body>
    <script type="text/javascript"> 
    function toglIm(parEl, evt) 
     {
       var imgEl;
       evt.target ? imgEl = evt.target : imgEl = evt.srcElement;
       if(imgEl.nodeName != "IMG")
         return false;
       var onEl,
           imgckd  = parEl.attributes["imgchecked"],
           imgIndx = +imgckd.nodeValue - 1,
           images  = parEl.getElementsByTagName("IMG");
       if(!isNaN(imgIndx))
         onEl = images[imgIndx];
       if(imgEl != onEl)
        {
          var onSrc  = "http://codingforums.com/images/statusicon/thread_hot_lock.gif", 
              offSrc = "http://codingforums.com/images/statusicon/thread_hot.gif",
                   i = 0;
          if(onEl)
            onEl.src = offSrc;
          imgEl.src = onSrc;
          while(images[i] != imgEl)
            i++;
          imgckd.nodeValue = i + 1;
        }
     } 
    </script>
    
    <!-- expando attribute: "imgchecked" is required for each group. -->
    
    <!-- imgchecked = 1-based image index, or any non-numeric-value to specify none selected. -->
    
    <div imgchecked="none" onclick="toglIm(this, event)">
      <img src="http://codingforums.com/images/statusicon/thread_hot.gif">
      <img src="http://codingforums.com/images/statusicon/thread_hot.gif">
      <img src="http://codingforums.com/images/statusicon/thread_hot.gif">
    </div>
    
    <br>
    
    <div imgchecked="3" onclick="toglIm(this, event)">
      <img src="http://codingforums.com/images/statusicon/thread_hot.gif">
      <img src="http://codingforums.com/images/statusicon/thread_hot.gif">
      <img src="http://codingforums.com/images/statusicon/thread_hot_lock.gif">
    </div>
    
    <br>
    
    <div imgchecked="2" onclick="toglIm(this, event)">
      <img src="http://codingforums.com/images/statusicon/thread_hot.gif">
      <img src="http://codingforums.com/images/statusicon/thread_hot_lock.gif">
      <img src="http://codingforums.com/images/statusicon/thread_hot.gif">
    </div>
    
    <br>
    
    <div imgchecked="1" onclick="toglIm(this, event)">
      <img src="http://codingforums.com/images/statusicon/thread_hot_lock.gif">
      <img src="http://codingforums.com/images/statusicon/thread_hot.gif">
      <img src="http://codingforums.com/images/statusicon/thread_hot.gif">
    </div>
    
    <br>
    
    <div imgchecked="none" onclick="toglIm(this, event)">
      <img src="http://codingforums.com/images/statusicon/thread_hot.gif">
      <img src="http://codingforums.com/images/statusicon/thread_hot.gif">
      <img src="http://codingforums.com/images/statusicon/thread_hot.gif">
    </div>
    </body>
    Last edited by neofibril; 06-20-2004 at 04:53 PM.

  • #2
    Regular Coder
    Join Date
    Jun 2004
    Location
    underground
    Posts
    186
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Well, now that I think:
    it does no good to hard-code those images...
    Code:
    <body>
    <script type="text/javascript"> 
    function toglIm(parEl, evt, onSrc, offSrc) 
     {
       var imgEl;
       evt.target ? imgEl = evt.target : imgEl = evt.srcElement;
       if(imgEl.nodeName != "IMG")
         return false;
       var onEl,
           imgckd  = parEl.attributes["imgchecked"],
           imgIndx = +imgckd.nodeValue - 1,
           images  = parEl.getElementsByTagName("IMG");
       if(!isNaN(imgIndx))
         onEl = images[imgIndx];
       if(imgEl != onEl)
        {
          var i = 0;
          if(onEl)
            onEl.src = offSrc;
          imgEl.src = onSrc;
          while(images[i] != imgEl)
            i++;
          imgckd.nodeValue = i + 1;
        }
     } 
    </script>
    
    <!-- expando attribute: "imgchecked" is required for each group. -->
    
    <!-- imgchecked = 1-based image index, or any non-numeric-value to specify none selected. -->
    
    <span imgchecked="1" onclick="toglIm(this, event, 'http://codingforums.com/images/statusicon/thread_hot_lock.gif', 'http://codingforums.com/images/statusicon/thread_hot.gif')">
      <img src="http://codingforums.com/images/statusicon/thread_hot_lock.gif">
      <img src="http://codingforums.com/images/statusicon/thread_hot.gif">
      <img src="http://codingforums.com/images/statusicon/thread_hot.gif">
    </span>
    
    <br>
    
    <span imgchecked="3" onclick="toglIm(this, event, 'http://codingforums.com/images/statusicon/thread_moved.gif', 'http://codingforums.com/images/statusicon/thread.gif')">
      <img src="http://codingforums.com/images/statusicon/thread.gif">
      <img src="http://codingforums.com/images/statusicon/thread.gif">
      <img src="http://codingforums.com/images/statusicon/thread_moved.gif">
    </span>
    </body>
    Last edited by neofibril; 06-20-2004 at 04:53 PM.

  • #3
    Regular Coder
    Join Date
    Jun 2004
    Location
    underground
    Posts
    186
    Thanks
    0
    Thanked 0 Times in 0 Posts

    More fun...

    Being that images are now parameters, setting the 'imgchecked' attribute, before hand, is unnecessary.
    I think this is a better script, as it eliminates that dependency:
    Code:
    <body>
    <script type="text/javascript">
    function toglIm(pEl, evt, onSrc, offSrc) 
     {
       var imgEl;
       evt.target ? imgEl = evt.target : imgEl = evt.srcElement;
       if(imgEl.nodeName != "IMG")
         return false;
       var images = pEl.getElementsByTagName("IMG"),
           imgckd = pEl.attributes["imgchecked"];
       if(!imgckd)
        {
          var ckdAtt = document.createAttribute("imgchecked"),
                 off = RegExp(offSrc),
                  ln = images.length,
                   i = 0;
          while(i < ln && off.test(images[i].src))
            i++;
          if(i < ln)
            ckdAtt.value = i;
          pEl.setAttributeNode(ckdAtt);
          imgckd = pEl.attributes["imgchecked"];
        }
       var onEl,
           imgIndx = imgckd.value;
       if(imgIndx)
         onEl = images[+imgIndx];
       if(imgEl != onEl)
        {
          if(onEl)
            onEl.src = offSrc;
          imgEl.src = onSrc;
          var i = 0;
          while(images[i] != imgEl)
            i++;
          imgckd.value = i;
        }
     } 
    </script>
    
    <span onclick="toglIm(this, event, 'http://codingforums.com/images/statusicon/thread_lock.gif', 'http://codingforums.com/images/statusicon/thread.gif')">
      <img src="http://codingforums.com/images/statusicon/thread.gif">
      <img src="http://codingforums.com/images/statusicon/thread_lock.gif">
      <img src="http://codingforums.com/images/statusicon/thread.gif">
    </span>
    
    <span onclick="toglIm(this, event, 'http://codingforums.com/images/statusicon/thread_hot_lock.gif', 'http://codingforums.com/images/statusicon/thread_hot.gif')">
      <img src="http://codingforums.com/images/statusicon/thread_hot.gif">
      <img src="http://codingforums.com/images/statusicon/thread_hot.gif">
      <img src="http://codingforums.com/images/statusicon/thread_hot.gif">
    </span>
    
    <span onclick="toglIm(this, event, 'http://codingforums.com/images/statusicon/thread_lock.gif', 'http://codingforums.com/images/statusicon/thread.gif')">
      <img src="http://codingforums.com/images/statusicon/thread.gif">
      <img src="http://codingforums.com/images/statusicon/thread_lock.gif">
      <img src="http://codingforums.com/images/statusicon/thread.gif">
    </span>
    </body>
    And here's a bit of commentary:
    PHP Code:
    function toglIm(pElevtonSrcoffSrc
     {
       
    // get/set clicked element:
       
    var imgEl;
       
    evt.target imgEl evt.target imgEl evt.srcElement;

       
    // if not an image, exit:
       
    if(imgEl.nodeName != "IMG")
         return 
    false;

       var 
    images pEl.getElementsByTagName("IMG"),
           
    imgckd pEl.attributes["imgchecked"];

       
    // set the attribute node, if non-existent:
       
    if(!imgckd)
        {
          var 
    ckdAtt document.createAttribute("imgchecked"),
                 
    off RegExp(offSrc),
                  
    ln images.length,
                   
    0;

          
    // check for an 'on' image, and set its index as attribute value:
          
    while(ln && off.test(images[i].src))
            
    i++;
          if(
    ln)
            
    ckdAtt.value i;

          
    // set the node:
          
    pEl.setAttributeNode(ckdAtt);
          
          
    // redefine 'imgckd' for a current reference to the node:
          
    imgckd pEl.attributes["imgchecked"];
        }

       var 
    onEl,
           
    imgIndx imgckd.value;

       
    // check for a node string, and set 'onEl' to the image at index number:
       
    if(imgIndx)
         
    onEl images[+imgIndx];

       
    // check that the image is not already on:
       
    if(imgEl != onEl)
        {
          
    // check for an on image, and set to off:
          
    if(onEl)
            
    onEl.src offSrc;

          
    // set clicked image to on:
          
    imgEl.src onSrc;

          
    // get the index of on-image, and set that as node string:
          
    var 0;
          while(
    images[i] != imgEl)
            
    i++;
          
    imgckd.value i;
        }
     } 
    Just FYI, about 'nodeValue':
    it was changed to 'value', because IE will set nodeValue as a number, instead of a string (in this case),
    which would be a problem when checking for an undefined string - if the image index was 0.
    Last edited by neofibril; 06-21-2004 at 11:48 AM. Reason: added a var for repeating reference

  • #4
    Regular Coder
    Join Date
    Jun 2004
    Location
    underground
    Posts
    186
    Thanks
    0
    Thanked 0 Times in 0 Posts

    One thing led to another

    All of that attribute stuff is probably unnecessary...
    Code:
    <body>
    <script type="text/javascript">
    function toglIm(pEl, evt, onSrc, offSrc) 
     {
       var imgEl;
       evt.target ? imgEl = evt.target : imgEl = evt.srcElement;
       if(imgEl.tagName != "IMG")
         return false;
       var on = RegExp(onSrc);
       if(on.test(imgEl.src))
         return false;
       var images = pEl.getElementsByTagName("IMG"),
               ln = images.length,
                i = 0;
       while(i < ln && !on.test(images[i].src))
         i++;
       if(i < ln)
         images[i].src = offSrc;
       imgEl.src = onSrc;
     } 
    </script>
    
    <span onclick="toglIm(this, event, 'http://codingforums.com/images/statusicon/thread_lock.gif', 'http://codingforums.com/images/statusicon/thread.gif')">
      <img src="http://codingforums.com/images/statusicon/thread.gif">
      <img src="http://codingforums.com/images/statusicon/thread_lock.gif">
      <img src="http://codingforums.com/images/statusicon/thread.gif">
    </span>
    
    <span onclick="toglIm(this, event, 'http://codingforums.com/images/statusicon/thread_hot_lock.gif', 'http://codingforums.com/images/statusicon/thread_hot.gif')">
      <img src="http://codingforums.com/images/statusicon/thread_hot.gif">
      <img src="http://codingforums.com/images/statusicon/thread_hot.gif">
      <img src="http://codingforums.com/images/statusicon/thread_hot.gif">
    </span>
    
    <span onclick="toglIm(this, event, 'http://codingforums.com/images/statusicon/thread_lock.gif', 'http://codingforums.com/images/statusicon/thread.gif')">
      <img src="http://codingforums.com/images/statusicon/thread.gif">
      <img src="http://codingforums.com/images/statusicon/thread_lock.gif">
      <img src="http://codingforums.com/images/statusicon/thread.gif">
    </span>
    </body>
    Oops!


  •  

    Posting Permissions

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