PDA

View Full Version : radioStateImages

neofibril
06-20-2004, 12:05 PM
Here's something I've been playing with:
Join in the fun. :p

<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>
neofibril
06-20-2004, 03:22 PM
Well, now that I think:
it does no good to hard-code those images... :D

<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>
neofibril
06-21-2004, 09:41 AM
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:
<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:
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.
neofibril
06-21-2004, 02:11 PM
All of that attribute stuff is probably unnecessary...
<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! :D