Mensajes

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] Expandir

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);
}



Nadie tiene idea de como puedo arreglarlo por favor?

Un saludo

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] Expandir

/////////////////////////////////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);


[Esto lo hace]

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] Expandir

/*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] Expandir

<!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] Expandir

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