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

 

 


Tema destacado: Security Series.XSS. [Cross Site Scripting]


  Mostrar Temas
Páginas: [1]
1  Programación / Ejercicios / 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 :)
Páginas: [1]
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines