Parpadeo en javascript

Iniciado por jaxCervantes, 3 Julio 2013, 22:03 PM

0 Miembros y 1 Visitante están viendo este tema.

Imprimir
Ir Abajo Páginas1
Acciones del Usuario

jaxCervantes

3 Julio 2013, 22:03 PM
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).


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 :)

jaxCervantes

#1
3 Julio 2013, 22:04 PM
oh! se me olvido poner el codigo del index.js aunque con este no tengo problema.

Pero por si tambien os ayuda es este (el primero era el insertCoin.js)

Código (javascript) [Seleccionar]
/////////////////////////////////REPRODUCTOR DE MUSICA//////////////////////////////////

    //variable global del fichero actual       
            var currentFile = "";

            //mostrar la barra progresiva
            function progressBar() {
                var oAudio = document.getElementById('myaudio');
                //obtener el tiempo actual en segundos
                var elapsedTime = Math.round(oAudio.currentTime);
                //actualizar la barra progresiva
                if (canvas.getContext) {
                    var ctx = canvas.getContext("2d");
                    //borrar el canvas antes de pintar
                    ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
                    ctx.fillStyle = "#336699";
                    var fWidth = (elapsedTime / oAudio.duration) * (canvas.clientWidth);
                    if (fWidth > 0) {
                        ctx.fillRect(0, 0, fWidth, canvas.clientHeight);
                    }
                }
            }
            //Funcion de play y pause
            function playAudio() {
                try {
                    //devuelve los objetos que necesitamos para trabajar
                    var oAudio = document.getElementById('myaudio');
                    var btn = document.getElementById('play');
                    var audioURL = document.getElementById('audiofile');               

                    //Omitir carga si el actual fichero no ha cambiado
                    if (audioURL.value !== currentFile) {
                        oAudio.src = audioURL.value;
                        currentFile = audioURL.value;                       
                    }

                    //Prueba el atributo pausado y establece el estado
                    if (oAudio.paused) {
                        oAudio.play();
                        btn.getElementById = "pause";
                    }
                    else {
                        oAudio.pause();

                        btn.getElementById ="play2";
                    }
                }
                catch (e) {
                   
                    if (window.console && console.error("Error:" + e));
                }
            }

            //Retrocede la cancion 30 segundos
            function rewindAudio() {
                try {
                    var oAudio = document.getElementById('myaudio');
                    oAudio.currentTime -= 30.0;
                }
                catch (e) {
                   
                    if (window.console && console.error("Error:" + e));
                }
            }

            //Adelanta la cancion 30 segundos
            function forwardAudio() {
                try {
                    var oAudio = document.getElementById('myaudio');
                    oAudio.currentTime += 30.0;
                }
                catch (e) {
                    // Fail silently but show in F12 developer tools console
                    if (window.console && console.error("Error:" + e));
                }
            }

            //Reanuda el fichero de audio

            function restartAudio() {
                try {
                    var oAudio = document.getElementById('myaudio');
                    oAudio.currentTime = 0;
                }
                catch (e) {
                   
                    if (window.console && console.error("Error:" + e));
                }
            }
//Baja el volumen de la musica
function lessVolume() {
                try {
                    var oAudio = document.getElementById('myaudio');
                    oAudio.volume -= 0.1;
                }
                catch (e) {
                   
                    if (window.console && console.error("Error:" + e));
                }
            }
