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 that you have read and understand our privacy policy and code of conduct.

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