elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Recopilación Tutoriales y Manuales Hacking, Seguridad, Privacidad, Hardware, etc


+  Foro de elhacker.net
|-+  Programación
| |-+  Programación General
| | |-+  Ejercicios
| | | |-+  Parpadeo en javascript		0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Parpadeo en javascript  (Leído 8,487 veces)
jaxCervantes

Desconectado Desconectado

Mensajes: 4


Ver Perfil
Parpadeo en javascript
« en: 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
  1. /*El insertCoin parpadea al recargar la pagina*/
  2. function parpadeoOn() {
  3. 	var imagen = document.getElementById("insertCoin");
  4. 	if (imagen.style.visibility == "visible"){
  5. 		imagen.style.visibility = "hidden";
  6. 	}else{
  7. 		imagen.style.visibility = "visible";
  8. 	}
  9. }
  10. function imagenParpadeo() {
  11. 	var imagen = document.getElementById("imag");
  12. 	if (imagen.style.visibility == "visible"){
  13. 		imagen.style.visibility = "hidden";
  14. 	}else{
  15. 		imagen.style.visibility = "visible";
  16. 	}
  17. }
  18. function imagenFija(){
  19. 	var imagenc = document.getElementById("imag");
  20. 	if (imagenc.style.visibility == "visible"){
  21. 		imagenc.style.visibility = "visible";
  22. 	}else{
  23. 		imagenc.style.visibility = "visible";
  24. 	}
  25. }
  26. function imagenAparece(){
  27.  
  28. 	var texto= document.getElementById("texto");
  29. 	if (texto.style.visibility = "hidden"){
  30. 	texto.style.visibility = "visible";
  31. 	}	
  32. }
  33. function imagenDesaparece(){
  34.  
  35. var imagen = document.getElementById("insertCoin");	
  36. 	var texto= document.getElementById("texto");
  37. 	if (texto.style.visibility = "visible"){
  38. 	texto.style.visibility = "hidden";
  39. 	}		
  40. }
  41. window.onload=function (){
  42. var imagend = document.getElementById("imag");
  43. window.onload=setInterval("parpadeoOn()", 0800);
  44. imagend.addEventListener("mouseover",function (){imagenAparece(this);imagenFija();},false);
  45. imagend.addEventListener("mouseout",function (){imagenDesaparece(this);},false);
  46. }

