Contrôle de CSS avec un bouton
Fermé
Eva
-
13 juin 2013 à 21:03
Bonsoir,
je cherche à retirer/appliquer un style CSS avec un bouton, c'est à dire que lorsque je clic sur le bouton "annotation", tout le texte devient noir et de même taille et lorsque je re-clic, le style se remet.
Voici mon code :
je cherche à retirer/appliquer un style CSS avec un bouton, c'est à dire que lorsque je clic sur le bouton "annotation", tout le texte devient noir et de même taille et lorsque je re-clic, le style se remet.
Voici mon code :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Speak fast</title>
<script type="text/javascript">
var interID;
var x = 0;
var nbDiv = 10;
var temps = 2500;
window.onload = function()
{
}
function surligne()
{
//if (x == nbDiv)x=0;
for (i=0; i<nbDiv; i++)
{
document.getElementById("div"+(i+1)).style.backgroundColor = "white";
}
document.getElementById("div"+(x+1)).style.backgroundColor = '#7FFFD4';
if (x==1)temps=3400;//like
if (x==2)temps=3400;//You Know
if (x==3)temps=1500;//Math
if (x==4)temps=2000;//I really
if (x==5)temps=3000;
if (x==6)temps=2500;//any
if (x==7)temps=2800;
if (x==8)temps=1800;//because
if (x==9) temps=3000;
clearInterval(interID);
interID = setInterval(function()
{ surligne();}, temps);
x++;
}
function stop()
{ clearInterval(interID); }
</script>
<!-- lecteur audio -->
<div id="divPlayer">
<h1>Audio-Player</h1>
<audio id="audioPlayer" src="atschool.wav" ontimeupdate="update(this)"></audio></br>
<div>
<div id="progressBarControl">
<div id="progressBar" onclick="clickProgress('audioPlayer', this, event)">Pas de lecture</div>
</div>
<span id="progressTime">00:00</span>
</div>
<button class="control" onclick="play('audioPlayer', this)">Play</button>
<button class="control" onclick="resume('audioPlayer')">Stop</button>
<button class="control" onclick="annotation('audioPlayer', this)">Annotation</button></br></br>
<span class="volume">
<a class="stick1" onclick="volume('audioPlayer', 0)"></a>
<a class="stick2" onclick="volume('audioPlayer', 0.3)"></a>
<a class="stick3" onclick="volume('audioPlayer', 0.5)"></a>
<a class="stick4" onclick="volume('audioPlayer', 0.7)"></a>
<a class="stick5" onclick="volume('audioPlayer', 1)"></a>
</span>
</div></br>
<script type="text/javascript">
/*function annotation(idPlayer, control) {
var player = document.querySelector('#' + idPlayer);
if (player.annotation) {
player.annotation();
control.textContent = 'Annotation';
document.getElementByClassName("syllabe").style.color= "black";
document.getElementByClassName("syllabe").style.fontSize= 18px;
document.getElementByClassName("syllabehaute").style.color= "black";
document.getElementByClassName("syllabehaute").style.fontSize= 18px;
document.getElementByClassName("syllabebasse").style.color = "black";
document.getElementByClassName("syllabebasse").style.fontSize = 18px;
} else {
control.textContent = 'Annoter';
document.getElementByClassName("syllabe").style.color= "red";
document.getElementByClassName("syllabe").style.fontSize= 16px;
document.getElementByClassName("syllabehaute").style.color= "blue";
document.getElementByClassName("syllabehaute").style.fontSize= 20px;
document.getElementByClassName("syllabebasse").style.color = '#FFA500';
document.getElementByClassName("syllabebasse").style.fontSize = 10px;
}
}*/
function play(idPlayer, control) {
var player = document.querySelector('#' + idPlayer);
if (player.paused) {
player.play();
interID = setInterval(function()
{ surligne();}, temps);
control.textContent = 'Pause';
} else {
player.pause();
clearInterval(interID);
control.textContent = 'Play';
}
}
function resume(idPlayer) {
var player = document.querySelector('#' + idPlayer);
clearInterval(interID);
for (i=0; i<nbDiv; i++)
{
document.getElementById("div"+(i+1)).style.backgroundColor = "white";
}
player.currentTime = 0;
player.pause();
x = 0;
}
function volume(idPlayer, vol) {
var player = document.querySelector('#' + idPlayer);
player.volume = vol;
}
function update(player) {
var duration = player.duration; // Durée totale
var time = player.currentTime; // Temps écoulé
var fraction = time / duration;
var percent = Math.ceil(fraction * 100);
var progress = document.querySelector('#progressBar');
progress.style.width = percent + '%';
progress.textContent = percent + '%';
document.querySelector('#progressTime').textContent = formatTime(time);
}
function formatTime(time) {
var hours = Math.floor(time / 3600);
var mins = Math.floor((time % 3600) / 60);
var secs = Math.floor(time % 60);
if (secs < 10) {
secs = "0" + secs;
}
if (hours) {
if (mins < 10) {
mins = "0" + mins;
}
return hours + ":" + mins + ":" + secs; // hh:mm:ss
} else {
return mins + ":" + secs; // mm:ss
}
}
function clickProgress(idPlayer, control, event) {
var parent = getPosition(control); // La position absolue de la progressBar
var target = getMousePosition(event); // L'endroit du la progressBar où on a cliqué
var player = document.querySelector('#' + idPlayer);
var x = target.x - parent.x;
var y = target.y - parent.y;
var wrapperWidth = document.querySelector('#progressBarControl').offsetWidth;
var percent = Math.ceil((x / wrapperWidth) * 100);
var duration = player.duration;
player.currentTime = (duration * percent) / 100;
}
function getMousePosition(event) {
if (event.pageX) {
return {
x: event.pageX,
y: event.pageY
};
} else {
return {
x: event.clientX + document.body.scrollLeft + document.documentElement.scrollLeft,
y: event.clientY + document.body.scrollTop + document.documentElement.scrollTop
};
}
}
function getPosition(element){
var top = 0, left = 0;
while (element) {
left += element.offsetLeft;
top += element.offsetTop;
element = element.offsetParent;
}
return { x: left, y: top };
}
</script>
<style>
/* syllabes */
.syllabe
{
color: red;
font-size: 16px;
}
.syllabehaute
{
color: blue;
font-size: 20px;
}
.syllabebasse
{
color: #FFA500;
font-size: 10px;
}
/* lecteur audio */
#divPlayer
{
width: 300px;
height: 120px;
margin-left: auto;
margin-right: auto;
border: 1px double #aaa;
border-radius: 2px;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
padding: 20px;
margin-top: 50px;
}
/*Titre*/
h1
{
font-size: 17px;
line-height: 30px;
margin: 0;
padding: 0;
margin-bottom: 25px;
border-bottom: #000 1px solid;
}
/*Bouton*/
button, input[type='button'], input[type='submit']
{
border-radius: 2px;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
background: -webkit-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);
background: -moz-linear-gradient(#fafafa, #f4f4f4 40%, #e5e5e5);
border: 1px solid #aaa;
color: #444;
margin-bottom: 0px;
min-width: 4em;
padding: 3px 12px 3px 12px;
font-size: 12px;
cursor: pointer;
display: inline-block;
}
button:hover, input[type='button']:hover, input[type='submit']:hover
{
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.2);
background: #ebebeb -webkit-linear-gradient(#fefefe, #f8f8f8 40%, #e9e9e9);
background: #ebebeb -moz-linear-gradient(#fefefe, #f8f8f8 40%, #e9e9e9);
border-color: #999;
color: #222;
display: inline-block;
}
.control
{
width: 78px;
}
/*barre de progression*/
#progressBarControl
{
width: 210px;
height: 15px;
border: 1px solid #aaa;
border-radius: 2px;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
margin-bottom: 5px;
display: inline-block;
}
#progressBar
{
width: 0px;
background: #ebebeb;
height: 15px;
text-align: right;
line-height: 15px;
font-size: 9px;
white-space: nowrap;
cursor: pointer;
}
#progressTime
{
font-size: 10px;
color: #666;
}
/*volume*/
.volume
{
vertical-align: bottom;
display: inline-block;
height: 20px;
white-space: nowrap;
position: relative;
width: 40px;
margin-left : 100px;
margin-bottom : 0px;
}
.volume a
{
display: inline-block;
background: #ebebeb;
width: 8px;
vertical-align: bottom;
margin-left: 165px;
margin-right: 0px;
margin-bottom: 70px;
cursor: pointer;
border-left: 1px solid #fff;
position: absolute;
bottom: 0;
}
.stick1
{
height: 5px;
left: 0px;
}
.stick2
{
height: 10px;
left: 9px;
}
.stick3
{
height: 15px;
left: 18px;
}
.stick4
{
height: 20px;
left: 27px;
}
.stick5
{
height: 25px;
left: 36px;
}
/*Texte*/
#divText
{
width: 300px;
margin-left: auto;
margin-right: auto;
border: 1px double #aaa;
border-radius: 5px;
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
padding: 20px;
margin-top: -20px;
}
</style>
</head>
<body>
<div id="divText">
<span class=text id="div1">
<span class="none">At</span> <span class="none">s</span><span class="none">ch</span><span class="syllabehaute">oo</span><span class="syllabehaute">l</span><span class="syllabehaute"></span> <span class="none">i</span> <span class="none">h</span><span class="syllabehaute">a</span><span class="syllabehaute">t</span><span class="normal">e</span><span class="normal">d</span> <span class="syllabehaute">sci</span><span class="syllabebasse">e</span><span class="normal">n</span><span class="normal">c</span><span class="normal">e</span><span class="normal">s</span><span class="normal"></span> <span class="syllabehaute">sub</span><span class="none">ject</span><br>
</span>
<span class=text id="div2">
<span class="none">like</span> <span class="none">ph</span><span class="syllabehaute">y</span><span class="syllabehaute">s</span><span class="normal">i</span><span class="normal">cs</span><span class="normal">
<span class="none">ch</span><span class="syllabehaute">e</span><span class="syllabehaute">m</span><span class="normal">i</span><span class="normal">s</span><span class="normal">t</span><span class="normal">r</span><span class="normal">y</span>
</span> <span class="none">and</span> <span class="none">bi</span><span class="syllabehaute">ol</span><span class="syllabebasse">o</span><span class="none">gy.</span><br>
</span>
<span class=text id="div3">
<span class="none">You</span> <span class="none">know,</span> <span class="none">and</span> <span class="none">.....</span> <span class="normal">I</span> <span class="normal">wasn't</span> <span class="normal">
<span class="none">very</span> <span class="none">good</span>
</span>
<span class=text id="div4">
<span class="syllabe">m</span><span class=" syllabe ">a</span><span class="syllabe">th</span><span class="syllabebasse">e</span><span class=" syllabehaute ">m</span><span class="syllabehaute">a</span><span class="syllabehaute">t</span><span class="normal">i</span><span class="normal">cs</span><span class="normal"></span> <span class="none">and</span> <span class="none">th</span><span class="syllabehaute">i</span><span class="syllabehaute">ng</span><span class="syllabehaute">s</span><span class="syllabehaute"></span>.
<br>
</span>
<span class=text id="div5">
<span class="none">I</span> <span class=" syllabehaute ">r</span><span class="syllabehaute">ea</span><span class="normal">ll</span><span class="normal">y</span> <span class="none">liked</span> <span class="syllabehaute">sub</span><span class="none">ject</span> <span class="none">like</span>
<br>
</span>
<span class=text id="div6">
<span class=" syllabehaute ">h</span><span class=" syllabehaute ">i</span><span class="syllabehaute">s</span><span class="normal">t</span><span class="syllabefaible">o</span><span class="normal">ry</span>,
<span class="none">g</span><span class="normal">e</span><span class="syllabehaute">o</span><span class="syllabehaute">g</span><span class="NORMAL">r</span><span class="syllabebasse">a</span><span class="normal">ph</span><span class="normal">y</span><span class="normal"></span>, <span class="syllabe">e</span><span class="syllabe">c</span><span class="syllabebasse">o</span><span class="normal">n</span><span class="syllabehaute">o</span><span class="syllabehaute">m</span><span class="normal">i</span><span class="normal">cs.</span><br>
</span>
<span class=text id="div7">
<span class="syllabehaute">A</span><span class="syllabehaute">n</span><span class="normal">y</span><span class="normal">w</span><span class="syllabe">ay</span><span class="syllabe"></span> <span class="none">when</span> <span class="none">i</span> <span class="none">went</span> <span class="none">to</span> <span class="none">u</span><span class="none">ni</span><span class=" syllabehaute ">v</span><span class=" syllabehaute ">er</span><span class=" normal ">si</span><span class=" nomal ">ty</span><br>
</span>
<span class=text id="div8">
<span class="none">I</span> <span class="none">w</span><span class="syllabehaute">a</span><span class="syllabehaute">n</span><span class="syllabehaute">t</span><span class="normal">e</span><span class="normal">d</span> <span class="none">to</span> <span class="none">do</span> <span class="none">g</span><span class="normal">e</span><span class="syllabehaute">o</span><span class="syllabehaute">l</span><span class="syllabebasse">o</span><span class="normal">g</span><span class="normal">y</span><span class="normal"></span> <span class="none">but</span> <span class="none">I</span> <span class="none">c</span><span class="syllabehaute">ou</span><span class="syllabehaute">l</span><span class="syllabehaute">d</span><span class="normal">n</span><span class="normal">'t</span><span class="normal"></span><br>
</span>
<span class=text id="div9">
<span class="none">b</span><span class="normal">e</span><span class="normal">c</span><span class="syllabehaute">au</span><span class="syllabehaute">s</span><span class="syllabehaute">e</span> <span class="none">I</span> <span class="none">was</span> <span class="none">no</span> <span class="none">good</span> <span class="none">at</span> <span class="syllabehaute">sci</span><span class="syllabebasse">e</span><span class="normal">n</span><span class="normal">c</span><span class="normal">e</span><span class="normal">s</span><span class="normal"></span>.<br>
</span>
<span class=text id="div10">
<span class="none">So</span> <span class="none">in</span> <span class="none">the</span> <span class="none">end</span> <span class="none">I</span> <span class="none">did</span> <span class="none">ph</span><span class="normal">il</span><span class="syllabehaute">o</span><span class="syllabehaute">s</span><span class="syllabebasse">o</span><span class="normal">ph</span><span class="normal">y</span><span class="normal"></span>.
</span>
</div>
</body>
</html>
A voir également:
- Contrôle de CSS avec un bouton
- Taille bouton css - Forum HTML
- Bouton on off ✓ - Forum Loisirs / Divertissements
- Retour à la ligne css - Forum CSS
- Controle parental pc - Guide
- Enlever le soulignement d'un lien css - Astuces et Solutions