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

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.
rating stars
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
0
alexisbr
Asked:
alexisbr
  • 5
  • 3
  • 2
  • +1
3 Solutions
 
Chris StanyonCommented:
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
0
 
alexisbrAuthor Commented:
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
0
 
Chris StanyonCommented:
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'];
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
lwadwellCommented:
This is different method I worked up.
I implemented a memory effect so that it can be loaded with a pre-rated star level and resets back to that on mouse away.  The "memory" is updated on click.
It is not comprehensively tested or anything ... but it may (or may not) be useful to you.
Q-27858792.zip
0
 
alexisbrAuthor Commented:
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
0
 
alexisbrAuthor Commented:
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
0
 
Chris StanyonCommented:
Hi Alexis.

Here's a full working page. You don't really need to upload the jQuery library to your server, as it is advisable to use a CDN for it, such as Google. As to where to put it, jQuery is Javascript, so you follow the same conventions - below shows it inside a SCRIPT tag within the HEAD element, after you've loaded the jQuery library.

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

		<title>Chris Stanyon</title>

		<meta name="viewport" content="width=device-width; initial-scale=1.0" />
		
		<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
		<script type="text/javascript">
			$(document).ready(function() {
				//Create the Hover effect.
				$('.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");
					},
					function() {
						//on mouseOut, reset the background-image
						$('.rating').css("background-position","right");
					}
				);
				
				
				//specify what to do when a star is clicked.
				$('.rating a').click(function(e) {
					e.preventDefault();
					
					//here you could code an ajax call to your server
					alert("Star Clicked: " + $(this).html());
				});
			});
		</script>
		<style type="text/css">
			.rating { width: 110px; height:22px; background: url('rating.jpg') no-repeat right top; }
			.rating a { text-indent:-9999em; float:left; display:block; width: 22px; height: 22px; }
		</style>	
	</head>

	<body>
		<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>
	</body>
</html>

Open in new window

0
 
Ray PaseurCommented:
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
0
 
lwadwellCommented:
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.
0
 
alexisbrAuthor Commented:
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
0
 
alexisbrAuthor Commented:
3 awesome ways to accomplish what I needed.  Thanks!
0

Featured Post

Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

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