[Okta Webinar] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Pseudo tri-state checkbox

Posted on 2006-05-08
11
Medium Priority
?
353 Views
Last Modified: 2008-02-01
Using code similar to this:  http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_21842812.html

How would I go about making a tri-state checkbox using these images:  http://rerendered.beapit.com/test.asp
0
Comment
Question by:lpenrod
  • 5
  • 3
  • 2
  • +1
11 Comments
 
LVL 3

Author Comment

by:lpenrod
ID: 16635184
I could pass the pseudo checkbox data via a hidden text input.
0
 
LVL 15

Expert Comment

by:Thogek
ID: 16635209
According to your original question, something along the following lines might help:

    var ImagesOff = Array("imageA.gif", "imageC.gif", "imageE.gif", "imageG.gif");
    var ImagesOn  = Array("imageB.gif", "imageD.gif", "imageF.gif", "imageH.gif");
    var imageRotation = 0;

    function RotateImage()
    {
        imageRotation += 1;
    }
    function GetMouseOverImage()
    {
        return ImagesOff[imageRotation % ImagesOn.length];
    }
    function GetMouseOutImage()
    {
        return ImagesOff[imageRotation % ImagesOff.length];
    }

    ...

    <img id="myImage" onmouseover="GetMouseOverImage();" onmouseout="GetMouseOutImage();" onclick="RotateImage();" />

where ImagesOff and ImagesOn can be modified to any number of image names, as needed.
0
 
LVL 17

Expert Comment

by:Cem Türk
ID: 16635221
<html>
<head>
<script type="text/javascript">
var curState="neither";
function chState(im) {

 switch(curState) {
          case "neither": {curState="unchecked"; }
case "unchecked": {curState="checked"; }
case "checked": {curState="neither"; }
          break;
     }
 im.src=curState + ".jpg";
}
</script>
</head>
<body>
<img src="neither.jpg" onclick="chState">
</body></html>
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 19

Accepted Solution

by:
dakyd earned 2000 total points
ID: 16635274
<no points for me>
I was thinking the same thing as Thogek, though I noticed that the difference between the "over" image and the "regular" image is basically just "_glow".  So, you can actually cut it down to a single array rather than two.  It's slightly more efficient (and elegant, if I do say so myself), but in this case it shouldn't matter since you've got a small array to begin with.  Either way, hope it helps.

<html>
<head>
<script type="text/javascript">
var currentState = 0;

var states = new Array("/images/neither.gif", "/images/checked.gif", "/images/unchecked.gif");

function dosomething(obj)
{
  currentState = (currentState + 1) % states.length;
  obj.src = states[currentState];
}

function getSrc(mode)
{
  var srcStr = "";
  if (mode == "out")
    srcStr = states[currentState];
  else
    srcStr = states[currentState].replace(/\.gif$/, "_glow.gif");
  return srcStr;
}
</script>
</head>

<body>
<img src="imageA.gif" onmouseover="this.src=getSrc('over');" onmouseout="this.src=getSrc('out');"
onclick="dosomething(this);">
</body>
</html>
0
 
LVL 3

Author Comment

by:lpenrod
ID: 16635393
Thogek: http://rerendered.beapit.com/test.asp  Did I do something wrong?

cem_turk: http://rerendered.beapit.com/test2.asp  Did I do something wrong?

dakyd: http://rerendered.beapit.com/test2.asp  The page opens with a missing image.  As soon as you mouse over it, it works great!
Can I use this with any number of checkboxes?
0
 
LVL 3

Author Comment

by:lpenrod
ID: 16635400
Nevermind dakyd, I just noticed the image name...
0
 
LVL 3

Author Comment

by:lpenrod
ID: 16635413
If no objections, I will give the points to dakyd.

I need to extend this question a little further.

I will post a new question and then post the link here.
0
 
LVL 17

Expert Comment

by:Cem Türk
ID: 16635427
<img src="neither.jpg" onclick="chState">

should be

<img src="neither.jpg" onclick="chState(this)">
0
 
LVL 17

Expert Comment

by:Cem Türk
ID: 16635430
no objections...
0
 
LVL 3

Author Comment

by:lpenrod
ID: 16635438
Here is the new question: http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_21842878.html

Come on dakyd, your on a roll!
0
 
LVL 19

Expert Comment

by:dakyd
ID: 16636364
Sorry, you caught me as I was headed out the door.  I posted in your other question for the modifications - let me know if you're having trouble.
0

Featured Post

Upgrade your Question Security!

Add Premium security features to your question to ensure its privacy or anonymity. Learn more about your ability to control Question Security today.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

873 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question