How would I use image sprites with my code?

Question

This is my code, how would I get image sprites to work with it? How would I set it up?

I just read about this, and this is supposed to fix the issue I'm experiencing, but I don't know how to set it up.

All help would be greatly appreciated.

Code

Here are 2 images you can try with it.

https://i.imgur.com/T9n7wTd.png

https://i.imgur.com/jkxd2F5.png

Perhaps, you need to use your sprites via pseudo elements. Also, problem is not clear enough, at least for me. — Sergey, Oct 14 '17 at 19:38
Can you show me how please cause I've been trying to figure this out. — , Oct 14 '17 at 19:40
It's supposed to fix this issue I'm experiencing here: https://stackoverflow.com/questions/46723113/using-something-other-than-preload-image I was told to use image sprites. — , Oct 14 '17 at 19:42
It's a mess of js and html. It's a bad practice. I'll try to sort that mess and then will try to help you. You want to use preloaded image and then change it with yours? — Sergey, Oct 14 '17 at 19:42
I was just using that image as an example, and then when I got it to work, I would use any images I wanted to. You can put any image in there to test it. — , Oct 14 '17 at 19:44
I mean you want to change the image? Or use two and show one above another one — Sergey, Oct 14 '17 at 19:45
You can show me examples of it working both ways if you can, then I'll decide. One using only 1 image, then another using 2 images. — , Oct 14 '17 at 19:48
Could you explain your problem once again? I'm not sure whether I understand the problem. — Sergey, Oct 14 '17 at 19:53
Here are 2 images if you want to use these. https://i.imgur.com/T9n7wTd.png / https://i.imgur.com/jkxd2F5.png — , Oct 14 '17 at 19:56
This, but when clicked, not hover. https://stackoverflow.com/questions/13286745/css-avoid-image-hover-first-time-blinking — , Oct 14 '17 at 19:58
Have I made that you wanted? https://jsfiddle.net/huL4u87c/5/ — Sergey, Oct 14 '17 at 20:16
no. Instructions: Clear recent history from browser. Then click. That's how I've been testing it. You'll see the image blink, or a white screen. I've been trying to get rid of that. — , Oct 14 '17 at 20:22
By now I can say the only that the problem is in image loading. That blink because browser downloads that image for the first time. — Sergey, Oct 14 '17 at 20:35
What would need to be done to resolve the issue? Is there a fix for it? — , Oct 14 '17 at 20:38
Try this one https://jsfiddle.net/huL4u87c/11/ . For me it seems like solved. — Sergey, Oct 14 '17 at 20:39
That works for me. Can you put all that into the html part for me? Like this: https://jsfiddle.net/7amfsp10/ I'm putting it on blogger so that's why I have it set up like that. — , Oct 14 '17 at 20:47

Sergey · Accepted Answer · 2017-10-14T20:57:50.700

https://jsfiddle.net/7amfsp10/3/

I added at the begging

<div style="visibility: hidden; position: absolute">
  <img style="visibility: hidden; position: absolute" src="http://via.placeholder.com/260x260" aria-hidden="true" alt="">
</div>

That preloads the image that you use in the future. Since browser is smart it won't load the same image twice. So we just load image with the page, then we hide it so it won't be visible, but it's already cashed.

If you want to change the image just change the link inside <img> and in js code.

#Update Add attribute aria-hidden="true" to image to make it invisible for screen readers.

<div style="visibility: hidden; position: absolute">
  <img style="visibility: hidden; position: absolute" src="http://via.placeholder.com/260x260" aria-hidden="true" alt="">
</div>

