Go Back   CodingForums.com > :: Client side development > JavaScript programming > Post a JavaScript
Reload this Page radioStateImages

Before you post, read our: Rules & Posting Guidelines

Reply
 
Thread Tools Rate Thread
Enjoy an ad free experience by logging in. Not a member yet? Register.
Old 06-20-2004, 11:05 AM   PM User | #1
neofibril
Regular Coder

 
Join Date: Jun 2004
Location: underground
Posts: 186
Thanks: 0
Thanked 0 Times in 0 Posts
neofibril is an unknown quantity at this point
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 03:53 PM..
neofibril is offline   Reply With Quote
Old 06-20-2004, 02:22 PM   PM User | #2
neofibril
Regular Coder

 
Join Date: Jun 2004
Location: underground
Posts: 186
Thanks: 0
Thanked 0 Times in 0 Posts
neofibril is an unknown quantity at this point
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 03:53 PM..
neofibril is offline   Reply With Quote
Old 06-21-2004, 08:41 AM   PM User | #3
neofibril
Regular Coder

 
Join Date: Jun 2004
Location: underground
Posts: 186
Thanks: 0
Thanked 0 Times in 0 Posts
neofibril is an unknown quantity at this point
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(pEl, evt, onSrc, offSrc) 
 {
   // 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,
               i = 0;

      // check for an 'on' image, and set its index as attribute value:
      while(i < ln && off.test(images[i].src))
        i++;
      if(i < 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 i = 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 10:48 AM.. Reason: added a var for repeating reference
neofibril is offline   Reply With Quote
Old 06-21-2004, 01:11 PM   PM User | #4
neofibril
Regular Coder

 
Join Date: Jun 2004
Location: underground
Posts: 186
Thanks: 0
Thanked 0 Times in 0 Posts
neofibril is an unknown quantity at this point
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!
neofibril is offline   Reply With Quote
Reply

Bookmarks

Jump To Top of Thread


« Previous Thread | Next Thread »
Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Forum Jump


All times are GMT +1. The time now is 11:31 AM.
Advertisement
Log in to turn off these ads.