JavaScript - Ayuda con Examen

Ayuda con Examen - Muy importante

Publicado por demakrao (1 intervención) el 17/03/2010 13:07:12

1. - Crear 2 capas, una en la esquina superior derecha de la pantalla y la otra en la esquina superior izquierda.

a/ Mediante estilos en la misma etiqueta hacer una capa roja y otra amarilla

b/ Mediante estilos con clases definidas en la cabecera hacer que el texto de las capas sea negrita, cursiva y de color azul

c/ Con un script hacer que cuando una capa reciba el enfoque del ratón, la otra cambie de color a verde

d/ Con un script y añadiendo un botón más a la pagina anterior, cuando se pulse el boton, las dos capas se desplacen en diagonal hacia el centro de la pantalla.

Valora esta pregunta

Me gusta: Está pregunta es útil y esta clara

No me gusta: Está pregunta no esta clara o no es útil

Responder

Pos: 4

Val: 2.019

RE:Ayuda con Examen - Muy importante

Publicado por ScriptShow (692 intervenciones) el 18/03/2010 17:41:27

saludos,

con este sencillo ejemplo te orientarás algo en el tema:

<html>
<head>
<style type="text/css">
.div1
{
position:absolute;
top:0px;
left:0px;
width:100px;
height:100px;
color:#0000ff;
background-color:#ff0000;
}

.div2
{
position:absolute;
top:0px;
right:0px;
width:100px;
height:100px;
color:#0000ff;
background-color:#ffff00;
}

.divc1
{
position:absolute;
top:0px;
left:0px;
width:100px;
height:100px;
color:#0000ff;
background-color:#00ff00;
}

.divc2
{
position:absolute;
top:0px;
right:0px;
width:100px;
height:100px;
color:#0000ff;
background-color:#00ff00;
}
</style>

<script type="text/javascript">
function moverx()
{
document.getElementById("div1").style.top="40%";
document.getElementById("div1").style.left="40%";
document.getElementById("div2").style.top="40%";
document.getElementById("div2").style.left="50%";
}

function colorx(c)
{
if(c==2)document.getElementById("div1").className="divc1";
if(c==1)document.getElementById("div2").className="divc2";
if(c==0)document.getElementById("div1").className="div1";
if(c==0)document.getElementById("div2").className="div2";
}
</script>
</head>

<body>
<div id="div1" class="div1" onmouseover="colorx(1)" onmouseout="colorx(0)">
contenido de la capa #1
</div>

<div id="div2" class="div2" onmouseover="colorx(2)" onmouseout="colorx(0)">
contenido de la capa #2
</div>

<center><button onclick="moverx()">Centrar</botton></center>
</body>
</html>

Experimenta, trabájatelo un poco... A ver qué pasa.

Espero sea útil.

Valora esta respuesta

Me gusta: Está respuesta es útil y esta clara

No me gusta: Está respuesta no esta clara o no es útil

Comentar

JavaScript - Ayuda con Examen - Muy importante