How come the image shows on jsfiddle, but it won't show on blogger?

How come the image shows on jsfiddle, but it won’t show on blogger?

Blogger
https://testpage34567.blogspot.com/

<style>
  #playButton2 {
    width: 180px;
    height: 180px;
    cursor: pointer;
    border: 1px solid #0059dd;
    position: relative;
  }
  
  #playButton2 svg {
    position: absolute;
    z-index: -1;
  }
  
  .button div:hover {
    border: 1px solid red;
  }
  
  .button div {
    width: 36px;
    height: 36px;
    margin: 69px 71px;
    background-color: rgba(0, 0, 0, .7);
    background-size: 14px 18px;
    background-repeat: no-repeat;
    border-radius: 50%;
    border: 1px solid white;
  } 

  .initial{
    background-image: url('https://i.imgur.com/Lj57czy.png');
    background-position: 58% 50%;
  }

  
  .pause {
    background-image: url('https://i.imgur.com/LgmfKda.png');
    background-position: 50%;
    display: none;
  }
  
  .play {
    background-image: url('https://i.imgur.com/Lj57czy.png');
    background-position: 58% 50%;
    display: none;
  }


</style>

<div id="playButton2" onclick=" 
var button = document.getElementById('playButton2');
var player = document.getElementById('player2');
button.querySelector('.initial').style.display='none';
button.querySelector('.pause').style.display='none';
button.querySelector('.play').style.display='none';
player.volume=1.0; if (player.paused) {
button.querySelector('.pause').style.display='inline-block';
player.play();
} else {
button.querySelector('.play').style.display='inline-block';
player.pause();
}">

    <svg width="180" height="180">

  <defs>
        <clippath id="circleView">


      <circle cx="90" cy="90" r="85" fill="orange" />
        </circle></clippath>
    </defs>

<image width="180" height="180" xlink:href="https://i.imgur.com/uuqDlZB.jpg" clip-path="url(#circleView)" />

   <image width="180" height="180" xlink:href="http://i.imgur.com/4HJbzEq.png" />


   
    </image></image></svg>

    <div class="button">
        <div class="initial"> </div>
        <div class="pause"> </div>
        <div class="play"> </div>
    </div>

</div>

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

try this

  #playButton2 svg {
    position: absolute;
/*    z-index: -1; */
  }

Removing: z-index: -1;

That removed the playbutton:
https://testpage34567.blogspot.com/

Is it remotely possible that you have changed your code otherwise from that which you initially posted?

You told me to remove z-index: -1;, correct?

This is with z index turned on.

This is with z index turned off.

Probably my mistake, asasass. Why don’t you restore the negative z-index.

Then I get this: Only on blogger.
https://testpage34567.blogspot.com/

Because on blogger .main-inner .widget has a background-color applied and your negative z-index puts the image under the background color. Rather than using negative indexes you can usually stack positioned element more positively (in both senses of the word).

e.g.

#playButton2 svg{z-index:0}
#playButton2 .button {position:relative;z-index:2;}

Or remove the background from .main-inner .widget if you are not using it.

.main-inner .widget{background:transparent;}

1 Like

I added:

#playButton2 svg{z-index:0}
#playButton2 .button {position:relative;z-index:2;}

And I still see this.
http://www.sitepoint.com/community/uploads/short-url/eMtDCkWUBd4rPwt5fAm1OBDtyXe.png

https://testpage34567.blogspot.com/

<style>

#playButton2 svg{z-index:0}
#playButton2 .button {position:relative;z-index:2;}



  #playButton2 {
    width: 180px;
    height: 180px;
    cursor: pointer;
    border: 1px solid #0059dd;
    position: relative;
  }
  
  #playButton2 svg {
    position: absolute;