<button id="playButton2" style="display:block; width: 266px; height: 266px; cursor: pointer;background-color: #000000 ;background-image: linear-gradient( to right,transparent 83px,#0059dd 83px, #0059dd 86px, transparent 86px, transparent  174px, #0059dd 174px, #0059dd 177px, transparent 177px ); border: 3px solid #0059dd;"
onclick=" 
    var button = document.getElementById('playButton2');
    var player = document.getElementById('player2');
      document.querySelector('#playButton2 .initial').style.display='none';
      document.querySelector('#playButton2 .pause').style.display='none';
      document.querySelector('#playButton2 .play').style.display='none';
    player.volume=1.0; if (player.paused) {
    playButton2.style.border='3px solid #e77d19';
    playButton2.style.background = 'linear-gradient( to right,transparent 83px,#e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px ), url(\'http://via.placeholder.com/260x260\')';
    playButton2.style.backgroundColor = 'transparent';
    playButton2.style.backgroundRepeat = 'no-repeat';
    playButton2.style.backgroundPosition = 'center'; 
    document.querySelector('#playButton2 .pause').style.display='inline-block';
    player.play();
    } else {
    playButton2.style.border='3px solid #e77d19';
    playButton2.style.background = 'linear-gradient( to right,transparent 83px,#e77d19 83px, #e77d19 86px, transparent 86px, transparent 174px, #e77d19 174px, #e77d19 177px, transparent 177px ), url(\'http://via.placeholder.com/260x260\')';
    playButton2.style.backgroundColor = 'transparent';    
    playButton2.style.backgroundRepeat = 'no-repeat';
    playButton2.style.backgroundPosition = 'center'; 
    document.querySelector('#playButton2 .play').style.display='inline-block';
    player.pause();
    }">

  <svg class="play" style="display: none;" width="60" height="72" viewbox="0 0 16 14">
    <path d="M12.945.38l-.652.7623zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z" fill="#1ed760 " fill-rule="evenodd"></path>
  </svg>

  <svg class="pause" style="display: none;" width="60" height="72" viewbox="0 0 16 14">
    <path d="M12.945.38l-.652.762c1.577 1.462 2.57 3.544 2.57 5.858 0 2.314-.994 4.396-2.57 5.858l.65.763c1.79-1.644 2.92-3.997 2.92-6.62S14.735 2.024 12.945.38zm-2.272 2.66l-.65.762c.826.815 1.34 1.947 1.34 3.198 0 1.25-.515 2.382-1.342 3.2l.652.762c1.04-1 1.69-2.404 1.69-3.96 0-1.558-.65-2.963-1.69-3.963zM0 4v6h2.804L8 13V1L2.804 4H0zm7-1.268v8.536L3.072 9H1V5h2.072L7 2.732z"
    fill="#1ed760 " fill-rule="evenodd"></path>
  </svg>

  <svg class="initial" width="90" height="108" viewbox="0 -10 85 120">
    <path fill="currentColor" style="stroke: #e77d19; stroke-width:3px;color:black; " 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"></path>
  </svg>

</button>

<audio id="player2" style="display:none;">
  <source src=';' type='audio/mpeg'></source>
</audio>

And if I wanted to use 2 images instead of 1? https://i.imgur.com/jkxd2F5.png / https://i.imgur.com/T9n7wTd.png What would I change the code to? — , Oct 14 '17 at 20:57
In code there are two placeholders. You can find them with **Ctrl+F**. So you change two of them with your images. Then you need to add another one image at top. Just make a copy of existing one and change their source link. — Sergey, Oct 14 '17 at 20:59
Almost. You have forgotten about changing two images in the script. Find them via `http://via.placeholder.com/260x260` and change both with needed images. Be attentive, because there are `\` don't touch them, because they "defend" single quotes from dividing into different strings. — Sergey, Oct 14 '17 at 21:05
Perfectly done! You can easily check if it's good by trying interact with that. However, if you worked with site with full access, I wouldn't recommend combine css, js and html. However, for current conditions it's nice. Don't forget to add the audio's link. — Sergey, Oct 14 '17 at 21:09
No problems. You can always thank me by marking answer as a right one. Good luck. — Sergey, Oct 14 '17 at 21:11

How would I use image sprites with my code?

1 Answers1