Solved

how to display sprite image on web page

Posted on 2010-11-14
10
743 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
Report: Liquid Web beats Amazon, Rackspace & More

A study by performance analyst firm Cloud Spectator finds that Liquid Web beats rivals Amazon, Rackspace and DigitalOcean when it comes to website and cloud application performance.

 

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: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

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

Title # Comments Views Activity
Call a VB.net function in Javascript 6 51
Wordpress Responsive Web design and iPads 11 39
change site header 8 31
jQuery Tree with Draggable items 11 22
Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
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 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 decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

739 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