0

Есть иконка, при нажатии на нее должна появляться другая картинка, а эта должна исчезнуть. Мне это нужно для аудио, чтобы по кнопке включать и останавливать песню. Как это через css сделать?

function togglePlay(video) {

  var audio = document.getElementsByTagName("audio")[0];

  if (audio) {

    if (audio.paused) {
      audio.play();
      document.getElementById("button").src = "https://image.flaticon.com/icons/svg/149/149668.svg";
    } else {
      audio.pause();
      document.getElementById("button").src = "https://image.flaticon.com/icons/svg/149/149670.svg";
    }

  }
}
.content-section .content .top img {
  border-radius: 5px 0 0 0;
  margin-right: 16px;
  max-width: 100%;
}

@media (max-width: 479px) {
  .content-section .content .top img {
    display: none;
  }
}

.lesson-item {
  max-width: 100%;
  transition: transform 300ms linear 0ms, box-shadow 300ms linear 0ms, z-index 300ms linear 0ms;
  cursor: pointer;
  transform-origin: left top;
}

.lesson-item:hover {
  transform: scale(1.05);
  transition: transform .7s;
  box-shadow: 0 10px 90px rgba(0, 0, 0, 0.6);
}

.lesson-item:after {
  content: '';
  clear: both;
  display: block;
}

img {
  background-size: cover;
  float: left;
  margin-right: 1rem;
  transition: height 300ms, width 300ms;
  transform-origin: left top;
}

.lesson-item .bottom {
  margin-left: 0;
  transition: margin-left 300ms;
  display: flex;
  flex-wrap: wrap;
}

.time {
  display: flex;
  flex-direction: row;
}

#button {
  width: 50px;
}
<div class="lesson-item">
  <div class="lesson">
    <div class="top">
      <img src="https://i.stack.imgur.com/N4FQf.jpg" alt="">
      <div class="description">
        <a href="audio.html" class="lesson-title">Lorem Ipsum</a>
        <div class="links">
          <a href="#"><i class="fab fa-youtube"></i></a>
          <a href="#"><i class="far fa-newspaper"></i></a>
        </div>
        <div class="player" onclick="togglePlay(this)">
          <img src="https://image.flaticon.com/icons/svg/149/149668.svg" id="button">
          <audio>
            <source src="https://ccrma.stanford.edu/~jos/mp3/bachfugue.mp3" />
        </audio>
        </div>
        <div class="time">
          <div class="user" style="display: inline-block;">
            <i class="fa fa-user"></i>
            <a href="#">asdasdt</a>
          </div><br>
          <div class="date">
            <i class="far fa-calendar-alt"></i>
            <a href="#">21.08.2018</a>
          </div>
        </div>
      </div>
    </div>
    <div class="bottom">
      <a href="#">asda</a>
      <a href="#">asda</a>
      <a href="#">asda</a>
      <a href="#">asda</a>
      <a href="#">asda</a>
      <a href="#">Fiqh</a>
      <p id="string" class="btn"><span class="span_icon">+</span></p>
    </div>
  </div>
</div>

Как это сделать через css, то есть добавить 2 картинку, на которую заменяю, а то через html не получается, тк весь блок делаю none, это нужно, т.к без него картинка будет видна в мобильной версии, а этого не нужно вот она

[![введите сюда описание изображения][1]][1]

Помогите именно через css добавить.

3 ответа 3

2

Не понятно что у Вас там не получается с html и css, допилил Ваш пример чтобы включалось-выключалось и менялась иконка

let playIcon = "https://image.flaticon.com/icons/svg/149/149668.svg";
let pauseIcon = "https://image.flaticon.com/icons/svg/149/149670.svg";

function togglePlay(video) {
  var audio = document.getElementsByTagName("audio")[0];
  if (!audio) 
    return;
  audio.paused ? audio.play() : audio.pause();
  document.getElementById("button").src = audio.paused ? playIcon : pauseIcon;
}
#button {
  width:50px;
}
<div class="player" onclick="togglePlay(this)">
    <img src="https://image.flaticon.com/icons/svg/149/149668.svg" id="button" >
    <audio>
        <source src="https://ccrma.stanford.edu/~jos/mp3/bachfugue.mp3" />
    </audio>                
</div>

3
  • @AsasSas добавьте код, демонстрирующий проблему, то что вы написали я не могу понять. 7 мар 2019 в 12:10
  • @AsasSas я никуда не убегу, даже если сразу не отвечаю =) 7 мар 2019 в 12:11
  • @Вы так и не написали внятно что у Вас не получается, точнее я не могу понять, Вы описываете свои попытки решить какую-то проблему и неудачи на пути, а саму проблему не описываете 7 мар 2019 в 12:49
0

Если я Вас правильно понял то вот:

@media (max-width: 479px) {
   img {
      display: none; 
   } 
}

#button {
  width:50px;
  display:block ;
}
<div class="lesson-item">
    <div class="lesson">
        <div class="top">
            <img src="https://i.stack.imgur.com/N4FQf.jpg" alt="">
            <div class="description">
                <a href="audio.html" class="lesson-title" >Lorem Ipsum</a>
                <div class="links">
                    <a href="#"><i class="fab fa-youtube"></i></a>
                    <a href="#"><i class="far fa-newspaper"></i></a>
                </div>                     
<div class="player" onclick="togglePlay(this)">
    <img src="https://image.flaticon.com/icons/svg/149/149668.svg" id="button" >
    <audio>
        <source src="https://ccrma.stanford.edu/~jos/mp3/bachfugue.mp3" />
    </audio>                
</div>
                <div class="time">                  
                    <div class="user" style="display: inline-block;">
                        <i class="fa fa-user"></i>
                        <a href="#">asdasdt</a>
                    </div><br>
                    <div class="date">
                        <i class="far fa-calendar-alt"></i>
                        <a href="#">21.08.2018</a>    
                    </div>
                </div>    
            </div>
        </div>
        <div class="bottom">
            <a href="#">asda</a>
            <a href="#">asda</a>
            <a href="#">asda</a>
            <a href="#">asda</a>
            <a href="#">asda</a>
            <a href="#">Fiqh</a>
            <p id="string" class="btn"><span class="span_icon">+</span></p>
        </div>
    </div>
</div>

Если сжать окно браузера все картинки, кроме картинки c id button пропадут

2
  • @AsasSas это достойно нового вопроса 7 мар 2019 в 13:25
  • @Strainger in the Q, тогда я задам новый и этот отмечу как правильный:) Спасибо!
    – Timur
    7 мар 2019 в 13:26
0

твой проект можно сделать в JavaScript HTML:

    <i class="fa fa-spinner" id="icon"></i>

JavaScript:

    document.querySelector("#icon").onclick = () => {
      document.querySelector("#icon").className = "fa fa-history";
    }

Надеюсь, это тебе поможет.

1
  • добро пожаловать на stack overflow на русском! пожалуйста, постарайтесь оставлять чуть более развёрнутые ответы. дополнить ответ можно, нажав править 26 окт 2021 в 9:59

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.