Need some help with sprite images

Hello guys,

Maybe someone can help me...
I want to replace my img tags in my site with css image sprites.
The problem is that I only know how to do it with all images with same size, and my sprite image have lots of images with different sizes.

Can someone teach me?

I'm using a transparent png image with all my images there and I use this code in my css file:

.mainimg {
    background: url(/images/spritesheet.png);
    display: inline-block;
    margin-right: 0;
    position: relative;
    height: 160px;
    width: 40px;
}

PHP:

First I was thinking in using this code:

<span style="background-position: -132px -100px;" class="mainimg"></span>

PHP:

But than, I notice that I cant create a hyperlink right? Because I cant use href tag.

Than I thought in this one:

<a href="#" class="mainimg"></a>

PHP:

But where I put the background-position? Inside mainimg css too?

And how can I display another image with a different size? If the code already have the (height and width).

I know I can create many .mainimg, like .mainimg2, .mainimg3, etc...
But I dont want to have a big css file with lots of lines.
Is not possible to create new css lines only with the sizes? something like this:

.mainimg {
    background: url(/images/spritesheet.png);
    display: inline-block;
    margin-right: 0;
    position: relative;
}

PHP:

.image1 {
    height: 160px;
    width: 40px;
}

PHP:

.image2 {
    height: 101px;
    width: 27px;
}

PHP:

If yes, how do I need to put the code to show different images?

I thought that I was possible to use like this:

<a href="#" class="mainimg image1"></a>

PHP:

But is not working...

What Im doing wrong?

Please help!
Hope you can understand my explanation, and sorry for my poor english.

 

Well, you'll also need to have the background-position set in the separate classes - you should also try to not use "image1-100" - it's not really... well.
I would maybe try to use a classname that describes the content - if it's an email-icon, call it .email_icon or something like that. That's at least my preference, and makes it a lot easier to reuse code later.
While you can of course do this directly on the <a>-tag, you can have a <span>-tag inside an <a>-tag as well. However, remember that when you do it like this, if someone has images turned off, they won't see anything.

 

Hey again buddy

Thank you for your reply!!
Image1, etc... Was just an example, I'm not going to rename like that.

Ok so I need to have background-position in class too, between .mainimg { and } right?

Is not for icon images, is for bigger images.

Can you please give me an example about the best method to do this? The last code that I added in my first post will not work right? What's the best way?

Thanks once again

 

If the images are large enough to not really be "icons" are you sure they're presentation and not content?

Remember the determining factor for using <img> vs. background-image should be "Is the image content or presentation".

Though I don't think you're quite explaining what it is you are trying to accomplish with this. You mention hyperlinks, but a hyperlink to WHAT?

Remember, write your HTML as if presentational images don't exist, so if these are supposed to be links you should have had anchors AND text fallbacks written in LONG before you started playing with CSS sprites.

... well, unless you're working completely back-assward because some artist is under the delusion they are a "designer" went dicking around in Photoshop before semantic markup and a working layout was completed.