Código
  1. <!DOCTYPE html>
  3. <!-- cabecera -->
  5. <!--titulo-->
  6. <title> COMUNIDAD GAMEOVER </title>
  7.  
  8. <!-- contenido de pag -->
  9. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
  10. <!-- link para css -->
  11. <link rel="stylesheet" type="text/css" href="./css/indice.css"/>
  12. <!-- link js -->
  13. <script type="text/javascript" src="./js/index.js"></script>
  14. <script type="text/javascript" src="./js/insertCoin.js"></script>
  15.  
  16. </head>
  17.  
  19.  
  20. <!-- cabecera de la pagina -->
  21. <div id="pagina">
  22. <div id="cabecera">
  23.  
  24. 	<!-- imagen cabecera del cuerpo-->
  25. 	<div id="gameover"><img src="./img/gameover3.png" title="gameover" alt="gameover"/></div>
  26. 	<div id="mario"><img src="./img/superMario.png" title="mario" alt="mario"/></div>
  27. 	<div id="luigi"><img src="./img/luigi2.png" title="luigi" alt="luigi"/></div>
  28. 	<!-- formulario para conectarse a privado -->
  29. 	<form method="post" action="./php/conectar.php">
  30. 		<div id="connect" >
  31. 			<p><strong>Usuario</strong></p>
  32. 			<input type="text" name="user" size="7"/>
  33. 			<p><strong>Contraseña</strong></p>
  34. 			<input type="password" name="pass" size="7"/>
  35. 			<div id="boton"><input type="submit" name="Conectar" value="Conectar"\></div><br />	<br />	
  36. 			<div id="registrar"><a href="./php/registrar.php"><strong>Registrar</strong></a></div>
  37. 		</div>
  38. 	</form>
  39. 	<!-- menu con las diferentes opciones (el foro solo será visible en el indice privado -->
  40. 	<div id="menu">
  41. 		<ul>
  42. 			<li>
  43. 			<a href="indice.php"><strong>Indice</strong></a>
  44. 			</li>
  45. 			<li>
  46. 			<a href="./php/tienda.php"><strong>Tienda</strong></a>
  47. 			</li>
  48. 			<li>
  49. 			<a href="./php/contacto.php"><strong>Contacto</strong></a>
  50. 			</li>
  51. 		</ul>
  52. 	</div>
  53. 	<div id="insertCoin" >
  54. 	<div id="imag"><img src="./img/insertCoin.png"  alt="insertCoin" title="insertCoin"/></div>
  55. 	<div id="texto"><p>Pulsa click para iniciar la lista de juegos</p></div>
  56. 	</div>
  57. 	<div id="okidoki"><embed src="./musica/okidoki.mp3"></embed></div>
  58. </div>	
  59. <div id="centro">	
  60. 	<!-- manda el texto que habrá en el indice -->
  61. 	<form method="post" action="./php/textIndex.php">
  62. 		<div id="textoPagina">
  63.  
  64. 		</div>
  65. 	</form>
  66. </div>
  67. <!-- fin del centro de la pagina -->
  68. 	<!-- margen izquierdo -->
  69. 	<div id="left">
  70. 		<!-- calendario en javascript -->
  71. 		<div id="calendario">
  72.  
  73. 		</div>
  74. 		<!-- otras webs -->
  75. 		<div id="otrasWebs">
  76. 			<p><strong>Otras Webs</strong></p>
  77. 			<ul>
  78. 				<li>
  79. 				<a href="http://www.lolcounter.com/"><strong> LolCounter </strong></a>
  80. 				</li>
  81. 				<li>
  82. 				<a href="http://www.lolking.net/"><strong> Lolking </strong></a>
  83. 				</li>
  84. 				<li>
  85. 				<a href="http://www.salsalol.com/"><strong> Salsalol </strong></a>
  86. 				</li>
  87. 				<li>
  88. 				<a href="http://www.leagueoflegends.com/"><strong> LeagueOfLegends </strong></a>
  89. 				</li>
  90. 			</ul>
  91.  
  92. 		</div>
  93. 	</div>
  94. 	<!-- margen derecho -->
  95. 	<div id="right">
  96. 		<!-- MUSICA -->
  97. 		<div id="audio">
  98. 			<div id="contain">
  99. 				<p>
  100. 				<input type="text" id="audiofile" size="11" value='./musica/superMario.mp3' />
  101. 				</p>
  102. 				<audio id="myaudio"> 
  103. 				</audio>
  104. 				<p>
  105. 					<canvas id="canvas" width="100" height="20">
  106. 					</canvas>
  107. 				</p>
  108. 		<p> 
  109.  
  110.             <button id="play" onclick='playAudio(); cambiarRep();' disabled>
  111.               <img src="./img/play.png" id="play2" />
  112. 			  <img src="./img/pause.png" id="pause"/>
  113.             </button>
  114.             <button id="rewind" onclick="rewindAudio();" disabled>
  115.                <img src="./img/Rewind.png" id="rewind2"/>
  116.             </button>
  117.             <button id="forward" onclick="forwardAudio();" disabled>
  118.              <img src="./img/FF.png" id="forward2"/>
  119.             </button>
  120.             <button id="restart" onclick="restartAudio();" disabled>
  121.             <img src="./img/patras.png" id="restart2"/>
  122.             </button>
  123. 			<button id ="less" onclick="moreVolume();" disabled>
  124. 			<img src="./img/morevol.png" id="less2"/>
  125. 			</button>
  126. 			<button id="more" onclick="lessVolume();" disabled>
  127. 			<img src="./img/lessvol.png" id="more2"/>
  128. 			</button> 			
  129.  
  130. 		</p>
  131.  
  132.  
  133. 		</div>
  134.         <script type="text/javascript">
  135.             //Comprobar el soporte y activar los botones
  136.             if (window.HTMLAudioElement) {
  137.                 document.getElementById("play").disabled = false;
  138.                 document.getElementById("rewind").disabled = false;
  139.                 document.getElementById("forward").disabled = false;
  140.                 document.getElementById("restart").disabled = false;
  141. 				document.getElementById('less').disabled = false;
  142. 				document.getElementById('more').disabled = false;
  143.             }
  144.         </script> 
  145. 		</div>
  146. 		<div id="ultimosComentarios">
  147. 			<form method="post" action="./php/ultimos.php">
  148.  
  149. 			</form>
  150. 		</div>
  151. 	</div>
  152. </div>	
  153. </body>

Código
  1. body{
  2. background-color: black;
  3. }
  4. #pagina {
  5. height: 1200px;
  6. width:1330px;
  7. border:1px solid #336699;
  8.  margin-left:auto;
  9.  margin-right:auto;
  10. }
  11. #pagina #cabecera{
  12. height: 400px;
  13. width:1330px;
  14. border:1px solid #336699;
  15. }
  16.  
  17. /*IMAGENES*/
  18. #pagina #cabecera #gameover{
  19. margin-left: 370px;
  20. position: absolute;
  21.  
  22. }
  23. #pagina #cabecera #mario img{
  24. margin-top:20px;
  25. overflow:hidden;
  26. position:absolute;
  27. -webkit-animation:moverMario 8s, moverMarioDerecha 13s;
  28. }
  29. /* Para navegadores webkit */
  30. @-webkit-keyframes moverMario{
  31. 	0%{top:100%;}
  32. 	20%{top:-60%;}
  33. 	0%{top:0%;}
  34. }
  35. @-webkit-keyframes moverMarioDerecha{
  36. 	5%{left:100%;}
  37. 	50%{left:0.5%;}
  38. 	100%{left:0.5%;}
  39. }
  40. /* Movemos a Mario durante 8 segundos*/
  41.  
  42. #pagina #cabecera #luigi img{
  43. margin-left:1050px;
  44. margin-top:20px;
  45. position: absolute;
  46. overflow:hidden;
  47. -webkit-animation:moverLuigi 10s, moverLuigiDerecha 10s;
  48. }
  49.  
  50. /* Para navegadores webkit */
  51. @-webkit-keyframes moverLuigi{
  52. 	0%{top:100%;}
  53. 	20%{top:-60%;}
  54. 	0%{top:6%;}
  55. }
  56. @-webkit-keyframes moverLuigiDerecha{
  57. 	5%{right:70%;}
  58. 	50%{right:12%;}
  59. 	100%{right:3.5%;}
  60. }
  61. /*CONECTAR*/
  62. #pagina #cabecera #connect{
  63. margin-top:100px;
  64. margin-left:490px;
  65. margin-bottom:40px;
  66. position: absolute;
  67. overflow:hidden;
  68. width:365px;
  69. }
  70. #pagina #cabecera #connect p{
  71. color: white;
  72. float:left;
  73.  
  74. }
  75. #pagina #cabecera #connect input{
  76. float:left;
  77. margin-right:5px;
  78. margin-top:14px;
  79.  
  80. }
  81. #pagina #cabecera #connect #boton input{
  82. margin-top:-25px;
  83. margin-left:80px;
  84. }
  85. #pagina #cabecera #connect #registrar a{
  86. color:white;
  87. margin-left:-77px;
  88. }
  89. /*MENU*/
  90. #pagina #cabecera #menu{
  91. 	width:600px;
  92. 	display: inline;
  93. 	clear:both;
  94. 	float: left;	
  95. 	border: 1px solid #336699;
  96. 	margin-left:370px;
  97. 	position: absolute;
  98. 	margin-top:170px;
  99.  
  100. }
  101. #pagina #cabecera #menu ul{
  102. float:left;
  103. }
  104. #pagina #cabecera #menu ul li{
  105. float:left;
  106. display:block;
  107. text-align:center;
  108. margin-left:30px;
  109. text-decoration: underline;
  110.  
  111. }
  112. #pagina #cabecera #menu ul li a{
  113. color: white;
  114. -webkit-transition: padding-left 25ms ease-out;
  115. -moz-transition: padding-left 25ms ease-out;
  116. font-size:40px;
  117. }
  118. #pagina #cabecera #menu ul li a:hover {
  119.  
  120. 	color: Red;
  121.     text-decoration: none;
  122. 	padding-left: 10px;
  123.  
  124.  
  125. }
  126. #pagina #cabecera #insertCoin{
  127. margin-left:450px;
  128. margin-top:280px;
  129.  
  130. }
  131. #pagina #cabecera #insertCoin img{
  132. display:block
  133. }
  134. #pagina #cabecera #insertCoin #texto{
  135. color:white;
  136. visibility:hidden;
  137. margin-left:93px;
  138. }
  139. #pagina #cabecera #okidoki{
  140. visibility:hidden;
  141. float:left;
  142. margin-top:-450px;
  143. }
  144. /***********************************************************************************************************/
  145. /*************************************************MARGEN IZQUIERDO******************************************/
  146. /***********************************************************************************************************/
  147. #pagina #left{
  148. float:left;
  149. height: 797px;
  150. width:380px;
  151. border:1px solid #336699;
  152. margin-top:-1px;
  153. }
  154. #pagina #left  #calendario{
  155. margin-bottom:294px;
  156. }
  157. #pagina #left #otrasWebs{
  158. float:left;
  159. height: 150px;
  160. width:380px;
  161. border:1px solid #336699;
  162. margin-top:-1px;
  163. }
  164. #pagina #left #otrasWebs p{
  165. color:white;
  166. font-size:20px;
  167. text-align:center;
  168. }
  169. #pagina #left #otrasWebs ul li{
  170. display:block;
  171. text-align:center;
  172. color: white;
  173. }
  174.  
  175. /***********************************************************************************************************/
  176. /************************************************MARGEN DERECHO*********************************************/
  177. /***********************************************************************************************************/
  178. #pagina #right{
  179. float:right;
  180. height: 797px;
  181. width:380px;
  182. border:1px solid #336699;
  183. margin-top:-1px;
  184. }
  185.  
  186. /***********************************************************************************************************/
  187. /****************************************************MUSICA*************************************************/
  188. /***********************************************************************************************************/ 
  189.  
  190. #pagina #right #audio{
  191. border:1px solid #336699;
  192. height:210px;
  193. }
  194. #pagina #right #audio #contain {
  195. 	background: url(../img/telefonoMovil.png); 
  196. 	height:176px;
  197. 	width:347px;
  198. 	float: left;
  199. 	margin-top:10px;
  200. 	border-radius:45px;
  201. 	border: 5px solid black;
  202. 	margin-bottom:120px;
  203. 	margin-left: 10px;
  204. }
  205. /* Tambien para mozilla (si lo habilitaran...) */
  206. #pagina #right #audio #contain p button{
  207.  
  208.  
  209.  
  210. 	/*border: 1px solid #336699;*/
  211.  
  212. }
  213.  
  214. #pagina #right #audio #contain p #play{
  215. 	float:left;
  216.  
  217. 	margin-left: 85px;
  218. }
  219.  
  220. #pagina #right #audio #contain p #play #play2{
  221. 	margin-top:3px;
  222. 	margin-bottom:3px;
  223. 	margin-left:-1px;
  224. 	margin-right:-1px;
  225. 	height:30px;
  226. 	width: 30px;
  227. 	float: left;
  228.  
  229. 	/*border: 1px solid #336699;*/
  230.  
  231. }
  232. #pagina #right #audio #contain p #play #pause{
  233. 	margin-top:3px;
  234. 	margin-bottom:3px;
  235. 	margin-left:-1px;
  236. 	margin-right:-1px;
  237. 	height:30px;
  238. 	width: 30px;
  239. 	display:none;
  240. 	float: left;
  241.  
  242. 	/*border: 1px solid #336699;*/
  243.  
  244. }
  245. #pagina #right #audio #contain p #rewind{
  246. 	float:left;
  247. 	margin-left:-2px;
  248. }
  249.  
  250. #pagina #right #audio #contain p #rewind #rewind2{
  251. 	margin-top:3px;
  252. 	margin-bottom:3px;
  253. 	margin-left:-1px;
  254. 	margin-right:-1px;
  255. 	height:30px;
  256. 	width: 30px;
  257. 	float: left;
  258.  
  259. 	/*border: 1px solid #336699;*/
  260.  
  261. }
  262. #pagina #right #audio #contain p #forward{
  263. 	float:left;
  264. 	margin-top:-44px;
  265. 	margin-left: 173px;
  266. }
  267. #pagina #right #audio #contain p #forward #forward2{
  268. 	margin-top:3px;
  269. 	margin-bottom:3px;
  270. 	margin-left:-1px;
  271. 	margin-right:-1px;
  272. 	height:30px;
  273. 	width: 30px;
  274. 	float: left;
  275.  
  276. 	/*border: 1px solid #336699;*/
  277.  
  278. }
  279. #pagina #right #audio #contain p #restart{
  280. 	float:left;
  281. 	margin-top:-44px;
  282. 	margin-left: 217px;
  283. }
  284. #pagina #right #audio #contain p #restart #restart2{
  285. 	margin-top:3px;
  286. 	margin-bottom:3px;
  287. 	margin-left:-1px;
  288. 	margin-right:-1px;
  289. 	height:30px;
  290. 	width: 30px;
  291. 	float: left;
  292. 	/*border: 1px solid #336699;*/
  293.  
  294. }
  295. #pagina #right #audio #contain p #less{
  296. 	float:left;
  297. 	margin-top:-2px;
  298. 	margin-left: 107px;
  299. }
  300.  
  301. #pagina #right #audio #contain p #less #less2{
  302. 	margin-top:3px;
  303. 	margin-bottom:3px;
  304. 	margin-left:-1px;
  305. 	margin-right:-1px;
  306. 	height:30px;
  307. 	width: 30px;
  308. 	float: left;
  309. 	/*border: 1px solid #336699;*/
  310.  
  311. }
  312. #pagina #right #audio #contain p #more {
  313. 	margin-top:44px;
  314. 	margin-left: 20px;
  315. }
  316. #pagina #right #audio #contain p #more #more2{
  317. 	margin-top:3px;
  318. 	margin-bottom:3px;
  319. 	margin-left:-1px;
  320. 	margin-right:-1px;
  321. 	height:30px;
  322. 	width: 30px;
  323. 	float: right;
  324. 	/*border: 1px solid #336699;*/
  325.  
  326. }
  327. #pagina #right #audio #audiofile{
  328. margin-left:65px;
  329. margin-top:6px;
  330. }
  331. #pagina #right #audio #canvas {
  332.         margin-top:-40px; 
  333. 		margin-left:165px; 
  334.         border-width: thick;
  335. 		border-style: solid;
  336. 		border-color: grey;
  337.         padding:3px; 
  338. 		float:left;
  339. 		background:white;
  340. }

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 :)
En línea
jaxCervantes

