Ok muchas graciias por responder el código lo he modificado hoy a una manera más sencilla que me han enseñado lo voy a editar arriba.
Y la pregunta de como hago para ver los mensajes nuevos cuando responden a las preguntas que hago en el foro... digo que me lleguen a la bandeja de entrada del www.forosdelweb.com porque no se como.
Gracias por todo!! el código modficado lo pongo arriba aunque el efecto sigue igual jeje.. pero es mucho más corto.
Es este:
Código Javascript
:
Ver original<html>
<head>
<title> Cartas suben y bajan
</title>
<style>
#carta1 {
position: absolute;
/*Borde redondos*/
border-radius:7px;
-moz-border-radius: 7px;
-webkit-border-radius : 7px;
left: 5%;
top: 70%;
bottom: 10%;
width: 7%;
background: url(carta.jpg);
color:red;
text-align: center;
}
#carta2 {
position: absolute;
border-radius:7px;
-moz-border-radius: 7px;
-webkit-border-radius : 7px;
left: 15%;
top: 70%;
bottom: 10%;
width: 7%;
background: url(carta.jpg);
text-align: center;
}
#carta3 {
position: absolute;
border-radius:7px;
-moz-border-radius: 7px;
-webkit-border-radius : 7px;
left: 25%;
top: 70%;
bottom: 10%;
width: 7%;
background: url(carta.jpg);
text-align: center;
}
#carta4 {
position: absolute;
border-radius:7px;
-moz-border-radius: 7px;
-webkit-border-radius : 7px;
left: 35%;
top: 70%;
bottom: 10%;
width: 7%;
background: url(carta.jpg);
text-align: center;
}
#carta5 {
position: absolute;
border-radius:7px;
-moz-border-radius: 7px;
-webkit-border-radius : 7px;
left: 45%;
top: 70%;
bottom: 10%;
width: 7%;
background: url(carta.jpg);
text-align: center;
}
#carta6 {
position: absolute;
border-radius:7px;
-moz-border-radius: 7px;
-webkit-border-radius : 7px;
left: 55%;
top: 70%;
bottom: 10%;
width: 7%;
background: url(carta.jpg);
text-align: center;
}
</style>
<script>
/*function para mover carta*/
//Llamamos a function encima(x) la X es igual a el numero de la carta que muevas.
function encima(x)
{
//Le damos un valor a cartas = 'carta' + x
var cartas='carta'+ x
document.getElementById(cartas).style .top='50%';
document.getElementById(cartas).style .bottom='30%';
}
function sale(x)
{
var cartas='carta'+ x
document.getElementById(cartas).style .top='70%';
document.getElementById(cartas).style .bottom='10%';
}
</script>
</head>
<body bgColor="#32CD32">
<h1 align="center"> Cartas </h1>
<p align="center"> Pase el ratón por las cartas para seleccionarlas. </p>
<!--Cartas con Eventos.-->
<div id="carta1" onMouseOver="encima(1)"; onMouseOut="sale(1)";> Carta 1 </div>
<div id="carta2" onMouseOver="encima(2)"; onMouseOut="sale(2)";> Carta 2 </div>
<div id="carta3" onMouseOver="encima(3)"; onMouseOut="sale(3)";> Carta 3 </div>
<div id="carta4" onMouseOver="encima(4)"; onMouseOut="sale(4)";> Carta 4 </div>
<div id="carta5" onMouseOver="encima(5)"; onMouseOut="sale(5)";> Carta 5 </div>
<div id="carta6" onMouseOver="encima(6)"; onMouseOut="sale(6)";> Carta 6 </div>
</body>
</html>
Lo unico que la misma función esta operativa para todas las cartas tanto desde la 1 como a la 6. asignando a la function encima(x) y function sale(x);
Saludos! muchas gracias. mirare lo de JQuery