Jump to content

[SOLVED] 5 star rating system


Trium918

Recommended Posts

I am having trouble getting this code to work properly. I really could use some

help with this. Thanks in advance!

 

The image is attached below.

 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Test</title>

<script type="text/javascript">
function redStr(id){
if(id == 1){
var bg = "-75px";
}
if(id == 2){
var bg = "-58px";
}
if(id == 3){
var bg = "-41px";
}
if(id == 4){
var bg = "-24px";
}
if(id == 5){
var bg = "4px";
}
document.getElementById('stars').style.backgroundPosition = bg;
}
function grey(){
document.getElementById('stars').style.backgroundPosition = '-98px';
}
</script>

<style type="text/css">
.stars{
display:block;
width: 98px;
background-image:url("stars.gif");
background-repeat:none;
height:32px;
background-position: -98px;
}
.str{
float:left;
width: 21px;
height:32px;
}
a{border: 1px solid;}
</style>
</head>

<body>
<div style="background-position: -98px 50%;" class="stars" id="stars">
<a href="http://" class="str" onmouseover="redStr('1');" onmouseout="grey();"></a>
<a href="http://" class="str" onmouseover="redStr('2');" onmouseout="grey();"></a>
<a href="http://" class="str" onmouseover="redStr('3');" onmouseout="grey();"></a>
<a href="http://" class="str" onmouseover="redStr('4');" onmouseout="grey();"></a>
<a href="http://" class="str" onmouseover="redStr('5');" onmouseout="grey();"></a>
</div>
</body>
</html>

 

[attachment deleted by admin]

Link to comment
https://forums.phpfreaks.com/topic/86592-solved-5-star-rating-system/
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.