Desconectado Desconectado

Mensajes: 4


Ver Perfil
Re: Parpadeo en javascript
« Respuesta #1 en: 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
  1. /////////////////////////////////REPRODUCTOR DE MUSICA//////////////////////////////////
  2.  
  3.     //variable global del fichero actual       
  4.             var currentFile = "";
  5.  
  6.             //mostrar la barra progresiva
  7.             function progressBar() { 
  8.                 var oAudio = document.getElementById('myaudio'); 
  9.                 //obtener el tiempo actual en segundos
  10.                 var elapsedTime = Math.round(oAudio.currentTime);
  11.                 //actualizar la barra progresiva
  12.                 if (canvas.getContext) {
  13.                     var ctx = canvas.getContext("2d");
  14.                     //borrar el canvas antes de pintar
  15.                     ctx.clearRect(0, 0, canvas.clientWidth, canvas.clientHeight);
  16.                     ctx.fillStyle = "#336699";
  17.                     var fWidth = (elapsedTime / oAudio.duration) * (canvas.clientWidth);
  18.                     if (fWidth > 0) {
  19.                         ctx.fillRect(0, 0, fWidth, canvas.clientHeight);
  20.                     }
  21.                 }
  22.             }
  23.             //Funcion de play y pause
  24.             function playAudio() {
  25.                 try {
  26.                     //devuelve los objetos que necesitamos para trabajar 
  27.                     var oAudio = document.getElementById('myaudio'); 
  28.                     var btn = document.getElementById('play');
  29.                     var audioURL = document.getElementById('audiofile');               
  30.  
  31.                     //Omitir carga si el actual fichero no ha cambiado
  32.                     if (audioURL.value !== currentFile) {
  33.                         oAudio.src = audioURL.value;
  34.                         currentFile = audioURL.value;                        
  35.                     }
  36.  
  37.                     //Prueba el atributo pausado y establece el estado
  38.                     if (oAudio.paused) {
  39.                         oAudio.play();
  40.                         btn.getElementById = "pause";
  41.                     }
  42.                     else {
  43.                         oAudio.pause();
  44.  
  45.                         btn.getElementById ="play2";
  46.                     }
  47.                 }
  48.                 catch (e) {
  49.  
  50.                     if (window.console && console.error("Error:" + e));
  51.                 }
  52.             }
  53.  
  54.             //Retrocede la cancion 30 segundos
  55.             function rewindAudio() {
  56.                 try {
  57.                     var oAudio = document.getElementById('myaudio');
  58.                     oAudio.currentTime -= 30.0;
  59.                 }
  60.                 catch (e) {
  61.  
  62.                     if (window.console && console.error("Error:" + e));
  63.                 }
  64.             }
  65.  
  66.             //Adelanta la cancion 30 segundos
  67.             function forwardAudio() {
  68.                 try {
  69.                     var oAudio = document.getElementById('myaudio');
  70.                     oAudio.currentTime += 30.0;
  71.                 }
  72.                 catch (e) {
  73.                     // Fail silently but show in F12 developer tools console
  74.                     if (window.console && console.error("Error:" + e));
  75.                 }
  76.             }
  77.  
  78.             //Reanuda el fichero de audio
  79.  
  80.             function restartAudio() {
  81.                 try {
  82.                     var oAudio = document.getElementById('myaudio');
  83.                     oAudio.currentTime = 0;
  84.                 }
  85.                 catch (e) {
  86.  
  87.                     if (window.console && console.error("Error:" + e));
  88.                 }
  89.             }
  90. 			//Baja el volumen de la musica
  91. 			function lessVolume() {
  92.                 try {
  93.                     var oAudio = document.getElementById('myaudio');
  94.                     oAudio.volume -= 0.1;
  95.                 }
  96.                 catch (e) {
  97.  
  98.                     if (window.console && console.error("Error:" + e));
  99.                 }
  100.             }
  101. 			//Aumenta el volumen de la musica
  102. 			function moreVolume() {
  103.                 try {
  104.                     var oAudio = document.getElementById('myaudio');
  105.                     oAudio.volume += 0.1;
  106.                 }
  107.                 catch (e) {
  108.  
  109.                     if (window.console && console.error("Error:" + e));
  110.                 }
  111.             }
  112.  
  113.             //eventos añadidos
  114.  
  115.             function initEvents() {
  116.                 var canvas = document.getElementById('canvas');  
  117.                 var oAudio = document.getElementById('myaudio');
  118.  
  119.                 //configura eventos para cambiar el botón de reproducción para hacer una pausa durante la reproducción
  120.                 oAudio.addEventListener("playing", function() {
  121.                     document.getElementById("play").getElementById ="pause";
  122.                 }, true);
  123.  
  124.                 //configura eventos para cambiar el botón de reproducción para reproducir durante la pausa
  125.                 oAudio.addEventListener("pause", function() {
  126.                     document.getElementById("play").getElementById = "play2";
  127.                 }, true);
  128.                 //configura evento para actualizar la barra de progreso
  129.                 oAudio.addEventListener("timeupdate", progressBar, true); 
  130.                 //establece clic del ratón para controlar la posición de audio
  131.                 canvas.addEventListener("click", function(e) {
  132.                     //son necesarias más adelante
  133.                     var oAudio = document.getElementById('myaudio'); 
  134.                     var canvas = document.getElementById('canvas');            
  135.  
  136.                     if (!e) {
  137.                         e = window.event;
  138.                     } 
  139.                     try {
  140.                         //calcular el tiempo actual, basado en la posición del cursor del ratón en el cuadro del canvas
  141.                         oAudio.currentTime = oAudio.duration * (e.offsetX / canvas.clientWidth);
  142.                     }
  143.                     catch (err) {
  144.  
  145.                         if (window.console && console.error("Error:" + err));
  146.                     }
  147.                 }, true);
  148.             }
  149. 			//funcion para mover la nota musical
  150. 			/*function moverNota(){
  151.  
  152. 	elem = document.getElementById('nota2');
  153.  
  154. 		if(elem.style.display == 'inline'){
  155.  
  156. 			elem.style.display = 'none'
  157. 		}else{
  158.  
  159. 			elem.style.display = 'inline'
  160. 		};
  161.  
  162. 	}*/
  163. 	//funcion para reproducir el audio con las imagenes de pause y play
  164. 	function cambiarRep(){
  165.  
  166. 	elem = document.getElementById('pause');
  167. 	elem2 = document.getElementById('play2');
  168.  
  169. 		if(elem.style.display == 'inline'){
  170.  
  171. 			elem.style.display = 'none'
  172. 		}else{
  173.  
  174. 			elem.style.display = 'inline'
  175. 		};
  176.  
  177. 		if(elem2.style.display == 'none'){
  178.  
  179. 			elem2.style.display = 'inline'
  180. 		}else{
  181.  
  182. 			elem2.style.display = 'none'
  183. 		};
  184.  
  185. 	}
  186.  
  187.             window.addEventListener("DOMContentLoaded", initEvents, false);
  188.  
