Abapo
Mood Uplifter
LEVEL 1
200 XP
5 Star Rating
This simple script will show you how to create 5 Star Rating in JavaScript. This can be useful to know the opinion of the audience or customer of the products or services. The 5 Star Rating is very common on the internet you can see this in any sites. You can insert this source code to your Ecommerce Website.
HTML Source Code
CSS Style
So what can you say about this work? Share your thoughts in the comment section below or email me at [email protected]. Practice Coding. Thank you very much.
Download
This simple script will show you how to create 5 Star Rating in JavaScript. This can be useful to know the opinion of the audience or customer of the products or services. The 5 Star Rating is very common on the internet you can see this in any sites. You can insert this source code to your Ecommerce Website.
HTML Source Code
- <div
id
=
"rateMe"
title
=
"Rate Me!"
>
- <a
onclick
=
"rateIt(this)"
id
=
"_1"
title
=
"Poor!"
onmouseover
=
"rating(this)"
onmouseout
=
"off(this)"
></
a
>
- <a
onclick
=
"rateIt(this)"
id
=
"_2"
title
=
"Not So Hot!"
onmouseover
=
"rating(this)"
onmouseout
=
"off(this)"
></
a
>
- <a
onclick
=
"rateIt(this)"
id
=
"_3"
title
=
"OK!"
onmouseover
=
"rating(this)"
onmouseout
=
"off(this)"
></
a
>
- <a
onclick
=
"rateIt(this)"
id
=
"_4"
title
=
"Efficient!"
onmouseover
=
"rating(this)"
onmouseout
=
"off(this)"
></
a
>
- <a
onclick
=
"rateIt(this)"
id
=
"_5"
title
=
"Very Efficient!"
onmouseover
=
"rating(this)"
onmouseout
=
"off(this)"
></
a
>
- </
div
>
- <span
id
=
"rateStatus"
></
span
>
- <span
id
=
"ratingSaved"
></
span
>
CSS Style
- #rateMe
{
- clear
:
both
;
- margin-top
:
100px
;
- }
- #rateMe
li{
- float
:
left
;
- list-style
:
none
;
- }
- #rateMe
li a:
hover
,
- #rateMe
.on{
- background
:
url
(
full-star.png
)
no-repeat
;
- }
- #rateMe
a{
- float
:
left
;
- background
:
url
(
empty-star.png
)
no-repeat
;
- width
:
50px
;
- height
:
50px
;
- }
- #rateStatus
{
- width
:
150px
;
- height
:
50px
;
- font
:
bold
20px
arial;
- color
:
red
;
- float
:
left
;
- clear
:
both
;
- margin-top
:
10px
;
- }
- #ratingSaved
{
- display
:
none
;
- }
- .saved{
- color
:
red
;
- }
So what can you say about this work? Share your thoughts in the comment section below or email me at [email protected]. Practice Coding. Thank you very much.
Download
You must upgrade your account or reply in the thread to view hidden text.