<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8">
<style>
#colores div {width:100px;height:100px;float:left;margin:10px;}
.azul {background-color:blue;} .rojo {background-color:red;} .amarillo {background-color:yellow;} </style>
<script>
function mifuncion(e)
{ // capturamos el valor del primer elemento
var colorDiv1=document.getElementById("div1").className;
// al primer elemento le ponemos el color del tercer elemento
document.getElementById("div1").className=document.getElementById("div3").className;
// al tercer elemento le ponemos el color del segundo elemento
document.getElementById("div3").className=document.getElementById("div2").className;
// al segundo elemento, le ponemos el color del primer elemento
document.getElementById("div2").className=colorDiv1; }
window.onload=function()
{ elementos=document.getElementById("colores").getElementsByTagName("div"); for(var i=0;i<elementos.length; i++)
{ // Generamos el evento click para cada div de la pantalla
elementos[i].addEventListener("click",mifuncion); }
}
</script>
</head>
<body>
<p>Pulsa sobre cualquier recuadro</p>
<div id="colores">
<div id="div1" class="azul"></div>
<div id="div2" class="rojo"></div>
<div id="div3" class="amarillo"></div>
</div>
</body>
</html>
Comentarios sobre la versión: Versión 1 (2)
Gracias;
<!-- Beginfunction disableselect(e){return false}function reEnable(){return true}document.onselectstart=new Function ("return false")if (window.sidebar){document.onmousedown=disableselectdocument.onclick=reEnable}// End --></script><SCRIPT type=text/javascript><!--var message="¡¡¡LA COPIA DE IMAGENES Y TEXTOS NO ESTÁ PERMITIDA. SON PROPIEDAD DE LIVE!!!"; // Your no right click message herevar closeWin="0"; // Do you want to close window after message (1 for yes 0 for no)// JavaScript by Dave Lauderdale// Published at: www.digi-dl.comfunction IE(e){if (navigator.appName == 'Microsoft Internet Explorer' && (event.button == 2 || event.button == 3)){alert(message); if(closeWin=="1") self.close();return false;}}function NS(e){if (document.layers || (document.getElementById && !document.all)){if (e.which==2 || e.which==3){alert(message); if(closeWin=="1") self.close();return false;}}}document.onmousedown=IE;document.onmouseup=NS;document.oncontextmenu=new Function("return false");//--></SCRIPT>