/    Sign up×
Community /Pin to ProfileBookmark

unobtrusive rollovers

Copy linkTweet thisAlerts:
Nov 17.2006

I want users to be able to select a rating for a media object on my site by clicking on 1-5 stars. The trick is i want every star up to the one on mouseover to highlight. So if they’re holding the cursor over star 4, then stars 1, 2 and 3 are also highlighted. The stars are currently set up like so…

[code]<table id=”rating”>
<tr>
<td><a href=”link”></a></td>
<td><a href=”link”></a></td>
<td><a href=”link”></a></td>
<td><a href=”link”></a></td>
<td><a href=”link”></a></td>
</tr>
</table>[/code]

there is already a mouseover set for each star (by moving the position of the background image) so my js will only have to affect the stars previous to it…here’s the function i’m trying to use to make this happen, but it’s not working (not throwing any errors either??) BTW, “$” is a shortcut for document.getElementById…

[code] if($(‘rating’)) {
var stars=$(‘rating’).getElementsByTagName(‘A’);
for(var x=0; x<stars.length; x++) {
if(x>0) {
stars[x].onmouseover=function() {
for(var i=x; i<x; i–) {
alert(‘on’);
stars[i].style.backgroundPosition=’0 -17px’;
}
}
stars[x].onmouseout=function() {
for(var i=x; i<x; i–) {
alert(‘off’);
stars[i].style.backgroundPosition=’0 0′;
}
}
}
}
}[/code]

to post a comment
JavaScript

12 Comments(s) ↴

Copy linkTweet thisAlerts:
@mjdamatoNov 17.2006 — I'd suggest using a single image for all 5 stars and using an image map with links for 1-5. Then you just need to replace a single image no matter what star the person mouses over.
Copy linkTweet thisAlerts:
@bcamp1973authorNov 17.2006 — can't, the code is generated by a clunky CMS and this is the only way to handle it ?
Copy linkTweet thisAlerts:
@JMRKERNov 17.2006 — Can you use this?
[code=php]
<html>
<head>
<title>Stars</title>
<style type="text/css">
.star { font-size:medium; }
</style>
<script type="text/javascript">
function ShowStar(starid) {
var sno = starid.charAt(1);
var sid = '';
for (var i=0; i<=5; i++) { sid = 's'+i; document.getElementById(sid).style.fontSize='medium'; }

for (var i=0; i<=sno; i++) {
sid = 's'+i;
document.getElementById(sid).style.fontSize='xx-large';
}

}
function RegStar(starid) {
// var sno = starid.charAt(1);
if (document.getElementById(starid).style.fontSize == "xx-large") {
document.getElementById(starid).style.fontSize='medium';
}

}

</script>
</head>
<body>
<h2>Star selection</h2>
<span id="s0" class="star" onMouseOver="ShowStar(this.id)" onMouseOut="RegStar(this.id)"> &nbsp;&nbsp; </span>
<span id="s1" class="star" onMouseOver="ShowStar(this.id)"> &nbsp;*&nbsp; </span>
<span id="s2" class="star" onMouseOver="ShowStar(this.id)"> &nbsp;*&nbsp; </span>
<span id="s3" class="star" onMouseOver="ShowStar(this.id)"> &nbsp;*&nbsp; </span>
<span id="s4" class="star" onMouseOver="ShowStar(this.id)"> &nbsp;*&nbsp; </span>
<span id="s5" class="star" onMouseOver="ShowStar(this.id)"> &nbsp;*&nbsp; </span>
</body>
</html>
[/code]
Replace text '*' with images and modify size of <span> (or possibly <div>) tags instead of using fontSize CSS style tag.
Copy linkTweet thisAlerts:
@bcamp1973authorNov 17.2006 — i wish i could. i've been given the instructions "make this work as is" ?
Copy linkTweet thisAlerts:
@mjdamatoNov 17.2006 — Ok, I found a solution. I'm not sure what you are specifically doing with the "background" image, but I tested this by replacing the images in the hyperlink using innerHTML and got it to work. It works exactly like it does on netflix.

<i>
</i>if(document.getElementById('rating')) {
var stars=document.getElementById('rating').getElementsByTagName('A');
for(var x=0; x&lt;stars.length; x++) {

<i> </i> //Give each A element an id
<i> </i> stars[x].id = "star"+x;

<i> </i> //Specify an onmouseover function for each A element
<i> </i> stars[x].onmouseover = function() {
<i> </i> //Get the id number of the A element
<i> </i> idNum = this.id.substr(4);
<i> </i> //step through each element and replace images accordingly
<i> </i> for(i=0; i&lt;stars.length; i++) {
<i> </i> if (i&lt;=idNum) {
<i> </i> stars[i].innerHTML = '&lt;img src="images/on.jpg"&gt;';
<i> </i> } else {
<i> </i> stars[i].innerHTML = '&lt;img src="images/off.jpg"&gt;';
<i> </i> }

<i> </i> }
<i> </i> }
<i> </i>}
}
Copy linkTweet thisAlerts:
@bcamp1973authorNov 17.2006 — Yes! thank you! been staring at this way too long ? Here it is with a tiny change to make it work with my background image...

