Creating a clickable powerbar

Posted on 2007-10-04
Last Modified: 2008-03-17

I need to create a powerbar type image on a php page.  It needs to work as follows:

1. The bar will consist of a number of sements, 4 for example.  When a user points at a segment it will change colour along with all segments to the left.  For example if the mouse hovers over segment 3, segments 1, 2 and 3 will change colour.  They will revert to the original colour when the mouse moves away.

2. If the user clicks on a segement, then the segment along with all to the left will permanetly change colour.

3. When the command button next associated with this is clicked the value of the clicked segement will be passed to a variable.

I'm sure there are a number of ways of doing this but what would be the most straightforward.

Many thanks


Question by:kenabbott
    LVL 5

    Accepted Solution

    Hi, Ken.
      This is a not easy, but complicated control... You need to develop it on poor HTML/JavaScript first. But then php will add logic there. Also, using php you will only add/edit/delete items from that bar.

    Author Comment

    I've started playing around with this by using onmouseover and onmouseout.  However when I add onclick it works to make the image change permanent but of course the onmouseout is then triggered which reverts the image back to the original.  How can I get around this.

    This is the code thus far...

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "">
    <html xmlns="">
    <script type="text/javascript">

    function KeepL1() {

    function KeepL2() {

    function SwapL1() {      

    function SwapL1Back() {

    function SwapL2() {      

    function SwapL2Back() {


    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    <img src="images/L1a.gif" width="24" height="24" name="L1" border="0" onclick="KeepL1()" onMouseOver="SwapL1()" onMouseOut="SwapL1Back()">

    <img src="images/L2a.gif" width="24" height="24" name="L2" border="0" onclick="KeepL1()" onMouseOver="SwapL2()" onMouseOut="SwapL2Back()">


    LVL 75

    Expert Comment

    by:Michel Plungjan
    // preload images
    star_on = new Image()
    star_off = new Image()

    saveImage=-1; // global variable
    maxImages=5; // ditto
    function swap(img,on) { // on is null if not passed
      imgSrc = "star_"+((on)?"on":"off")+".src"; // create "imgx_zz.src"
      for (i=img;i>saveImage;i--) document.images["img"+i].src=eval(imgSrc); // and execute
      return true; // allow the text in the status line
    function rateCall(img) {
      document.test.Rating.value = img;
      for (var i=img+1;i<=maxImages;i++) document.images["img"+i].src=star_off.src;  // reset greater
      saveImage=img; // and save where we are
      window.focus(); // remove the dotted lines
      return false; // cancel the link

    <form name="test">
    <a href="#" onClick="return rateCall(1)"
    onMouseOver="return swap(1,1)" onMouseOut="return swap(1)" ><img
    src="star_off.jpg" border="0" name="img1"></a>
    <a href="#" onClick="return rateCall(2)"
    onMouseOver="return swap(2,1)" onMouseOut="return swap(2)" ><img
    src="star_off.jpg" border="0" name="img2"></a>
    <a href="#" onClick="return rateCall(3)"
    onMouseOver="return swap(3,1)" onMouseOut="return swap(3)" ><img
    src="star_off.jpg" border="0" name="img3"></a>
    <a href="#" onClick="return rateCall(4)"
    onMouseOver="return swap(4,1)" onMouseOut="return swap(4)" ><img
    src="star_off.jpg" border="0" name="img4"></a>
    <a href="#" onClick="return rateCall(5)"
    onMouseOver="return swap(5,1)" onMouseOut="return swap(5)" ><img
    src="star_off.jpg" border="0" name="img5"></a>

    <input type="text" name = "Rating">
    LVL 75

    Expert Comment

    by:Michel Plungjan
    Sorry - was what I posted not what you were looking for?

    Featured Post

    Top 6 Sources for Identifying Threat Actor TTPs

    Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

    Join & Write a Comment

    Popularity Can Be Measured Sometimes we deal with questions of popularity, and we need a way to collect opinions from our clients.  This article shows a simple teaching example of how we might elect a favorite color by letting our clients vote for …
    Article by: DanRollins
    This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (, we'll extend the program by adding a depth-…
    The viewer will learn how to count occurrences of each item in an array.
    This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

    734 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

    Need Help in Real-Time?

    Connect with top rated Experts

    24 Experts available now in Live!

    Get 1:1 Help Now