클릭시 단추 배경 변경

HTML5 오디오 플레이어에 대한 사용자 지정 컨트롤을 만들려고합니다.클릭시 단추 배경 변경

현재 재생/일시 중지 버튼이 있지만 버튼을 클릭하면 현재 재생 배경을 일시 중지 기호로 변경하고 싶습니다.

JS가 완벽하게 작동하며 배경을 전환하는 방법을 알 수 없습니다.

HTML5 :

<div id="myButtons"> 
<button id="playpause" title="play" onclick="togglePlayPause()"></button> 
<input id="volume" min="0" max="1" step="0.1" type="range" onchange="setVolume()" /> 
<button id="mute" onclick="toggleMute()">Mute</button> 
</div>

자바 스크립트 :

function togglePlayPause() { 
    var playpause = document.getElementById("playpause"); 
    if (audio.paused || audio.ended) { 
     playpause.title = ""; 
     playpause.innerHTML = ""; 
     audio.play(); 
    } 
    else { 
     playpause.title = ""; 
     playpause.innerHTML = ""; 
     audio.pause(); 
    }

출처

2013-04-21 WibblyWobbly

을 또한,에 따라 어떤 당신은 단지 CSS로 할 수있는 몇 가지 깔끔한 것들을 원한다. http://www.cssportal.com/css3-shapes/ – Jared

당신이 JQuery와를 사용하여 CSS 값을 설정할 수 있습니다

var playpause = $("#playpause"); 
var foo = false; 

    playpause.click(function(){ 
     if(foo===false){ 
     playpause.css("background", pause-background-url); 
     foo=true; 
     } 
     else{ 
      foo=false; 
     playpause.css("background", play-background-url); 
     } 
    }};

출처

2013-04-21 03:50:27 btevfik

OP 코드에서 jQuery는 어디에서 볼 수 있습니까? -1 – Tadeck

죄송합니다. 아마도 설명이 명확하지 않았습니다. 현재 재생 아이콘의 배경 세트가 있습니다. 버튼을 누르면 일시 중지 아이콘으로 바뀌고 싶습니다 – WibblyWobbly

@Tadeck 제가 말씀 드린 것처럼 ... "jQuery에 대해 잘하면"자바 스크립트에서 jQuery 버전을보고 싶습니다. 질문 ... 대다수의 페이지가 그것을 사용하기 때문에. 이것은 지식 공유 사이트이므로 OP에 직접적으로 도움이되지 않더라도 여기에있는 것이 좋다고 말합니다. (Just my $ .02) – Jared

이

function togglePlayPause() { 

     var playpause = document.getElementById("playpause"); 

     if (audio.paused || audio.ended) { 
      playpause.style.backgroundImage="url(play.png)"; 
      playpause.title = ""; 
      playpause.innerHTML = ""; 
      audio.play(); 
     } 
     else { 
      playpause.style.backgroundImage="url(pause.png)"; 
      playpause.title = ""; 
      playpause.innerHTML = ""; 
      audio.pause(); 
     } 
}

출처

2013-04-21 03:58:47

시도

.button-icon-play { 
    background: url(...) /*other background styling stuff*/; 
} 

.button-icon-pause { 
    background: url(...) /*other background styling stuff*/; 
}

그냥 수행하십시오 JS에서 다음 요소에 기본적으로 button-icon-play를 추가하고 : 당신은 그냥 클래스를 추가하려는 경우

좋을 수

/*Switch to pause button*/ 
playpause.className = 'button-icon-pause'; 

/*Switch to play button*/ 
playpause.className = 'button-icon-play';

출처

2013-04-21 04:00:00 zakelfassi

클릭시 단추 배경 변경

답변

관련 문제