asked on

Rollover image to change image and also previous images php javascript

Hi. I am working on a rating system using php. I want to display outines of 5 stars and when someone rollsover the star, it gets filled in. I found some javascript code and adapted it. It works using 2 images and when you roll over the first image, it displays the second image. But what I really need for the images to the left of the current image to also change. For example, if I roll over the third star, the first and second stars should also change and look filled in.

Here's an image showing how it works right now if I rollover the third star. In this example I want the first, second and third stars to be filled in (display the second image), not just the third star.

Here's the code in the php program.

<table>
<tr><td>Always responsive</td>
 <td><a href="ratings_test2.php" onmouseover="buttondown('ratebutton1')" onmouseout="buttonup('ratebutton1')">
   <img src="ratings_star2.jpg" height='42' width='42' name="ratebutton1" border="0" /></a></td>

 <td><a href="ratings_test2.php" onmouseover="buttondown('ratebutton2')" onmouseout="buttonup('ratebutton2')">
   <img src="ratings_star2.jpg" height='42' width='42' name="ratebutton2" border="0" /></a></td>

 <td><a href="ratings_test2.php" onmouseover="buttondown('ratebutton3')" onmouseout="buttonup('ratebutton3')">
   <img src="ratings_star2.jpg" height='42' width='42' name="ratebutton3" border="0" /></a></td>

 <td><a href="ratings_test2.php" onmouseover="buttondown('ratebutton4')" onmouseout="buttonup('ratebutton4')">
   <img src="ratings_star2.jpg" height='42' width='42' name="ratebutton4" border="0" /></a></td>

 <td><a href="ratings_test2.php" onmouseover="buttondown('ratebutton5')" onmouseout="buttonup('ratebutton5')">
   <img src="ratings_star2.jpg" height='42' width='42' name="ratebutton5" border="0" /></a></td>
</tr>

</table>

Open in new window

Here's the javascript code located in the <head> section:

<script language="JavaScript" type="text/javascript">
<!--
if (document.images) {
    ratebutton1up       = new Image();
    ratebutton1up.src   = "ratings_star2.jpg" ;
    ratebutton1down     = new Image() ;
    ratebutton1down.src = "ratings_star.jpg" ;
}
if (document.images) {
    ratebutton2up       = new Image();
    ratebutton2up.src   = "ratings_star2.jpg" ;
    ratebutton2down     = new Image() ;
    ratebutton2down.src = "ratings_star.jpg" ;
}

if (document.images) {
    ratebutton3up       = new Image();
    ratebutton3up.src   = "ratings_star2.jpg" ;
    ratebutton3down     = new Image() ;
    ratebutton3down.src = "ratings_star.jpg" ;
}
if (document.images) {
    ratebutton4up       = new Image();
    ratebutton4up.src   = "ratings_star2.jpg" ;
    ratebutton4down     = new Image() ;
    ratebutton4down.src = "ratings_star.jpg" ;
}
if (document.images) {
    ratebutton5up       = new Image();
    ratebutton5up.src   = "ratings_star2.jpg" ;
    ratebutton5down     = new Image() ;
    ratebutton5down.src = "ratings_star.jpg" ;
}
function buttondown( buttonname )
{
    if (document.images) {
      document[ buttonname ].src = eval( buttonname + "down.src" );
    }
}
function buttonup ( buttonname )
{
    if (document.images) {
      document[ buttonname ].src = eval( buttonname + "up.src" );
    }
}
// -->
</script>

Open in new window

This code may not be great. Javascript is not one of my strong points.

Thanks for your help.
Alexis

Chris Stanyon

I've done something similar before, but using 1 image and jQuery to 'move' the position of the stars. The basic principle is to set a background image, and then move it's position according to whichever star you are hovering over.

//HTML
<div class="rating">
	<a href="1">1</a>
	<a href="2">2</a>
	<a href="3">3</a>
	<a href="4">4</a>
	<a href="5">5</a>
</div>

//CSS
	.rating { width: 110px; height:22px; overflow:hidden; background: url('rating.jpg') no-repeat right top; }
	.rating a { text-indent:-9999em; float:left; display:block; width: 22px; height: 22px; margin:0px; }

//jQuery
$(document).ready(function() {
	$('.rating a').hover(
		function(){
			//how far do we need to move the background-image
			distance = -110 + ($(this).html() * 22);
			$('.rating').css("background-position",distance + "px top");
		},
		function() {
			//on mouseOut, reset the background-image
			$('.rating').css("background-position","right top");
		}
	);
});