En línea
jaxCervantes

Desconectado Desconectado

Mensajes: 4


Ver Perfil
Re: Parpadeo en javascript
« Respuesta #2 en: 7 Julio 2013, 18:33 pm »
Nadie tiene idea de como puedo arreglarlo por favor? :(

Un saludo
En línea
jaxCervantes

Desconectado Desconectado

Mensajes: 4


Ver Perfil
Re: Parpadeo en javascript
« Respuesta #3 en: 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
  1. function parpadeoOn() {
  2.  
  3. 	var imagen = document.getElementById("imag");
  4. 	if (imagen.style.visibility == "visible"){
  5. 		imagen.style.visibility = "hidden";
  6. 	}else{
  7. 		imagen.style.visibility = "visible";
  8. 	}
  9.  
  10. }
  11. function imagenParpadeo() {
  12. parpadeo();
  13. }
  14.  
  15. function imagenFija(){
  16. 	var imagenc = document.getElementById("imag");
  17. 	clearInterval(parpadeoencendido);
  18. 	if (imagenc.style.visibility == "visible"){
  19. 		imagenc.style.visibility = "visible";
  20. 	}else{
  21. 		imagenc.style.visibility = "visible";
  22. 	}
  23. }
  24.  
  25. function textoAparece(){
  26. 	var texto= document.getElementById("texto");
  27. 	if (texto.style.visibility = "hidden"){
  28. 	texto.style.visibility = "visible";
  29. 	}	
  30. }
  31. function textoDesaparece(){
  32. 	var texto= document.getElementById("texto");
  33. 	if (texto.style.visibility = "visible"){
  34. 	texto.style.visibility = "hidden";
  35. 	}		
  36. }
  37.  
  38. function parpadeo(){
  39. 	parpadeoencendido=setInterval("parpadeoOn()", 0800);
  40. }
  41.  
  42. function malditoClick(){
  43.  
  44. 	window.open("php/pag.php" , "titulo ventana" , "top=20, left=50, width=120,height=300,scrollbars=NO");
  45. }
  46.  
  47. window.onload=function (){
  48. parpadeo();
  49.  
  50. var imagend = document.getElementById("imag");
  51. imagend.addEventListener("mouseover",function (){textoAparece(this);imagenFija();},false);
  52. imagend.addEventListener("mouseout",function (){textoDesaparece(this);imagenParpadeo();},false);
  53. imagend.addEventListener("onclick",function (){click(this);},false);
  54. }
  55.  
  56.  
En línea
ivancea96


Desconectado Desconectado

Mensajes: 3.412


ASMático


Ver Perfil WWW
Re: Parpadeo en javascript
« Respuesta #4 en: 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.
En línea
Code0x66 - Blog de hacking & programación
Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Corregir parpadeo en Java
Java 		SAHEKA_14 2 9,361 Último mensaje 13 Marzo 2010, 06:00 am
por danielo-
Parpadeo pantalla portátil
Hardware 		DarkItachi 8 18,269 Último mensaje 2 Agosto 2010, 15:35 pm
por Aprendiz-Oscuro
Problema con parpadeo de mi monitor
Hardware 		cpichi.cu 4 4,973 Último mensaje 5 Julio 2011, 21:24 pm
por cpichi.cu
Los ordenadores disminuyen el parpadeo y fomentan el síndrome del ojo seco
Noticias 		wolfbcn 6 2,777 Último mensaje 26 Septiembre 2013, 08:31 am
por #!drvy
Parpadeo aleatorio en cámara de vigilancia, cuál puede ser el motivo?
Electrónica 		papita5 4 5,021 Último mensaje 12 Febrero 2016, 00:44 am
por papita5
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines