Solved

how to display sprite image on web page

Posted on 2010-11-14
10
738 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
 

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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Suggested Solutions

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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.…
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …

759 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

Need Help in Real-Time?

Connect with top rated Experts

21 Experts available now in Live!

Get 1:1 Help Now