We help IT Professionals succeed at work.

Creating a clickable powerbar

kenabbott asked
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


Watch Question

Unlock this solution and get a sample of our free trial.
(No credit card required)


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" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<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()">


Michel PlungjanIT Expert
Top Expert 2009

// 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">
Michel PlungjanIT Expert
Top Expert 2009

Sorry - was what I posted not what you were looking for?
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a sample view!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.


Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.