Understanding how to use image sprites


#83

What if I added:
pointer-events: none;

To it?

To disable tooltips.
https://jsfiddle.net/0khwxjjb/10/

Is there anything wrong with doing that?


#84

I can't find any sprites in that example let alone their alt values.

Anyway, why would you want to disable tooltips? They are important to have. An analogy would be a building with a wheel chair ramp that's gated off so nobody can use it, or an exit sign that's painted over.


#85

The titles are still in there:

<audio></audio>

<div class="playButtonsc">
  <div class="playButtonc svoefm" data-audio="http://getradio.me/svoefm">

    <svg class="playc" style="margin:15px 36px;pointer-events: none;" aria-hidden="true" width="12" height="14" viewbox="0 0 85 100">
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z">
        <title>PLAY</title>
      </path>
    </svg>

    <svg class="pausec hidec" width="10" style="margin:15px 37px;pointer-events: none;" aria-hidden="true" height="14" viewbox="0 0 60 100">
      <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z">
        <title>PAUSE</title>
      </path>
    </svg>


  </div>

  <div class="playButtonc soundpark" data-audio="http://getradio.me/spdeep">

    <svg class="playc" style="margin:15px 38px;pointer-events: none;" aria-hidden="true" width="12" height="14" viewbox="0 0 85 100">
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z">
        <title>PLAY</title>
      </path>
    </svg>

    <svg class="pausec hidec" style="margin:15px 39px;pointer-events: none;" aria-hidden="true" width="10" height="14" viewbox="0 0 60 100">
      <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z">
        <title>PAUSE</title>
      </path>
    </svg>

  </div>

  <div class="playButtonc cavoparadisoclub" data-audio="http://s5.onweb.gr:8488/;">

    <svg class="playc" style="margin:15px 36px;pointer-events: none;" aria-hidden="true" width="12" height="14" viewbox="0 0 85 100">
      <path d="M81 44.6c5 3 5 7.8 0 10.8L9 98.7c-5 3-9 .7-9-5V6.3c0-5.7 4-8 9-5l72 43.3z">
        <title>PLAY</title>
      </path>
    </svg>

    <svg class="pausec hidec" style="margin:15px 37px;pointer-events: none;" aria-hidden="true" width="10" height="14" viewbox="0 0 60 100">
      <path d="M0 8c0-5 3-8 8-8s9 3 9 8v84c0 5-4 8-9 8s-8-3-8-8V8zm43 0c0-5 3-8 8-8s8 3 8 8v84c0 5-3 8-8 8s-8-3-8-8V8z">
        <title>PAUSE</title>
      </path>
    </svg>
  </div>
</div>

#86

I was reading this:

Part of SVG's accessibility importance is the ability to label and describe with and . The problem with is that it doubles as an accessible name and a hover tooltip.

This is the problem that made early Internet Explorer and alt an accessibility disaster; authors started writing alternate text specifically for the tooltips, or avoided it altogether to prevent confusing sighted mouse-users, so I'm sad it happened again.

Later SVG specifications stated that should only be used for hover text if it had role="tooltip", but this was never implemented.

It's not perfect, but it would be an improvement if we could disable the tooltip behavior with CSS/SVG presentation attributes, to avoid breaking existing content that relies on the old behavior:

svg|title {
  pointer-events: none;
}

or

<title pointer-events="none">A yellow shining sun.</title>


#87

alt doesn't go on SVG's, title does, it's the equivalent to alt for images.

Is there a way to only enable tooltips for people who use screen readers?


#88

How would I add this kind of transition code to the image sprite?
https://jsfiddle.net/cgtp7pmq/1/

