Solved

how to display sprite image on web page

Posted on 2010-11-14
10
741 Views
Last Modified: 2012-05-10
i found a nice sprite image, and id like to know how i can display the single sprite on a web page (see attached bmp image(sprite)

how does one do something like

[] Purple book
[] Coins
[] Yellow vile

css and or jquery is fine
i just dont understand how to display each section with words after it.

thank you in advance for any code or help you may provide

items1.bmp
0
Comment
Question by:Johnny
  • 4
  • 4
  • 2
10 Comments
 
LVL 18

Accepted Solution

by:
Sudaraka Wijesinghe earned 350 total points
ID: 34131103
Sprites are used as background images of an elements that has the dimention of the image (icon) you wish to display. So you will need HTML similar to this.
<div class="icon icon-purple-book"></div>
<div class="icon icon-coins"></div>
<div class="icon icon-yellow-vile"></div>

Open in new window


Then you position the icon into the view port of the element using the CSS
 
.icon{background-image:url(items1.bmp); width:50px; height:50px;}
.icon-purple-book{background-position:150px 200px;}
.icon-coins{background-position:150px 0;}
.icon-yellow-vile{background-position:200px 100px;}

Open in new window


(position ans size coordinates are approximate, you'll need to fine tune them)
0
 
LVL 14

Assisted Solution

by:ali_kayahan
ali_kayahan earned 150 total points
ID: 34131120
You should start saving your image as jpg or png , than ;

<style>
.ico{background:url(items1.jpg);}
.purpleBook{width:50px;height:50px;background-position:0px -50px}
</style>

<div class='ico purpleBook'></div>Purple Book

with css background-position property you can move your background image as you wish it takes two paremeters x coordinates as first and y as second.

and within same class just assign width and height values that only shows the item that you want.
0
 

Author Comment

by:Johnny
ID: 34131151
where does the cords start for 0,0 and where do they end, i cant get the grid to work for anything, it does display the info tho.
just cant get the images right
0
MIM Survival Guide for Service Desk Managers

Major incidents can send mastered service desk processes into disorder. Systems and tools produce the data needed to resolve these incidents, but your challenge is getting that information to the right people fast. Check out the Survival Guide and begin bringing order to chaos.

 

Author Comment

by:Johnny
ID: 34131159
0
 
LVL 18

Assisted Solution

by:Sudaraka Wijesinghe
Sudaraka Wijesinghe earned 350 total points
ID: 34131188
position 0,0 means top left corner of the image. in the css the format is background-position: left top;
For example for your purple book, it should be:
.icon-purple-book {background-position:104px -200px;}
0
 
LVL 14

Expert Comment

by:ali_kayahan
ID: 34131302
Pern whats your current issue it seems fine ?
0
 

Author Comment

by:Johnny
ID: 34131363
great i was able to map a few of the icons now i think i got it.

but how does one get the words to be on the right side at
http://dragonsworkshop.com/jquery/test_icons/index.php
the words are on the next line. how can i fix that please
0
 
LVL 18

Assisted Solution

by:Sudaraka Wijesinghe
Sudaraka Wijesinghe earned 350 total points
ID: 34131401
put your text into a DIV tag (or any block element you like). Float both icon and text left and clear right on text.

 
<div class="icon icon-purple-book"></div><div class="icon-text">purple-book</div>

Open in new window

.icon {
background-image:url("items1.bmp");
height:50px;
width:50px;
float:left;
}
.icon-text {
float:left;
clear:right;
}

Open in new window

0
 

Author Closing Comment

by:Johnny
ID: 34131888
thank you both so much
0
 
LVL 18

Expert Comment

by:Sudaraka Wijesinghe
ID: 34133726
Glad to help. Thanks for the points.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction JSON is an acronym for JavaScript Object Notation.  It is a text-string data transport mechanism, capable of representing simple or complex data structures in a consistent and easy-to-read manner.  Similar in concept to XML, but more e…
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question