z-index: -1;
  }
  
  .button div:hover {
    border: 1px solid red;
  }
  
  .button div {
    width: 36px;
    height: 36px;
    margin: 69px 71px;
    background-color: rgba(0, 0, 0, .7);
    background-size: 14px 18px;
    background-repeat: no-repeat;
    border-radius: 50%;
    border: 1px solid white;
  } 

  .initial{
    background-image: url('https://i.imgur.com/Lj57czy.png');
    background-position: 58% 50%;
  }

  
  .pause {
    background-image: url('https://i.imgur.com/LgmfKda.png');
    background-position: 50%;
    display: none;
  }
  
  .play {
    background-image: url('https://i.imgur.com/Lj57czy.png');
    background-position: 58% 50%;
    display: none;
  }


</style>

<div id="playButton2" onclick=" 
var button = document.getElementById('playButton2');
var player = document.getElementById('player2');
button.querySelector('.initial').style.display='none';
button.querySelector('.pause').style.display='none';
button.querySelector('.play').style.display='none';
player.volume=1.0; if (player.paused) {
button.querySelector('.pause').style.display='inline-block';
player.play();
} else {
button.querySelector('.play').style.display='inline-block';
player.pause();
}">

    <svg width="180" height="180">

  <defs>
        <clippath id="circleView">


      <circle cx="90" cy="90" r="85" fill="orange" />
        </circle></clippath>
    </defs>

<image width="180" height="180" xlink:href="https://i.imgur.com/uuqDlZB.jpg" clip-path="url(#circleView)" />

   <image width="180" height="180" xlink:href="http://i.imgur.com/4HJbzEq.png" />


   
    </image></image></svg>

    <div class="button">
        <div class="initial"> </div>
        <div class="pause"> </div>
        <div class="play"> </div>
    </div>

</div>

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

You did, but you left the old CSS in place further down the <style> block and overrode it again.

4 Likes

You mean, just remove this?
z-index: -1;

And leave it as this.


  #playButton2 svg {
    position: absolute;
  }

Now it’s working.
https://testpage34567.blogspot.com/

Please.

2 Likes

I changed it to this:
And it works fine without the z-index.

About: .button div
Should that be relative, or absolute?

But according to what you have.

#playButton2 svg {
    position: absolute;

#playButton2 .button {position:relative;

How can playButton2  be both relative / and absolute?

But, whatever you place on .button, that feeds the same code to the svg's.

<style>

  .button div{ width:37px;height: 37px;
    margin: 70px 72px;
    background-color:black;
    background-size: 14px 18px;
    background-repeat: no-repeat;
    border-radius: 50%;
    box-Shadow:inset 0 0 0 3px lime;
 position:relative;
  } 
</style>

<div id="playButton2" style="position:relative;background-image: linear-gradient( to right,transparent 86px,#0059dd 86px, #0059dd 89px, transparent 89px, transparent  177px, #0059dd 177px, #0059dd 180px, transparent 180px );border: 3px solid #0059dd; width: 266px; height: 180px;cursor: pointer;" onclick=" 
var button = document.getElementById('playButton2');
var player = document.getElementById('player2');
button.querySelector('.play').style.display='none';
button.querySelector('.pause').style.display='none';
player.volume=1.0; if (player.paused) {
button.querySelector('.pause').style.display='inline-block';
player.play();
} else {
button.querySelector('.play').style.display='inline-block';
player.pause();
}">

    <svg width="180" height="180" style="position: absolute;">

  <defs>
        <clippath id="circleView">
      <circle cx="90" cy="90" r="85" fill="orange" />
        </circle></clippath>
    </defs>

<image width="180" height="180" xlink:href="https://i.imgur.com/uuqDlZB.jpg" clip-path="url(#circleView)" />

   <image width="180" height="180" xlink:href="http://i.imgur.com/4HJbzEq.png" /></image></image></svg>

    <div class="button" >
        <div class="play" style="background-image: url('https://i.imgur.com/Lj57czy.png'); background-position: 58% 50%;"> </div>
        <div class="pause" style="background-image: url('https://i.imgur.com/LgmfKda.png');background-position: 50%;display: none;"> </div>
        
    </div>

</div>

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

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.