.example4 {
      background: url(https://gordonlesti.com/media/post/css-background-transitions-with-image-sprites/sprite.png) 0px 0px no-repeat;
      position: relative;
      width: 200px;
      height: 200px;
    }
    
    .example4::after {
      content: "";
      background: url(https://gordonlesti.com/media/post/css-background-transitions-with-image-sprites/sprite.png) -200px 0px no-repeat;
      opacity: 0;
      transition: opacity 0.5s;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
    }
    
    .example4:hover::after {
      opacity: 5;
      transition: opacity 0.5s;
    }

Image Sprite
https://jsfiddle.net/1qrsd9ks/28/

Would it be possible with this type of code?

Transition on mouse click.


#89

The best you could do with current code is to use a keyframe when the element is clicked.

e.g.

Remove the transition you have on .playButtonb as you don't want to slowly transition the background position at all.

Then add the following code.

 .playButtonb.active{ animation:fade 5s ease; }

 @keyframes fade{
  0% {opacity:0.2;}
  100%{opacity:1;}
 }

#90

I know we covered this in here, but I read this a few days ago, and I'm still trying to understand
what they mean. I'm trying to understand what they are saying to do and I don't understand the instructions given.

Do I start out with 1 sprite image, or a single image?

If I start out with a sprite image, is it set up horizontally, or vertically in order to follow these instructions?

Should my sprites be horizontal or vertical?

If, for simplicity, you're going to pick one or the other, one way to do that is to look at the largest width and the largest height of your image files. If the largest width is greater than the largest height, the sprite sheet should be arranged horizontally. If the largest height is greater than the largest width, vertically.


#91

If you only have one image then its not a sprite as such so the question doesn't really make sense?

A sprite becomes a 'sprite' when more than one image is present (e.g. two states of a rollover image are present in the sprite although the sprite could contain as many as a 100 images or more as in this sprite of country flags where there are more than 300 images combined in one.

As I said before if you only have 2 images then it doesn't matter. If you have multiple images in the sprite that are the same size then it doesn't matter there either.

On the other hand if you have irregular shaped images you may want to stack them in a best fit scenario and that will depend on the width and height of individual images and in many cases they may be stacked horizontally and vertically like the flag image I showed but with different sized images inside.

In the end it doesn't matter as long as you make best use of space.

Here's a sprite from google and they have arranged them vertically because they are all small icons.


#92

I just realized that a sprite sheet is something totally different.


#93

If you have a purely decorative image and are indicating that with "null" alt text, then you need to ensure there is no space between the two sets of quote marks.

<img src="images/decoration.png" width="20" height="20" alt="">

#94

But this only deals with images in the html, images in the CSS are considered background images, and so, they would not receive any alt attribute at all.


#95

Indeed. I was simply ensuring you know the correct syntax for use with HTML images, as the example you posted was incorrect. (It had a space which shouldn't be there.)


#96

This would be a much better way to accomplish that transition effect.
https://jsfiddle.net/6ts492f6/2/

.playButtonb {
  position: relative;
  width: 260px;
  height: 260px;
  cursor: pointer;
  border: 3px solid #0059dd;
  background: url("https://i.imgur.com/6wOeaWN.png") no-repeat 0 0;
}

.playButtonb::before {
  content: "";
  position: absolute;
  top: -3px;
  left: -3px;
  width: 100%;
  height: 100%;
  background: url("https://i.imgur.com/6wOeaWN.png") no-repeat 0 -260px;
  /*transitions*/
  opacity: 0;
  border: 3px solid #0059dd;
  transition: all 2s;
}

.playButtonb.activated {
  /*javascript activates this class*/
}

.playButtonb.activated::before {
  opacity: 1;
  border: 3px solid #e77d19;
}


/*=== Vertical Lines ===*/

.lines::before,
.lines::after {
  content: "";
  position: absolute;
  top: 0;
  left: 83px;
  width: 3px;
  height: 100%;
  background: #0059dd;
  transition: all 2s;
}

.lines::after {
  left: 174px;
}

.playButtonb.activated .lines::before,
.playButtonb.activated .lines::after {
  background: #e77d19;
}

.color::before {
  content: "";
  position: absolute;
  top: 0;
  left: 86px;
  width: 88px;
  height: 100%;
  /*transitions*/
  background: black;
  opacity: 1;
  transition: all 2s;
}

.activated .color::before {
  opacity: 0;
  /*for fade out effect*/
}


/*=== SVG styles ===*/

.initialb,
.pauseb,
.playb,
.speakerb {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
}

.initialb {
  stroke: #e77d19;
  stroke-width: 3px;
  fill: transparent;
}

.pauseb,
.playb {
  stroke: #e77d19;
  stroke-width: 3px;
  fill: transparent;
}

.speakerb {
  fill: #1ed760;
}

.hideb {
  display: none;
}

#97

@asasass, You need to keep up with what's going on. The fiddle link and code you posted is NOT the same as the 'current code' Paul referred to. It was using a true sprite setup, swapping background-positions on the same element.

I had already told you that in post #52 of this other thread.

What Paul said about the sprite setup is correct. :slight_smile:


#98

This is what was trying to be replicated.
Incorporating onclick.
https://jsfiddle.net/cgtp7pmq/69/


@PaulOB came up with this:
https://jsfiddle.net/1qrsd9ks/225/

 .playButtonb.active{ animation:fade 5s ease; }

 @keyframes fade{
  0% {opacity:0.2;}
  100%{opacity:1;}
 }

@Ray.H came up with this:
https://jsfiddle.net/6ts492f6/2/

This one uses ::before ::after

Two methods using opacity.


#99

I just turned this into an image sprite, you can tell me if I did it right, or if you would have done it a different way here.
https://jsfiddle.net/ffvkbLjw/753/

.cover {
  width: 266px;
  height: 174px;
  background: url("https://i.imgur.com/OzbbJur.png") no-repeat 0 0;
  cursor: pointer;
  border: 3px solid #0059dd;
  box-sizing: border-box;
}

.activee .playButtone {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 50px;
  height: 50px;
  background: #000000;
  cursor: pointer;
  fill: #aaff00;
}

.activee {
  background: url("https://i.imgur.com/OzbbJur.png") no-repeat -260px 0;
}

#100

Why not simply use the same, single, background image for both, and add the text "Links" as actual text in the HTML which is the correct place for it? Adding text as a background image, where it's not even possible to supply alt text, is a really bad idea.

Content goes in the HTML. CSS is for decoration and layout.


Not seeing the square links with javascript disabled
#101

One is 260 x 168

The other is:

266 x 174

The text is on an image:


#102

You mean like this?
https://jsfiddle.net/egyu5y9x/4/