Buenas! Vereis, estoy estudiando javascript con lo que he aprendido en el grado superior (desarrollo de aplicaciones multiplataforma) entre otras cosas porque he cateado ;( (os dareis cuenta por que -.-) y llevo una semana estudiando (la verdad es que me amarga porque no logro grandes avances...) y tengo el siguiente problema con el que no puedo más. No se trata ni de un trabajo, ni de deberes, y he mirado manuales, paginas web y he llegado solo hasta aqui... agradeceria que me ayudarais. Explico lo que quiero hacer:
Estoy intentando crear un codigo que cuando cargue la pagina, una imagen parpadee. Esto lo hace.
Que cuando pase el raton, la imagen deje de parpadear, se quede fija y aparezca un texto. Esto lo hace
Pero despues de llevar el raton fuera de la imagen, se mantiene fija. Y sé por qué lo hace (coñe, lo he hecho a propósito porque no sabía cómo conseguir que volviera a parpadear, y claro está, no sé como conseguir que vuelva a parpadear después de desplazar el raton fuera de la imagen).
Os he puesto tanto el codigo javascript, como css y html por si os puede ayudar.
Sé que es una barbaridad y lo siento de veras. Si ya de paso me indicais algun tutorial de javascript puro (no quiero librerias tipo jquery y cosas asi, que de eso NO me examinan) tambien lo agradecere un monton. La verdad es que me da mucho reparo y he intentado no acudir a foros (en parte porque entiendo que el tiempo de la gente es oro y no tienen que malgastarlo por mis errores...) pero es que empiezo a desesperarme y me quedan 2 meses para estudiar "solamente".
Si necesitais las imagenes os las puedo pasar.
Un saludo y muchas gracias para el que pueda ayudarme, y al que no, de todos modos gracias por intentarlo
Estoy intentando crear un codigo que cuando cargue la pagina, una imagen parpadee. Esto lo hace.
Que cuando pase el raton, la imagen deje de parpadear, se quede fija y aparezca un texto. Esto lo hace
Pero despues de llevar el raton fuera de la imagen, se mantiene fija. Y sé por qué lo hace (coñe, lo he hecho a propósito porque no sabía cómo conseguir que volviera a parpadear, y claro está, no sé como conseguir que vuelva a parpadear después de desplazar el raton fuera de la imagen).
Código (javascript) [Seleccionar]
/*El insertCoin parpadea al recargar la pagina*/
function parpadeoOn() {
var imagen = document.getElementById("insertCoin");
if (imagen.style.visibility == "visible"){
imagen.style.visibility = "hidden";
}else{
imagen.style.visibility = "visible";
}
}
function imagenParpadeo() {
var imagen = document.getElementById("imag");
if (imagen.style.visibility == "visible"){
imagen.style.visibility = "hidden";
}else{
imagen.style.visibility = "visible";
}
}
function imagenFija(){
var imagenc = document.getElementById("imag");
if (imagenc.style.visibility == "visible"){
imagenc.style.visibility = "visible";
}else{
imagenc.style.visibility = "visible";
}
}
function imagenAparece(){
var texto= document.getElementById("texto");
if (texto.style.visibility = "hidden"){
texto.style.visibility = "visible";
}
}
function imagenDesaparece(){
var imagen = document.getElementById("insertCoin");
var texto= document.getElementById("texto");
if (texto.style.visibility = "visible"){
texto.style.visibility = "hidden";
}
}
window.onload=function (){
var imagend = document.getElementById("imag");
window.onload=setInterval("parpadeoOn()", 0800);
imagend.addEventListener("mouseover",function (){imagenAparece(this);imagenFija();},false);
imagend.addEventListener("mouseout",function (){imagenDesaparece(this);},false);
}Código (html4strict) [Seleccionar]
<!DOCTYPE html>
<html>
<!-- cabecera -->
<head>
<!--titulo-->
<title> COMUNIDAD GAMEOVER </title>
<!-- contenido de pag -->
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<!-- link para css -->
<link rel="stylesheet" type="text/css" href="./css/indice.css"/>
<!-- link js -->
<script type="text/javascript" src="./js/index.js"></script>
<script type="text/javascript" src="./js/insertCoin.js"></script>
</head>
<body>
<!-- cabecera de la pagina -->
<div id="pagina">
<div id="cabecera">
<!-- imagen cabecera del cuerpo-->
<div id="gameover"><img src="./img/gameover3.png" title="gameover" alt="gameover"/></div>
<div id="mario"><img src="./img/superMario.png" title="mario" alt="mario"/></div>
<div id="luigi"><img src="./img/luigi2.png" title="luigi" alt="luigi"/></div>
<!-- formulario para conectarse a privado -->
<form method="post" action="./php/conectar.php">
<div id="connect" >
<p><strong>Usuario</strong></p>
<input type="text" name="user" size="7"/>
<p><strong>Contraseña</strong></p>
<input type="password" name="pass" size="7"/>
<div id="boton"><input type="submit" name="Conectar" value="Conectar"\></div><br /> <br />
<div id="registrar"><a href="./php/registrar.php"><strong>Registrar</strong></a></div>
</div>
</form>
<!-- menu con las diferentes opciones (el foro solo será visible en el indice privado -->
<div id="menu">
<ul>
<li>
<a href="indice.php"><strong>Indice</strong></a>
</li>
<li>
<a href="./php/tienda.php"><strong>Tienda</strong></a>
</li>
<li>
<a href="./php/contacto.php"><strong>Contacto</strong></a>
</li>
</ul>
</div>
<div id="insertCoin" >
<div id="imag"><img src="./img/insertCoin.png" alt="insertCoin" title="insertCoin"/></div>
<div id="texto"><p>Pulsa click para iniciar la lista de juegos</p></div>
</div>
<div id="okidoki"><embed src="./musica/okidoki.mp3"></embed></div>
</div>
<div id="centro">
<!-- manda el texto que habrá en el indice -->
<form method="post" action="./php/textIndex.php">
<div id="textoPagina">
</div>
</form>
</div>
<!-- fin del centro de la pagina -->
<!-- margen izquierdo -->
<div id="left">
<!-- calendario en javascript -->
<div id="calendario">
</div>
<!-- otras webs -->
<div id="otrasWebs">
<p><strong>Otras Webs</strong></p>
<ul>
<li>
<a href="http://www.lolcounter.com/"><strong> LolCounter </strong></a>
</li>
<li>
<a href="http://www.lolking.net/"><strong> Lolking </strong></a>
</li>
<li>
<a href="http://www.salsalol.com/"><strong> Salsalol </strong></a>
</li>
<li>
<a href="http://www.leagueoflegends.com/"><strong> LeagueOfLegends </strong></a>
</li>
</ul>
</div>
</div>
<!-- margen derecho -->
<div id="right">
<!-- MUSICA -->
<div id="audio">
<div id="contain">
<p>
<input type="text" id="audiofile" size="11" value='./musica/superMario.mp3' />
</p>
<audio id="myaudio">
</audio>
<p>
<canvas id="canvas" width="100" height="20">
</canvas>
</p>
<p>
<button id="play" onclick='playAudio(); cambiarRep();' disabled>
<img src="./img/play.png" id="play2" />
<img src="./img/pause.png" id="pause"/>
</button>
<button id="rewind" onclick="rewindAudio();" disabled>
<img src="./img/Rewind.png" id="rewind2"/>
</button>
<button id="forward" onclick="forwardAudio();" disabled>
<img src="./img/FF.png" id="forward2"/>
</button>
<button id="restart" onclick="restartAudio();" disabled>
<img src="./img/patras.png" id="restart2"/>
</button>
<button id ="less" onclick="moreVolume();" disabled>
<img src="./img/morevol.png" id="less2"/>
</button>
<button id="more" onclick="lessVolume();" disabled>
<img src="./img/lessvol.png" id="more2"/>
</button>
</p>
</div>
<script type="text/javascript">
//Comprobar el soporte y activar los botones
if (window.HTMLAudioElement) {
document.getElementById("play").disabled = false;
document.getElementById("rewind").disabled = false;
document.getElementById("forward").disabled = false;
document.getElementById("restart").disabled = false;
document.getElementById('less').disabled = false;
document.getElementById('more').disabled = false;
}
</script>
</div>
<div id="ultimosComentarios">
<form method="post" action="./php/ultimos.php">
</form>
</div>
</div>
</div>
</body>Código (css) [Seleccionar]
body{
background-color: black;
}
#pagina {
height: 1200px;
width:1330px;
border:1px solid #336699;
margin-left:auto;
margin-right:auto;
}
#pagina #cabecera{
height: 400px;
width:1330px;
border:1px solid #336699;
}
/*IMAGENES*/
#pagina #cabecera #gameover{
margin-left: 370px;
position: absolute;
}
#pagina #cabecera #mario img{
margin-top:20px;
overflow:hidden;
position:absolute;
-webkit-animation:moverMario 8s, moverMarioDerecha 13s;
}
/* Para navegadores webkit */
@-webkit-keyframes moverMario{
0%{top:100%;}
20%{top:-60%;}
0%{top:0%;}
}
@-webkit-keyframes moverMarioDerecha{
5%{left:100%;}
50%{left:0.5%;}
100%{left:0.5%;}
}
/* Movemos a Mario durante 8 segundos*/
#pagina #cabecera #luigi img{
margin-left:1050px;
margin-top:20px;
position: absolute;
overflow:hidden;
-webkit-animation:moverLuigi 10s, moverLuigiDerecha 10s;
}
/* Para navegadores webkit */
@-webkit-keyframes moverLuigi{
0%{top:100%;}
20%{top:-60%;}
0%{top:6%;}
}
@-webkit-keyframes moverLuigiDerecha{
5%{right:70%;}
50%{right:12%;}
100%{right:3.5%;}
}
/*CONECTAR*/
#pagina #cabecera #connect{
margin-top:100px;
margin-left:490px;
margin-bottom:40px;
position: absolute;
overflow:hidden;
width:365px;
}
#pagina #cabecera #connect p{
color: white;
float:left;
}
#pagina #cabecera #connect input{
float:left;
margin-right:5px;
margin-top:14px;
}
#pagina #cabecera #connect #boton input{
margin-top:-25px;
margin-left:80px;
}
#pagina #cabecera #connect #registrar a{
color:white;
margin-left:-77px;
}
/*MENU*/
#pagina #cabecera #menu{
width:600px;
display: inline;
clear:both;
float: left;
border: 1px solid #336699;
margin-left:370px;
position: absolute;
margin-top:170px;
}
#pagina #cabecera #menu ul{
float:left;
}
#pagina #cabecera #menu ul li{
float:left;
display:block;
text-align:center;
margin-left:30px;
text-decoration: underline;
}
#pagina #cabecera #menu ul li a{
color: white;
-webkit-transition: padding-left 25ms ease-out;
-moz-transition: padding-left 25ms ease-out;
font-size:40px;
}
#pagina #cabecera #menu ul li a:hover {
color: Red;
text-decoration: none;
padding-left: 10px;
}
#pagina #cabecera #insertCoin{
margin-left:450px;
margin-top:280px;
}
#pagina #cabecera #insertCoin img{
display:block
}
#pagina #cabecera #insertCoin #texto{
color:white;
visibility:hidden;
margin-left:93px;
}
#pagina #cabecera #okidoki{
visibility:hidden;
float:left;
margin-top:-450px;
}
/***********************************************************************************************************/
/*************************************************MARGEN IZQUIERDO******************************************/
/***********************************************************************************************************/
#pagina #left{
float:left;
height: 797px;
width:380px;
border:1px solid #336699;
margin-top:-1px;
}
#pagina #left #calendario{
margin-bottom:294px;
}
#pagina #left #otrasWebs{
float:left;
height: 150px;
width:380px;
border:1px solid #336699;
margin-top:-1px;
}
#pagina #left #otrasWebs p{
color:white;
font-size:20px;
text-align:center;
}
#pagina #left #otrasWebs ul li{
display:block;
text-align:center;
color: white;
}
/***********************************************************************************************************/
/************************************************MARGEN DERECHO*********************************************/
/***********************************************************************************************************/
#pagina #right{
float:right;
height: 797px;
width:380px;
border:1px solid #336699;
margin-top:-1px;
}
/***********************************************************************************************************/
/****************************************************MUSICA*************************************************/
/***********************************************************************************************************/
#pagina #right #audio{
border:1px solid #336699;
height:210px;
}
#pagina #right #audio #contain {
background: url(../img/telefonoMovil.png);
height:176px;
width:347px;
float: left;
margin-top:10px;
border-radius:45px;
border: 5px solid black;
margin-bottom:120px;
margin-left: 10px;
}
/* Tambien para mozilla (si lo habilitaran...) */
#pagina #right #audio #contain p button{
/*border: 1px solid #336699;*/
}
#pagina #right #audio #contain p #play{
float:left;
margin-left: 85px;
}
#pagina #right #audio #contain p #play #play2{
margin-top:3px;
margin-bottom:3px;
margin-left:-1px;
margin-right:-1px;
height:30px;
width: 30px;
float: left;
/*border: 1px solid #336699;*/
}
#pagina #right #audio #contain p #play #pause{
margin-top:3px;
margin-bottom:3px;
margin-left:-1px;
margin-right:-1px;
height:30px;
width: 30px;
display:none;
float: left;
/*border: 1px solid #336699;*/
}
#pagina #right #audio #contain p #rewind{
float:left;
margin-left:-2px;
}
#pagina #right #audio #contain p #rewind #rewind2{
margin-top:3px;
margin-bottom:3px;
margin-left:-1px;
margin-right:-1px;
height:30px;
width: 30px;
float: left;
/*border: 1px solid #336699;*/
}
#pagina #right #audio #contain p #forward{
float:left;
margin-top:-44px;
margin-left: 173px;
}
#pagina #right #audio #contain p #forward #forward2{
margin-top:3px;
margin-bottom:3px;
margin-left:-1px;
margin-right:-1px;
height:30px;
width: 30px;
float: left;
/*border: 1px solid #336699;*/
}
#pagina #right #audio #contain p #restart{
float:left;
margin-top:-44px;
margin-left: 217px;
}
#pagina #right #audio #contain p #restart #restart2{
margin-top:3px;
margin-bottom:3px;
margin-left:-1px;
margin-right:-1px;
height:30px;
width: 30px;
float: left;
/*border: 1px solid #336699;*/
}
#pagina #right #audio #contain p #less{
float:left;
margin-top:-2px;
margin-left: 107px;
}
#pagina #right #audio #contain p #less #less2{
margin-top:3px;
margin-bottom:3px;
margin-left:-1px;
margin-right:-1px;
height:30px;
width: 30px;
float: left;
/*border: 1px solid #336699;*/
}
#pagina #right #audio #contain p #more {
margin-top:44px;
margin-left: 20px;
}
#pagina #right #audio #contain p #more #more2{
margin-top:3px;
margin-bottom:3px;
margin-left:-1px;
margin-right:-1px;
height:30px;
width: 30px;
float: right;
/*border: 1px solid #336699;*/
}
#pagina #right #audio #audiofile{
margin-left:65px;
margin-top:6px;
}
#pagina #right #audio #canvas {
margin-top:-40px;
margin-left:165px;
border-width: thick;
border-style: solid;
border-color: grey;
padding:3px;
float:left;
background:white;
}Os he puesto tanto el codigo javascript, como css y html por si os puede ayudar.
Sé que es una barbaridad y lo siento de veras. Si ya de paso me indicais algun tutorial de javascript puro (no quiero librerias tipo jquery y cosas asi, que de eso NO me examinan) tambien lo agradecere un monton. La verdad es que me da mucho reparo y he intentado no acudir a foros (en parte porque entiendo que el tiempo de la gente es oro y no tienen que malgastarlo por mis errores...) pero es que empiezo a desesperarme y me quedan 2 meses para estudiar "solamente".
Si necesitais las imagenes os las puedo pasar.
Un saludo y muchas gracias para el que pueda ayudarme, y al que no, de todos modos gracias por intentarlo