Forum PHP.pl

tak jak w temacie mam skrypt playlisty który po kliknieci odtwarza się muzyka i jest ikona play a chciałbym aby ta ikona zmieniła sie na inna ikonę tzn podmiana obrazka istniejącego na inny obtrazek w jaki to sposób zrobić

[JAVASCRIPT] pobierz, plaintext 
<script>
$("#playlist a").on("click", function() {
 
       var src = $(this).attr('href');
		var zdjecie1= document.getElementsByClassName(".icon-play");
		zdjecie1.innerHTML = "Hello World!";
        $("#videoarea").attr("src", src);
        $("#videoarea").attr("poster", '');
        $("#videoarea").attr("autoplay", true);
 
    return false;
});
 
 
 
 
 
});
 </script>
[JAVASCRIPT] pobierz, plaintext 

ikona play ma classe icon-play
ikona pauza ma classe icon-pause

Ten post edytował jaca121212 2.05.2015, 19:24:46

Tworzysz sobie po dwie klasy na każdy obrazek (np. icon-play on, icon-play off ). Pierwsza ukrywa obrazek, druga pokazuje + przełączasz w callbacku zdarzenia pomiędzy tymi klasami (zmieniasz klasę pomiędzy off a on).

Czyli np.
pierwszy klik (play): icon-play off, icon-pause on
drugi klik (pause): icon-play on, icon-pause off

Ten post edytował owca_82 2.05.2015, 19:30:31

dzieki za przykład tylko nie za bardzo umiem javascript dlatego napisałem to na forum może w złym dziale w sumie to ten temat powiniennem założyć w dziale gotowe rozwiązania

Coś w ten deseń z tym że zamiast buton'ów dajesz obrazki => https://jsfiddle.net/5u9hw3rt/1/

To tak jak koledzy wyżej tylko zamiast podmieniać klasę to podmieniaj atrybut src zdjęcia.

efekt który osiągnąłem jest taki że pierwszy obrazek się nie ukrywa pod drugim a i tak zamisat w konkretnej komórce li zmienił się obrazek po kliknieciu to we wszystkich komórkach li się zmieniają jak to naprawić

[JAVASCRIPT] pobierz, plaintext 
(function(){
 
    var i = 0,
        $pauseIcon = $('.icon-pause');
 
    $('a').click(function(){
 
        $pauseIcon.toggleClass("off", i);
        i = i === 1? 0 : 1;
 
    });
 
})();
 
[JAVASCRIPT] pobierz, plaintext 

[PHP] pobierz, plaintext 
echo'<ul id="playlist">';
 
echo "<li><a href=muzyka/$fileinfo>$fileinfo</a>";
 
echo'<i class="icon-play" onclick="myFunction()"></i>';
echo'<i class="icon-pause off"></i>';
 
echo "</li>";
 
echo'</ul>';
[PHP] pobierz, plaintext 

[CSS] pobierz, plaintext 
.icon-play, .icon-pause{
        position: absolute;       
}    
.icon-play.off, .icon-pause.off{
        display: none;
 
}
.icon-play:before { content: '\e800';margin-left:550px;margin-top:-25px; margin-right:0px; float:left;} 
.icon-pause:before { content: '\e801'; margin-left:550px;margin-top:-25px; margin-right:0px; float:left;  } 
[CSS] pobierz, plaintext 

dodam że iconki są pobrane z fontello

Ten post edytował jaca121212 3.05.2015, 13:42:51

Tylko jeżeli wcześniej ten obrazek sobie za cech'owałeś (IMG:style_emoticons/default/smile.gif)
IMO lepiej zmieniać klasy zamiast src (IMG:style_emoticons/default/smile.gif)

no nie za bardzo wiem jak to zrobić

Js'em podmieniaj klasy a w css jako background daj obrazek.

http://jsfiddle.net/c3g8cm96/