If I copy and paste that code into an HTML document, it displays just fine for me on Firefox 56.
2 Likes
And it looks the same in IE11 also.
No and No.
Look again you still have transform :translate rules applying to all image elements (twice in fact).
I suggest you build your demos one item at a time as you don’t seem to know how to isolate code yet. Your multiple examples are using common rules and making it hard for you to test.
2 Likes
The ‘word’ Translate isn’t mentioned in here, which is Code 3. So I don’t understand what you mean.
And if you’re talking about:
background-position: 58% 50%;
background-position: 50%;
I need those in to position the play buttons.
Can you be more specific?
<style>
.button div {
width: 38px;
height: 38px;
top: 109px;
left: 111px;
background-color: black;
background-size: 14px 18px;
background-repeat: no-repeat;
border-radius: 50%;
box-Shadow: inset 0 0 0 2px lime;
position: absolute;
}
</style>
<div id="playButton7" style="position:relative;border: 3px solid #0059dd;background-color:black;width: 260px; height: 260px;cursor: pointer;" onclick="
var button = document.getElementById('playButton7');
var player = document.getElementById('player7');
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="260" height="260">
<defs>
<clippath id="circleView">
<circle cx="130" cy="130" r="85" fill="orange" />
</circle>
</clippath>
</defs>
<image x="40" y="40" width="180" height="180" xlink:href="https://i.imgur.com/uuqDlZB.jpg" clip-path="url(#circleView)" />
<image x="40" y="40" width="180" height="180" xlink:href="http://i.imgur.com/4HJbzEq.png" />
<svg width="260" height="260">
<defs>
<lineargradient id="MyGradient">
<stop offset="0%" stop-color="transparent" />
<stop offset="33%" stop-color="transparent" />
<stop offset="33%" stop-color="#0059dd" />
<stop offset="34.2%" stop-color="#0059dd" />
<stop offset="34.2%" stop-color="transparent" />
<stop offset="68%" stop-color="transparent" />
<stop offset="68%" stop-color="#0059dd" />
<stop offset="69.2%" stop-color="#0059dd" />
<stop offset="69.2%" stop-color="transparent" />
<stop offset="102%" stop-color="transparent" />
</stop></stop></stop></stop></stop></stop></stop></stop></stop></stop></lineargradient>
</defs>
<rect fill="url(#MyGradient)" x="0" y="0" width="260" height="260" />
</rect></svg>
</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="player7" style="display:none;">
<source src='http://hi5.1980s.fm/' type='audio/mpeg'>
</source></audio>
No, but on your Blogger page, it is mentioned in code 1 and code 2, Those styles will apply to all elements further down the page which match. Hence @PaulOB’s suggestion that you build just one demo at a time to avoid such conflicts.
1 Like
Really? Why is that, if the playbuttons are each different numbers?
Your code says:
image {
transform: translate(40px, 40px);
-ms-transform: translate(40px, 40px);
Those rules will apply to any image tag which appears after them on the page. If you want to ensure that they only apply to the images in one set of code, then you will need to give those images a class you can target more specifically.
1 Like
You were right. Thank you.
1 Like
Now I know to test codes separately, and not all together.
1 Like
I think I’ll forget about blogger and test as a standalone code via .html first, before I test it on blogger.
This way I’ll know if the code is right, before I make any further adjustments.
4 Likes
I think that’s a very wise decision.
1 Like
Thanks for bringing this to my attention.
1 Like
Both these codes work, so which is more preferable to use?
Code 2
<style>
.button div {
width: 38px;
height: 38px;
top: 109px;
left: 111px;
background-color: black;
background-size: 14px 18px;
background-repeat: no-repeat;
border-radius: 50%;
box-Shadow: inset 0 0 0 2px lime;
position: absolute;
}
</style>
<div id="playButton8" style="position:relative;border: 3px solid #0059dd;background-color:black;width: 260px; height: 260px;cursor: pointer;" onclick="
var button = document.getElementById('playButton8');
var player = document.getElementById('player8');
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="260" height="260" style="position: absolute; ">
<defs>
<clippath id="circleView">
<circle cx="50%" cy="50%" r="85" transform="translate(90 90)" fill="orange" />
</clippath>
</defs>
<image width="180" height="180" x="50%" y="50%" transform="translate(-90 -90)" xlink:href="https://i.imgur.com/uuqDlZB.jpg" clip-path="url(#circleView)" />
<image width="180" height="180" x="50%" y="50%" transform="translate(-90 -90)" xlink:href="http://i.imgur.com/4HJbzEq.png" />
<svg width="260" height="260">
<defs>
<lineargradient id="MyGradient">
<stop offset="0%" stop-color="transparent" />
<stop offset="33%" stop-color="transparent" />
<stop offset="33%" stop-color="#0059dd" />
<stop offset="34.2%" stop-color="#0059dd" />
<stop offset="34.2%" stop-color="transparent" />
<stop offset="68%" stop-color="transparent" />
<stop offset="68%" stop-color="#0059dd" />
<stop offset="69.2%" stop-color="#0059dd" />
<stop offset="69.2%" stop-color="transparent" />
<stop offset="102%" stop-color="transparent" />
</lineargradient>
</defs>
<rect fill="url(#MyGradient)" x="0" y="0" width="260" height="260" />
</svg>
</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="player8" style="display:none;">
<source src='http://hi5.1980s.fm/' type='audio/mpeg'>
<br/>
Code 3
<style>
.button div {
width: 38px;
height: 38px;
top: 109px;
left: 111px;
background-color: black;
background-size: 14px 18px;
background-repeat: no-repeat;
border-radius: 50%;
box-Shadow: inset 0 0 0 2px lime;
position: absolute;
}
</style>
<div id="playButton7" style="position:relative;border: 3px solid #0059dd;background-color:black;width: 260px; height: 260px;cursor: pointer;" onclick="
var button = document.getElementById('playButton7');
var player = document.getElementById('player7');
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="260" height="260">
<defs>
<clippath id="circleView">
<circle cx="130" cy="130" r="85" fill="orange" />
</clippath>
</defs>
<image x="40" y="40" width="180" height="180" xlink:href="https://i.imgur.com/uuqDlZB.jpg" clip-path="url(#circleView)" />
<image x="40" y="40" width="180" height="180" xlink:href="http://i.imgur.com/4HJbzEq.png" />
<svg width="260" height="260">
<defs>
<lineargradient id="MyGradient">
<stop offset="0%" stop-color="transparent" />
<stop offset="33%" stop-color="transparent" />
<stop offset="33%" stop-color="#0059dd" />
<stop offset="34.2%" stop-color="#0059dd" />
<stop offset="34.2%" stop-color="transparent" />
<stop offset="68%" stop-color="transparent" />
<stop offset="68%" stop-color="#0059dd" />
<stop offset="69.2%" stop-color="#0059dd" />
<stop offset="69.2%" stop-color="transparent" />
<stop offset="102%" stop-color="transparent" />
</lineargradient>
</defs>
<rect fill="url(#MyGradient)" x="0" y="0" width="260" height="260" />
</svg>
</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="player7" 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.