Using the star picture, level (ranking) it indicates
Level (ranking) the method of displaying is widely used at the number of stars as the method of expressing recommendation extent and interest extent etc.For example like below it is feeling.
| – Expressing level (ranking) at the number of stars |
When this kind of indication, are actualized by the fact that “it arranges five star pictures”, a little it is difficult. When the img element five is arranged, the HTML source becomes vague when and, level (ranking) we would like to modify value, unless src attribute value as much as of the necessary img element must be rewritten.
At actualizes just “picture one which arranges the star”
Then, preparing 1 “pictures where the star lines up 19” as follows, as description above it will try making the indication of star level actualize.
The star 19 is arranged in the above-mentioned picture. “Orange five” -> “gray five” -> “orange four” -> “orange with half 1 of the ash” -> 19 total has lined up into the order of “gray four”.
If among these stars, just five is made to indicate with the style seat, it can display to the star level 0~5 in 0.5 units.
Because with this picture, both orange gray maximum of five it is continual, minimum 0 maximum 5 can be displayed. All values which it can express are sort of the rough sketch.
image1is one、simple way to take advantage of style sheet
if you use a style sheet、image of the、can be displayed to extract only the portion of any。 as above、only1only one image to provide a、0～5values up to0.5freedom can be expressed in increments of。
HTMLthe、since you only need to specify the class name of the style sheet、imgsource can be easily seen in the much simpler than arranging the elements。 and、modifying the value is easier because you only need to change the name of the class。
this time、in this way「arranged at the stars1one image」from、like using style sheets々of values「star level（star）」we will introduce how to make a。
now、we will introduce how to write a concrete style sheet on the next page。
of any star5source to the style sheet to display the one >>
star19of the5to display only one「star level」represent the
was prepared earlier「the stars19s image naranco」is、star1is the width of one per15pxhave been made so that the。（including spaces15px）
or、on the display start position was adjusted as follows:、width75px（star5one minute）display only if you ask、like々star level（star）you can express the value of the。
from the left edge 0pxposition of the： star5.0 ， from the left edge150pxposition of the： star4.5
from the left edge15pxposition of the： star4.0 ， from the left edge165pxposition of the： star3.5
from the left edge30pxposition of the： star3.0 ， from the left edge180pxposition of the： star2.5
from the left edge45pxposition of the： star2.0 ， from the left edge195pxposition of the： star1.5
from the left edge60pxposition of the： star1.0 ， from the left edge210pxposition of the： star0.5
from the left edge75pxposition of the： star0.0
star19of the5style sheet to display only one
style sheet source to limit the scope display as described above、are as follows:。 （file name of the star image「starlevels.gif」you are。）
.starlevel5 { background-image: url(‘ starlevels.gif ‘); /*star image*/ background-repeat: no-repeat; /* no repeat */ width: 75px; /* width is a star５one minute */ height: 15px; /* height of the stars１one minute */ }.star50 { background-position: left top; }.star40 { background-position: -15px top; }.star30 { background-position: -30px top; }.star20 { background-position: -45px top; }.star10 { background-position: -60px top; }.star00 { background-position: -75px top; }.star45 { background-position: -150px top; }.star35 { background-position: -165px top; }.star25 { background-position: -180px top; }.star15 { background-position: -195px top; }.star05 { background-position: -210px top; }
■starlevel5class：
first「starlevel5」in the class、background image（background-image）you have specified a star image as。
does not need to repeat in a tiled、repetition of the background image（background-repeat）is「no（no-repeat）」you have specified a。
width（width）the stars5is one minute「75px」（＝15px×5individual）specify the、height（height）the stars1is one minute「15px」you have specified a。
■star50～star05class：
then、to determine the display position of the background image background-position that contains only the property9we enumerate the number of class。
background-positionthe value of the property、「display position from the left edge of the」and「from the top edge of the display position」of2you write two side-by-side。
※value「left」is that the leftmost「0px」same as。value「top」is that the top「0px」same as。
「star50」class「star５」，「star45」class「star4.5」
「star40」class「star４」，「star35」class「star3.5」
： ： ： ： ： ：
「star00」class「star０」，「star05」class「star0.5」
……represents the。
for example,、「star４」represents the star40the class、the value「-15px」you have specified a。 this is、the negative direction, the background image（left）to15this means that by shifting pixel display。 as a result、「from left15eye pixel」starting at「total75pixel」will be displayed、「orange color４one＋gray１one」can be displayed。
now、once you have a style sheet of the above、to display the actual starHTMLtry to describe the。 more、on the next page will introduce。
star5to display the oneHTMLto the source >>
star5to display oneHTMLsource
now、to display the actual starHTMLtry to describe the。
classyou only specify the class name using the attribute。the name of the class2please note that i specified at the same time one。
star5.0: <div class=”starlevel5 star50″></div> star4.0: <div class=”starlevel5 star40″></div> star3.0: <div class=”starlevel5 star30″></div> star2.0: <div class=”starlevel5 star20″></div> star1.0: <div class=”starlevel5 star10″></div> star0.0: <div class=”starlevel5 star00″></div> star4.5: <div class=”starlevel5 star45″></div> star3.5: <div class=”starlevel5 star35″></div> star2.5: <div class=”starlevel5 star25″></div> star1.5: <div class=”starlevel5 star15″></div> star0.5: <div class=”starlevel5 star05″></div>
2a single class name is specified, separated by a single space。
「starlevel5」you must specify a class。in addition to that、according to the number of stars to be displayed「star50」～「star00」please specify the class。
when you view the source of the above、looks like this:。
| ▲example of how to look in a browser。 if you want to see actually displayed in the browser, click here |
in this way、by merely changing the name of the class、the value of the star0.0～5.0you can specify up to freely。
the maximum value of the star5to the following
in the image being used here、up to the stars of the same color in a row5the two side by side。 so、star level can be expressed（star）the maximum value5the。 this means that、the maximum value4also3you can also。
for example,、as shown in the figure below3be displayed if you ask to extract star、「maximum value3」you can represent a level of star。
this is、source of the style sheet was prepared on the previous page「starlevel5」can be realized by simply rewrite the value of the class。 （star50～star00class、can be used as。）
the contents of a concrete description、on the next page will introduce。
star level（rank）the maximum value of5in addition to source >>
the maximum value of the star5style sheet to be less than
the maximum value of the star5style sheet is（starlevel5class）is、was the following sources:。simply rewrite the value based on the this、the maximum value5following can be。 （star50～star00class、can be used as is without having to modify。）
.starlevel 5 { background-image: url(‘starlevels.gif’); /* star image */ background-repeat: no-repeat; /* no repeat */ width: 75px ; /* width is a star ５one minute */ height: 15px; /* height of the stars１one minute */ }
the maximum value of the star4to the、written as follows:。
.starlevel 4 { background-image: url(‘starlevels.gif’); /* star image */ background-repeat: no-repeat; /* no repeat */ width: 60px ; /* width is a star ４one minute */ height: 15px; /* height of the stars１one minute */ }
the maximum value of the star3to the、written as follows:。
.starlevel 3 { background-image: url(‘starlevels.gif’); /* star image */ background-repeat: no-repeat; /* no repeat */ width: 45px ; /* width is a star ３one minute */ height: 15px; /* height of the stars１one minute */ }
fix point、only to shorten the width only。it’s that easy。
divided so that the name of the class、in the same page「maximum value5star level of」and「maximum value3star level of」is available at the same time。
the maximum value of the star5when belowHTML
HTMLwriting also、is the same as the previous example。
created above「starlevel4」or「starlevel3」classes and、specify the actual value「star50」～「star00」of class2to specify them at the same time。
■maximum value3if the：
star3.0: <div class=”starlevel 3 star30″></div> star2.0: <div class=”starlevel 3 star20″></div> star1.0: <div class=”starlevel 3 star10″></div> star0.0: <div class=”starlevel 3 star00″></div> star2.5: <div class=”starlevel 3 star25″></div> star1.5: <div class=”starlevel 3 star15″></div> star0.5: <div class=”starlevel 3 star05″></div>
■maximum value4if the：
star4.0: <div class=”starlevel 4 star40″></div> star3.0: <div class=”starlevel 4 star30″></div> star2.0: <div class=”starlevel 4 star20″></div> star1.0: <div class=”starlevel 4 star10″></div> star0.0: <div class=”starlevel 4 star00″></div> star3.5: <div class=”starlevel 4 star35″></div> star2.5: <div class=”starlevel 4 star25″></div> star1.5: <div class=”starlevel 4 star15″></div> star0.5: <div class=”starlevel 4 star05″></div>
when you display the source of the above、looks like this:。
| ▲example of how to look in a browser。 if you want to see actually displayed in the browser, click here |
it should be noted、the maximum value of the star6if you want to the above、you need to change the star image itself。 for example, the maximum value10if you want to is、least the stars of the same color in a row10you must create an image that each side by side。 depending on the number of desired、please try to make a picture。
conclusion
this time、the stars are lined up image1only one to provide、like々star level of values（star）we show you how to make freely。
the star image1one1than one published、HTMLis recommended because it is simple and easy to read source。travel、please use。
it should be noted、star image was used in this article（following）is、you can safely use it at me feel free to copy if necessary。
Category: It – Hardware & Software • Author: • Views: 0
Latest Posts
-
『the EYE2』＜demons aim to fetus＞＋『the EYE3』
Category: Leisure – Hobbies & Entertainment Views: 0'You looked at the evil spirit >> which aims for the the EYE2<< fetus' Genius pan burazasu sends, “the most fearful fear 3 section works - - finally in the world” completion It does not end this fear, yet,… 'The evil spirit which aims for the the EYE2' n/a [you see, ogre 2] tomu cruise acquires rimeiku right, the blind fear 'the EYE where the Hollywood edition due to Nakata Kazuo director and reni [zeruuiga] starring is in the midst of producing'.From that 4 years, 3.. Continue Reading
-
now、lower east side hot wax！ latest editionLESshopping guide
Category: Lifestyle – Fashion & Jewelry Views: 0Composition: Ichikawa Akiko (All About “NY fashion communication” old guide) <br /> The fashion of NY, as for movement of culture scene to east, to east! norita, and now, finally from the saw hoe most Higasibata's LES (Lower East Side) arrival! From the high fashion which sereburitei and the industry person is observed, to the line to which the young designer and the artist of sukebo & graffiti kids business street fashion, and rise & coming propose.The large-sized hotel, also ope.. Continue Reading
-
pay attention to japanese english easily confused！（the input line）
Category: Commercial - Business & Economics Views: 0Harmony make English correct English (a, mosquito, sa, ta, na, ha, ma, ya, ra and wa line) Aiueo kakikukeko sashisuseso tachitsuteto naninuneno hahihu To ho mamimumemo yayuyo rarirurero wa ko Copy Coffee mil Co-op lath Finish Call ten Prime time Golden time Cone beef Coin laundry Coin rocker Cost increase C.. Continue Reading
-
how a dose of green tea in the plaza de españa？
Category: Holiday & Tourism – Travel Views: 0Good place known to few people coffee & shop of the Spanish open space neighborhood While there being on a center of the town, with the quiet alleyway reverse side the tea… The recent Italian person stands with the bar/var and drinks and the just espresso! Eye of according to of burandosutorito [kondotsutei] and ahead nose. Just opened good place known to few people coffee “THE VERDE” (the vuerude) is topic on the alleyway reverse side of the stone pavement. Sitting down slowly, .. Continue Reading
-
2006year bottom line！german1look back a year
Category: Holiday & Tourism – Travel Views: 0Also 2006 remains, the rear little.This time, you try to try looking back at the occurrence topic and the like which to these 1 years happens in Germany.When current German circumstance is known a little, while travelling even, the country, Germany, is not to be moved by more familiarly, probably will be? January where the heavy snow, and skating rink collapse accident occurred New Year early, trembling in Germany on January 2nd it was the accident where the ice skating rink collapses.As fo.. Continue Reading
-
went to meeting sake and shochu evaluated in light of！
Category: Leisure – Hobbies & Entertainment Views: 1It went to Tokyo national tax bureau Everyone serious expression. Always, discrimination/reference judgment of the liquor meeting, that it probably is what thing what, it had interest.Some person, in some wind discrimination/reference commenting?Originally the discrimination/reference judgment tsu [te] just it is no what? teisuteingu being different? With what gold prize silver prize and ranking you attach? With you thought in this doubt of that. It received the question fish invit.. Continue Reading
-
yokohama petersburg13 sakuragi-cho station birth to large cinema complex
Category: Holiday & Tourism – Travel Views: 0Before the Yokohama buruku 13──JR cherry tree wooden town station extra large size shinekon birth You see as TOC everyone, appearance of the leprosy.Undisguised external wall impressive! 2010 March 19th (the gold), before the Yokohama cherry tree wooden town station the compound commercial facility “you see as TOC everyone and the leprosy” opens.Shopping town “koretsutomare” and hotel “new Otani in Yokohama”, “you see as everyone and leprosy fitness club Begin”, large-sized shinekon “Yokoha.. Continue Reading
-
income deduction―what other deductions？
Category: Finance – Stock Market And Stock Markets Views: 0'Prime Minister Koizumi “, current income tax deduction being many, is too complicated.Being able to point clearly, it did again to see it was drastically and” with expressed, it stated the desire which is strong in the substantial reduction of human deduction such as deduction for a spouse.' (The japanese economic newspaper January 25 date) The social premium where, burden such as health insurance charge and public welfare national pension premium nursing premium steadily becomes heavy.Also v.. Continue Reading
-
『1976antonio inoki of the year』himotoku the（3）
Category: Leisure – Hobbies & Entertainment Views: 0'antonio Inoki' author willow sawa health interview 1976 - Well -, finally it enters into this subject, in the point that, but our fans “real fighting spirit were convinced professional wrestling”, with the meaning which arrives to antonio Inoki the shank. “The foreign country is easy to understand, is.As for comprehensive case competition of real fighting spirit, there being a Gray sea, UFC coming out, that is continued soon directly.But the history where very that is correct with in .. Continue Reading
-
continue to norika！shortcut of happiness“switch marriage”
Category: Relationships Views: 0In 35 years old in “man of destiny” as for encounter sea urchin? To 35 years old, photo essay collection of the period Kaori which it goes round with cute him and meets.It thoroughly contains from fashion to method of living. The place where it arrives after all is area what of living in peace, n/a For 30 women, Fujiwara period Kaori which is the same generation star which gathers yearning and sympathizing.Presently, hearing the story of romantic love of the period Kaori which has .. Continue Reading
-
director of the condo association board today is very!!
Category: Home – Garden & Home Improvement Views: 0Difficult problem going away and difficult problem The home which releases the car with deterioration of business increases, influence has reached to also apartment management Well, apartment management union director activity is in the midst of phase not changing continuing, but various troublesome matters are everyday life of full load. Some days ago it touched, it is paid safely concerning administrative expense nonpayment problem, and as for present condition although it was improved,.. Continue Reading
-
beads recipe：cherry necklace
Category: Leisure – Hobbies & Entertainment Views: 0Spring it seems, the perfect score! Set of the cherry tree where also kokoro dances The czechoslovakia beads of heart were used, the flower of the cherry tree was expressed.The expectation n/a where everyone who encounters your form which Ouka's beauty which outblooms the ma is taken, is fascinated! * When the terminology which does not understand in the article comes out, beads basic glossary Because method of making the flower of the basis is the same, attaching to the body by all m.. Continue Reading
-
tips for a successful reform stairs
Category: Home – Garden & Home Improvement Views: 0The stairway reform which raises interior characteristic and safety will be done.The kind stairway material, the point which succeeds, stairway reform such as the device which makes the foot bright and the secret which is made safer stairway is introduced in the body. Stairway reform It is born with the built-up beam and changes! Choosing the material which it does not slide softly If stairway reform uses the stairway material for reform, it can make unexpected and simple.Because with the .. Continue Reading
-
lavender tea to relieve stress
Category: Health – Medical & Surgical Views: 0The lavender, in the elegant fragrance like your lady, just “queen of the herb”.You heal the stress of the mind and body with the component of the fragrance, relax.Exactly the ice tea will be introduced in the insect muggy day.。 * * INDEX * * -1 - be anti-bacterial quiet action in the aromatic component and n/a the male be completed in muggy day the ice lavender tea Even at the time of the Plague popularity queen of the herb which participated When the Plague large becoming popula.. Continue Reading
-
personal funds、workaround if you have a small down payment
Category: Finance – Stock Market And Stock Markets Views: 0Under 2 tenths of object price you cannot buy down payment truly?! Although the desired object was found, house is not enough, down payment are only 2 tenths or less.How it will do! When house is 6,000,000 Yen, as for house if object price 3 you think with seori which is said extremely, as for the object which can be purchased it reaches 2,000 ten thousand Yen.If it is the studio apartment for one person living, perhaps you can search the object which can be purchased in this budget.. Continue Reading
-
full of mistakes401koperational orders
Category: Finance – Stock Market And Stock Markets Views: 0The data of operational circumstance of the decision contribution annuity employee several of everybody you call in the major electrical machinery and appliances manufacturer was procured.In every age, it invests in some property that, it is to be clear, but honesty saying, you were surprised. Because, to be wrong, therefore you are lazy and are. The most person selecting capital guaranty type Property breakdown of classified by 401k age of a certain big business.As for insurance an.. Continue Reading
-
tips & tricks of making lunch
Category: Family Views: 1“The eye which tasty was seen quickly to be good” with the lunch making which is pleasant! You do not insert power, are efficient, would like to make the lunch making of everyday life, tastily.Secret and the reverse side skill which make your such a lunch “the eye which was seen quickly tastily dividing into three themes well,” we introduce! 1. It makes quickly The food of setting by the fact that it cuts in the small awakening, adjusts heating time For example the method whi.. Continue Reading
-
bowel habits constipation and hemorrhoids not be correct
Category: Health – Medical & Surgical Views: 13 people as for difference experience of that “hemorrhoids” are also are called to 4 people of the how Japanese.Unless so, the constipation and the hemorrhoids, to tell the truth 'even the life habit illness' are said, improve the life of everyday life, you cannot anticipate improvement easily. You speak concerning the correct defecation habit this time without of becoming the hemorrhoids and the constipation. * Correct defecation habit 8 provision 1. Forging the abdominal muscles, it ma.. Continue Reading
-
to taxation of corporate pension assets is time to abolish rather than frozen
Category: Finance – Stock Market And Stock Markets Views: 0Problem of special income tax in climax Tax system amendment produces big effect on each direction.Doing, it is translated into action e.g., the policy is shown on end of year of every year, next year corrects law at ordinary diet session. This year immediately before policy of tax system amendment is shown, we have become, it seems that the various tugs of war are done. There is handling the special income tax which is bet on private enterprise's annuity among those one as the item which.. Continue Reading
-
Wverge cup！ ano figure something anxious
Category: Commercial - Business & Economics Views: 0This year 18th time.In the history, surprise! natsukashi! The number so n/a You start the 1st tournament of the German conference first day, in the Bayern provincial capital and Munich which runs name as an Olympic opening area of 72 years! Photograph offer: And you imitate, this story - Germany & Munich Long in coming ze! 4 years.To ano day, finally 24 days after! anata of the soccer favorite human and anata which usually the sport column of the newspaper is not seen, 100,000,00.. Continue Reading