Raster to PNG coding discrepancy

HTML & CSS
6

Converting Base64 String to .SVG

Perfect.

The mistake I made was, I used internet explorer to convert an svg path to a png image. Wrong thing to do. I was supposed to convert the Base64 string, not the svg path.

This was the correct way.

<style>
  #playButton2 {
    width: 78px;
    height: 78px;
    cursor: pointer;
    border: 1px solid #0059dd;
    background-color: black;
    background-image: url('https://i.imgur.com/ltrxz9z.jpg');
    background-repeat: no-repeat;
    background-size: cover;
  }
  
  #playButton2 div:hover {
    border-radius: 50%;
    border: 1px solid red;
  }
  
  .initial {
    width: 36px;
    height: 36px;
    margin: 20px 20px;
    background-color: rgba(0, 0, 0, .7);
    background-image: url('https://i.imgur.com/Z6NjnxX.png');
    background-size: 14px 18px;
    background-repeat: no-repeat;
    background-position: 58% 45%;
    border-radius: 50%;
    border: 1px solid white;
    cursor: pointer;
  }
  
  .pause {
    display: none;
    width: 36px;
    height: 36px;
    margin: 20px 20px;
    background-color: rgba(0, 0, 0, .7);
    background-image: url('https://i.imgur.com/rzG5iBH.png');
    background-repeat: no-repeat;
    background-size: 14px 18px;
    background-position: 50%;
    border-radius: 500px;
    border: 1px solid white;
    cursor: pointer;
  }
  
  .play {
    display: none;
    width: 36px;
    height: 36px;
    margin: 20px 20px;
    background-color: rgba(0, 0, 0, .7);
    background-image: url('https://i.imgur.com/Z6NjnxX.png');
    background-size: 14px 18px;
    background-repeat: no-repeat;
    background-position: 58% 45%;
    border-radius: 50%;
    border: 1px solid white;
    cursor: pointer;
  }

</style>


<div id="playButton2" 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) {
document.querySelector('#playButton2 .pause').style.display='inline-block';
player.play();
} else {
document.querySelector('#playButton2 .play').style.display='inline-block';
player.pause();
}">

  <div class="initial"> </div>

  <div class="pause"> </div>

  <div class="play"> </div>

</div>

<audio id="player2" style="display:none;">
  <source src='http://hi5.1980s.fm/;' type='audio/mpeg'></source>
</audio>
1 Like