Understanding how to use image sprites

HTML & CSS
1

I’ve heard of this method, and was recommended to use this once, but I’ve never tried it before.

Does this only work on hover/mouseover?

Would this work on, on mouse click?

So, I would be putting this image into an image sprite, but how does that work?
https://i.imgur.com/yNVkI3W.png

Or would I be using something like these?

260×519 5.28 KB

2

Hi @asasass maybe a bit of reading on the topic would help: https://css-tricks.com/css-sprites/
Mind you with the advent of HTTP2, sprites will be a thing of the past and I wouldn’t bother. They are very tedious and hard work to maintain and somewhat limiting!

3

I want to learn and understand how it’s implemented.

4

Maybe by the time you do it won’t even be that useful:

5

You can start to learn by following the link in post #2.

2 Likes
6

I don’t know these.
http1
http2

I know these
http
https

7

In it’s simplest form the sprite image is styled as a background image on the anchor.
Then the background position of the sprite changes on hover, focus, active, mouseover.

Then there are some methods that allow for Replacement Text in the event that the user has images turned off or style sheets turned off.

Here is an example of the later using the vertical stacked sprite image you posted.


<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sprite Nav with Replacement Text</title>
<style>
.sprite {
    width:260px;
    height:260px;
    overflow:hidden;/*hide half of the 520px tall span*/
    position:relative;
}
.sprite a {
    display:block;
    height:260px;
    text-decoration:none;
}
.sprite span {
    position:absolute;
    top:0;left:0;
    width:260px;
    height:520px;
    font-size:0;
    background:url(https://i.imgur.com/XvKdH2Y.png) no-repeat;
}
.sprite a:active span,
.sprite a:focus span,
.sprite a:hover span {
    margin-top:-260px;
}

</style>
</head>
<body>

<h1>Sprite Image with Replacement Text</h1>

<div class="sprite">
    <a href="#">Replacement Text<span></span></a>
</div>

</body>
</html>
1 Like
8

Can that be implemented in this code?

Does it only work with hover?

What about, onmouseclick?

9

I’m sure it would.
You would need to get the js to do the styling that makes the sprite work

In the example I just posted, your js would need to do this on mousover…


.sprite a span {
    margin-top:-260px;
}

But why would js be needed for such a simple task that css can do?

10

Adding linear-gradient to:
.playButtonb.active {

Sprites:

So it looks like this:

How would I add this:

   background-image: linear-gradient( to right, transparent, transparent 83px, #e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px, transparent 260px);
 }

To:
.playButtonb.active {

11

I was told to do this, but I don’t understand it.

What you have to do is have multiple divs inside

And position it so it stretches end to end inside of the container

12

Is there any reason why you’re not asking the question of whoever gave you that advice?

2 Likes
13

He’s busy right now.

14

Why do you need to use an image here and not just a background colour?

15

He said that to me too.

It’s going to be an image, I just used that as an example.

16

I don’t think server requests has anything to do with the question here. I believe the issue is image pre-loading. What combination of this image preload code makes the most sense?

17

My take on sprites is that it does have to do with HTTP requests.

Back in the day, requests were limited in how many could be made concurrently. Some felt that it was better to request one single (heavier weight) file and use CSS to position it than it was to make multiple requests for individual (lighter weight) files. That is, the number of HTTP requests a page made was deemed a bottleneck that could result in slower page load times.

Since then things have changed and that particular bottleneck is no longer as much of a problem for small sprite eligible files.

However, IMHO, it is still a good idea to look into the number of HTTP requests a page makes and combine JavaScript and CSS files when it makes sense to.

18

Another term for “mouse-click” as you seem to be using it, is a:active {}. Look up the states that achors can have and the order in which they must be listed.

19

Hi @TechnoBear perhaps not directly but it is entitely related to the purpose of sprites… HTTP2 allows for the concurrent download of resources through a single TCP connection… Which defeats the reason of being for sprites altogether…

2 Likes
20

Yes, I understand the thinking behind sprites, and the arguments for and against them.

I was simply commenting that it’s my understanding the OP has no real interest in sprites per se; what he actually wants (for reasons unknown) is a method to preload an image.

2 Likes