//Aumenta el volumen de la musica
function moreVolume() {
                try {
                    var oAudio = document.getElementById('myaudio');
                    oAudio.volume += 0.1;
                }
                catch (e) {
                 
                    if (window.console && console.error("Error:" + e));
                }
            }

            //eventos añadidos

            function initEvents() {
                var canvas = document.getElementById('canvas'); 
                var oAudio = document.getElementById('myaudio');

                //configura eventos para cambiar el botón de reproducción para hacer una pausa durante la reproducción
                oAudio.addEventListener("playing", function() {
                    document.getElementById("play").getElementById ="pause";
                }, true);

                //configura eventos para cambiar el botón de reproducción para reproducir durante la pausa
                oAudio.addEventListener("pause", function() {
                    document.getElementById("play").getElementById = "play2";
                }, true);
                //configura evento para actualizar la barra de progreso
                oAudio.addEventListener("timeupdate", progressBar, true);
                //establece clic del ratón para controlar la posición de audio
                canvas.addEventListener("click", function(e) {
                    //son necesarias más adelante
                    var oAudio = document.getElementById('myaudio');
                    var canvas = document.getElementById('canvas');           

                    if (!e) {
                        e = window.event;
                    }
                    try {
                        //calcular el tiempo actual, basado en la posición del cursor del ratón en el cuadro del canvas
                        oAudio.currentTime = oAudio.duration * (e.offsetX / canvas.clientWidth);
                    }
                    catch (err) {
                 
                        if (window.console && console.error("Error:" + err));
                    }
                }, true);
            }
//funcion para mover la nota musical
/*function moverNota(){

elem = document.getElementById('nota2');

if(elem.style.display == 'inline'){

elem.style.display = 'none'
}else{

elem.style.display = 'inline'
};

}*/
//funcion para reproducir el audio con las imagenes de pause y play
function cambiarRep(){

elem = document.getElementById('pause');
elem2 = document.getElementById('play2');

if(elem.style.display == 'inline'){

elem.style.display = 'none'
}else{

elem.style.display = 'inline'
};

if(elem2.style.display == 'none'){

elem2.style.display = 'inline'
}else{

elem2.style.display = 'none'
};

}
           
            window.addEventListener("DOMContentLoaded", initEvents, false);

jaxCervantes

#2
7 Julio 2013, 18:33 PM
Nadie tiene idea de como puedo arreglarlo por favor? :(

Un saludo

jaxCervantes

#3
12 Agosto 2013, 21:15 PM
SOLUCIONADO.

Y para haberlo leido tanta gente ya podria haber dicho alguien algo -.-

Menuda decepcion de foro :/ . Pensaba que aqui ayudaban a la gente que esta "empezando"... o eso o esta visto que es otro foro hecho para grupos cerrados.

Ahi lo dejo por si a alguien le sirve.

Código (javascript) [Seleccionar]
function parpadeoOn() {

var imagen = document.getElementById("imag");
if (imagen.style.visibility == "visible"){
imagen.style.visibility = "hidden";
}else{
imagen.style.visibility = "visible";
}

}
function imagenParpadeo() {
parpadeo();
}

function imagenFija(){
var imagenc = document.getElementById("imag");
clearInterval(parpadeoencendido);
if (imagenc.style.visibility == "visible"){
imagenc.style.visibility = "visible";
}else{
imagenc.style.visibility = "visible";
}
}

function textoAparece(){
var texto= document.getElementById("texto");
if (texto.style.visibility = "hidden"){
texto.style.visibility = "visible";
}
}
function textoDesaparece(){
var texto= document.getElementById("texto");
if (texto.style.visibility = "visible"){
texto.style.visibility = "hidden";
}
}

function parpadeo(){
parpadeoencendido=setInterval("parpadeoOn()", 0800);
}

function malditoClick(){

window.open("php/pag.php" , "titulo ventana" , "top=20, left=50, width=120,height=300,scrollbars=NO");
}

window.onload=function (){
parpadeo();

var imagend = document.getElementById("imag");
imagend.addEventListener("mouseover",function (){textoAparece(this);imagenFija();},false);
imagend.addEventListener("mouseout",function (){textoDesaparece(this);imagenParpadeo();},false);
imagend.addEventListener("onclick",function (){click(this);},false);
}

ivancea96

#4
5 Octubre 2013, 16:55 PM
JaxCervantes, cuando hagas una pregunta y tengas código asociado a ella, limítate a poner el código que da error o que necesitas mejorar. Si nos pones toda la página web, CSS y etc, es un lío.
Imprimir
Ir Arriba Páginas1
Acciones del Usuario