// Set rating stars mouseover
if($('rating')) {
var stars=$('rating').getElementsByTagName('A');
for(var x=0; x&lt;stars.length; x++) {
stars[x].id="star"+x;
stars[x].onmouseover=function() {
idNum=this.id.substr(4);
for(i=0; i&lt;stars.length; i++) {
if(i&lt;=idNum) {
stars[i].style.backgroundPosition='0 -17px';
} else {
stars[i].style.backgroundPosition='0 0';
}
}
}
}
}

Thanks mjdamato!
Copy linkTweet thisAlerts:
@bcamp1973authorNov 17.2006 — argh!!! My hatred for Micro$lop Internet Exploder grows daily...this doesn't work in IE 6 (either with the background image or using innerHTML)...but it works fine in FF and Safari
Copy linkTweet thisAlerts:
@mjdamatoNov 18.2006 — I tested it in IE6 and it worked perfectly. Must be something else in the code.

Here is my entire page. All you need to do is ensure that the images exist at the right locations and it should work for you in IE.

[code=html]<html>
<head></head>

<body>
<table id="rating">
<tr>
<td><a href="link"><img src="images/off.jpg"></a></td>
<td><a href="link"><img src="images/off.jpg"></a></td>
<td><a href="link"><img src="images/off.jpg"></a></td>
<td><a href="link"><img src="images/off.jpg"></a></td>
<td><a href="link"><img src="images/off.jpg"></a></td>
</tr>
</table>

<script>

if (stars=document.getElementById('rating').getElementsByTagName('A')) {
for(var x=0; x<stars.length; x++) {

//Give each A element an id
stars[x].id = "star"+x;

//Specify an onmouseover function for each A element
stars[x].onmouseover = function() {
//Get the id number of the A element
idNum = this.id.substr(4);
//step through each element and replace images accordingly
for(i=0; i<stars.length; i++) {
if (i<=idNum) { stars[i].innerHTML = '<img src="images/on.jpg">'; }
else { stars[i].innerHTML = '<img src="images/off.jpg">'; }

}
}
}
}

</script>
</body>
</html>[/code]
Copy linkTweet thisAlerts:
@Arty_EffemNov 18.2006 —  it's not working (not throwing any errors either??)

if($('rating')) {
var stars=$('rating').getElementsByTagName('A');
for(var x=0; x&lt;stars.length; x++) {
if(x&gt;0) {
stars[x].onmouseover=function() {
[COLOR=Red][B]for(var i=x; i&lt;x; i--)[/B][/COLOR] {
alert('on');
stars[i].style.backgroundPosition='0 -17px';
}
}
stars[x].onmouseout=function() {
[B][COLOR=Red]for(var i=x; i&lt;x; i--)[/COLOR][/B] {
alert('off');
stars[i].style.backgroundPosition='0 0';
}
}
}
}
}[/QUOTE]Think about it...
Copy linkTweet thisAlerts:
@bcamp1973authorNov 20.2006 — I tested it in IE6 and it worked perfectly. Must be something else in the code.

Here is my entire page. All you need to do is ensure that the images exist at the right locations and it should work for you in IE....[/QUOTE]


Ok, this is odd (and getting annoying)...i've tested your code exactly as you have it but switching out the image path etc to work in my environment and it still doesn't work in IE. I get errors on the following line...

if(stars=document.getElementById('rating').getElementsByTagName('A')) {...

...so i added "var"...

if(var stars=document.getElementById('rating').getElementsByTagName('A')) {...

...still didn't work, so i tried changing to this...

if(document.getElementById('rating')) {
var stars=document.getElementById('rating').getElementsByTagName('A');...

...and that works in safari/firefox again, but still doesn't work in IE...
Copy linkTweet thisAlerts:
@mjdamatoNov 20.2006 — Have tried just using my code in a page by itself? I'm thinking there is some other js on your page that might be conflicting (e.g. variable names used twice, etc.).
Copy linkTweet thisAlerts:
@bcamp1973authorNov 21.2006 — ugh...you're right...i tried putting it on it's own page and it works like a dream...of course nothing is giving me an error so i'm going to have to crawl through this line by line. Thanks for your help!
×

Success!

Help @bcamp1973 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.19,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...