Ver Mensaje Individual
  #1 (permalink)  
Antiguo 16/11/2012, 04:38
santosanto1
 
Fecha de Ingreso: noviembre-2012
Ubicación: Asunción, Paraguay
Mensajes: 2
Antigüedad: 11 años, 6 meses
Puntos: 0
De acuerdo cambiar color. Soy principiante.

Hola a todos! soy mega principiante en todo esto y necesito ayuda... Estoy estudiando webmaster e hicimos esto en clase...

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Curso de JavaScript - Prueba de Estructuras</title>
<style type="text/css">
body{font-family:Helvetica,'Helvetica Neue',Arial;}
div{font-weight:bold;}
.box{width:150px;height:100px;margin:5px;cursor:po inter;}
.blue{background:#9cf;color:#369;}
.d-ib{display:inline-block;}
</style>
<script>
var strColorInicial='rgb(225, 187, 0)';//Naranja
var strColorFinal='rgb(102, 187, 102)';//Verde
function cambiarColor(caja){
//Capturo el color actual de la caja
var strColorActual = caja.style.backgroundColor;
//Si el color actual es igual al color final...
if(strColorActual==strColorFinal){
//Si es igual...
caja.style.backgroundColor=strColorInicial;
}else{
//Si no...
caja.style.backgroundColor=strColorFinal;
}
}
</script>
</head>
<body>
<h1>Curso de JavaScript</h1>
<h2>Inserción</h2>
<p>Existen tres formas de insertar javascript:</p>
<ol>
<li>Eventos (atributos) HTML</li>
<li>La etiqueta &lt;srcipt&gt;</li>
<li>Documetno externo</li>
</ol>
<p>Ejemplos:</p>
<div class="box blue d-ib" onclick="cambiarColor(this);">Onclick</div>
<div class="box blue d-ib" onmouseover="cambiarColor(this);">Onmouseover</div>
<div class="box blue d-ib" onmouseout="cambiarColor(this);">Onmouseout</div>
<div class="box blue d-ib" onmousedown="cambiarColor(this);">Onmousedown</div>
<div class="box blue d-ib" onmouseup="cambiarColor(this);">Onmouseup</div>
<div>
<input class="box blue d-ib" onfocus="this.style.backgroundColor=strColorFinal; " value="onfocus"/>
<input class="box blue d-ib" onblur="this.style.backgroundColor=strColorFinal;" value="onblur"/>
</div>
<h2>Prueba de Estructuras</h2>
<ol>
<li>
<h3>Estructuras de Desición</h3>
<ol>
<li>
<h4>If/Else</h4>
</li>
<li>
<h4>Switch/Case</h4>
</li>
</ol>
</li>
<li>
<h3>Estructuras de Repetición</h3>
<ol>
<li><h4>For</h4></li>
<li><h4>While</h4></li>
<li><h4>Do While</h4></li>
</ol>
</li>
</ol>
</body>
</html>


Y la tarea que nos dejó el profesor es hacer que los cuadrados puedan volver al color original. En este caso el azul... pero no tengo idea como hacer... Él me dijo que consulte en un foro y que seguro se iban a reir de mi porque es muy facil de hacer... En fin, gracias por la ayuda!!