• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 169
  • Last Modified:

Creating a clickable powerbar

Hi

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

Ken


0
kenabbott
Asked:
kenabbott
  • 2
1 Solution
 
-Thespian-Commented:
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.
0
 
kenabbottAuthor Commented:
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">
<head>
<script type="text/javascript">

function KeepL1() {
      document.L1.src="images/L1b.gif";      
}

function KeepL2() {
      document.L2.src="images/L2b.gif";       
}

function SwapL1() {      
  document.L1.src="images/L1b.gif";
}

function SwapL1Back() {
  document.L1.src="images/L1a.gif";
}

function SwapL2() {      
  document.L1.src="images/L1b.gif";
  document.L2.src="images/L2b.gif";
}

function SwapL2Back() {
      document.L1.src="images/L1a.gif";
      document.L2.src="images/L2a.gif";
}

</script>

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

<body>
 
<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()">

</body>
</html>


0
 
Michel PlungjanIT ExpertCommented:
<script>
// preload images
star_on = new Image()
star_on.src="star_on.jpg";
star_off = new Image()
star_off.src="star_off.jpg";

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
}
</script>

<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">
</form>
0
 
Michel PlungjanIT ExpertCommented:
Sorry - was what I posted not what you were looking for?
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now