Solved

how to display sprite image on web page

Posted on 2010-11-14
10
744 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Linux Academy Android App Now Supports Chromecast

We have some fantastic news for our Android fans. We’re so excited to announce that the Linux Academy Android app is now available with Chromecast support. That’s right – simply download the latest update of the Linux Academy App and start casting your favorite course videos!

 
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

A new era in Cloud training has arrived.

A day that will go down in Cloud history.. But are you ready for it? Will you accept this Cloud challenge?

Question has a verified solution.

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

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article discusses how to implement server side field validation and display customized error messages to the client.
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 …
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
Suggested Courses

617 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