Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

how to display sprite image on web page

Posted on 2010-11-14
10
Medium Priority
?
746 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 1400 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 600 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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 18

Assisted Solution

by:Sudaraka Wijesinghe
Sudaraka Wijesinghe earned 1400 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 1400 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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.
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)
Suggested Courses

971 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