Open in new window

Hope it makes sense, but ask if not
rating.jpg

alexisbr

ASKER

Thanks, Chris. I think I understand what you wrote but I will have to try it. I am away from my desk today but will try later tonight.

Did you store how many stars were selected so you can put that into a database? That's why I wrote the code the way I did because when someone clicks on the star, I know how many and can get that value so I can load it into the database.

Thanks again.
Alexis

Chris Stanyon

Don't see anything in your code to grab the number of stars selected, so not really sure how you've coded it to send the info to the database. You can get the number of the stars clicked in several different ways.

In jQuery:

$('.rating a').click(function(e) {
e.preventDefault();
alert("Start Number: " + $(this).html());
}

In code, you could pass the value by the querystring. Just add it to your href and grab it at the other end.

<a href="ratings_test2.php?starNum=1">,
<a href="ratings_test2.php?starNum=2">,
<a href="ratings_test2.php?starNum=3"> etc

In ratings_test2.php, you can then get the value like so:

$starClicked = $_GET['starNum'];

SOLUTION

Lee Wadwell

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

alexisbr

ASKER

Thanks, lwadwell, I will check out your code.

Chris - yes, sorry, I didn't show that part of my code since my question was about the rollover of the images but I have a line very similar to what you did. The link brings the page back to itself and then uses GET to get the value clicked and then works its way down the page on a different path to the update part. Looks like yours is similar. I am unfamiliar with Jquery but your explanation is clear. I will test it out when I am back at my computer later on.

Alexis

SOLUTION

Ray Paseur

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

alexisbr

ASKER

Thank you all! Chris, I tried to get your example to work but I don't know where to put the jquery code. I read jquery.com but it says I have to download something. I am totally unfamiliar with jquery and don't know if I would have to upload code to the web server (godaddy) where I am working.

Lwadwell, your example worked perfectly and looks great. The star images are really nice. But my problem again is that it is javascript and I'm not sure what to change to be able to send the selected number of stars to the database.

ray_paseur, I read your article and it is awesome. The fact that it is in php is better for me. I tested the code and it works great. But my client wants stars and I'm not sure if he is okay with checkboxes. I still have to test out the additional info in the article about using star images but I hope I can get that to work and keep it in php. If the checkboxes are the star images (and not checkboxes), that would be okay for what I am doing.

I will keep testing and will keep you posted. I really appreciate your help.

Alexis

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Ray Paseur

You can use jQuery without putting anything on your web server. This is my "starter code" for most web pages:

<?php // RAY_html5.php
error_reporting(E_ALL);

// CREATE A VARIABLE FOR OUR HTML
$xyz = 'Hello World';

// CREATE OUR WEB PAGE IN HTML5 FORMAT
$htm = <<<HTML5
<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<title>HTML5 Page</title>
</head>
<body>
<p>$xyz</p>
</body>
</html>
HTML5;

// RENDER THE WEB PAGE
echo $htm;

Open in new window

Please see line 13. HTH, ~Ray

Lee Wadwell

Without knowing the broader set-up of the of the page and what else is involved it is hard to judge. Are you planning on 'form' based page submit and answer or looking at an AJAX based approach? Are there other values involved on the form etc. that is to be written to the database?
If I knew more about your solution I could have built towards it more ... as it was, I guess an AJAX approach and left a comment in the 'saveStars' function to help guide. If a page submit ... I would add code in the 'saveStars' function to set the value of hidden input so it would be accessible via a GET/POST on submit back in the PHP.

alexisbr

ASKER

lwadell, I didn't give all the info of what I was doing. I was trying to just ask the part I thought I didn't know and was going to apply my logic from that point forward. I am using a form to submit the number of stars selected by the person doing the rating. I unfortunately don't have the javascript skills to do too much advanced stuff in JS. I love your example and will try to work with it to understand it better.

Ray - thanks. As always, your examples are wonderful and helpful. I think I could get your way to work but Chris has shown an example with only a little JS and I can work with it from there.

Chris - thanks for the complete code. I had the jquery after the html on my page and I think that's why it didn't work. I got the css in the right place. This page will work perfectly for me and I think I understand it enough to make the additional changes I need.

I really appreciate all your help. I learned a lot from the different methods.

I will create a new question if I need more help.

THANKS!
Alexis

alexisbr

ASKER

3 awesome ways to accomplish what I needed. Thanks!