addmarketing
asked on
Alpha Image loader repeat and top left
I'm trying to get a star rating script working using a png file the htc fix gives me error messages and doesn't do what I want it to do because it eliminates position and and makes it where nothing is click able not counting the JavaScript alert that comes up. So im attempting to use the alpha image loader but I cant get the background position to repeat or goto top left. Anyone try this yet? Or a css star rating script using a transparent png thats compat with ie6 might work as well.
<style type="text/css">
/* styles for the star rater */
.star-rating{
list-style:none;
margin: 0px;
padding:0px;
width: 150px;
height: 30px;
position: relative;
background-repeat: top left repeat-x;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/star_rating.png', enabled=true, sizingMethod='image');
/* background: url(images/star_rating.png) top left repeat-x; */
}
.star-rating li{
padding:0px;
margin:0px;
height:30px;
width: 30px;
/*\*/
float: left;
/* */
}
.star-rating li a{
display:block;
width:30px;
height: 30px;
line-height:30px;
text-decoration: none;
text-indent: -9000px;
z-index: 20;
position: absolute;
padding: 0px;
overflow:hidden;
}
.star-rating li a:hover{
background: url(images/star_rating.png) left center;
z-index: 2;
left: 0px;
border:none;
}
.star-rating a.one-star{
left: 0px;
}
.star-rating a.one-star:hover{
width:30px;
}
.star-rating a.two-stars{
left:30px;
}
.star-rating a.two-stars:hover{
width: 60px;
}
.star-rating a.three-stars{
left: 60px;
}
.star-rating a.three-stars:hover{
width: 90px;
}
.star-rating a.four-stars{
left: 90px;
}
.star-rating a.four-stars:hover{
width: 120px;
}
.star-rating a.five-stars{
left: 120px;
}
.star-rating a.five-stars:hover{
width: 150px;
}
.star-rating li.current-rating{
background: url(images/star_rating.png) left bottom;
position: absolute;
height: 30px;
display: block;
text-indent: -9000px;
z-index: 1;
}
/* remove halo effect in firefox */
a:active{
outline: none;
}
</style>
ASKER
I tried it and still no love :( I get image with 3 stars on it, the rest of the stars should hide underneath should hide and it should repeat x
.star-rating{
list-style:none;
margin: 0px;
padding:0px;
width: 150px;
height: 30px;
position: relative;
background-position: top left;
background-repeat: repeat-x;
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(
src='images/star_rating.png', enabled=true, sizingMethod='image');
/* background: url(images/star_rating.png) top left; */
}
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Open in new window