SoloCodigo

Programación Web y Scripting => JavaScript => Mensaje iniciado por: zaida20 en Miércoles 8 de Agosto de 2007, 15:15

Título: Problema Con Onmouseover, Onmouseout Y Onmousedown
Publicado por: zaida20 en Miércoles 8 de Agosto de 2007, 15:15
Hola tengo la suiguente duda:

Tengo una imagen y quiero que cuando se haga onMouseOut cambie la imagen, al hacer onMouseover vuelva a la imagen del inicio y al hacer onMouseDown permanezca la segunda imagen aunque quites el cursor de la imagen. Éste es el código que tengo, pero no me lo hace correctamente, cada vez que quito el cursor de encima vuelve a la imagen del principio:


Código: Text
  1.  
  2. <img onMouseOver="imagen_a()" onMouseOut="imagen_0()"  onMouseDown="inicio()">
  3. function inicio()
  4.  
  5. {
  6. window.frames["contenido2"].location.href = "inicio2.htm";
  7. document.getElementById('banner').src='img/imagenes/banner.gif';
  8. document.getElementById('imagen').src='img/mapa1.gif';
  9.  
  10. }
  11. function imagen_0()
  12. {
  13. document.getElementById('imagen').src='img/mapa.gif';
  14. document.getElementById('flecha1').src='img/imagenes/flecha.gif';
  15. document.getElementById('flecha2').src='img/imagenes/flecha.gif';
  16. fintextointermitente();
  17. window.frames["contenido"].location.href = "inicio.htm";
  18. }
  19. function imagen_a()
  20. {
  21. document.getElementById('imagen').src='img/mapa1.gif';
  22. inter();
  23. window.frames["contenido"].location.href = "inicio_a.htm";
  24. document.getElementById('flecha1').src='img/imagenes/flecha_b.gif';
  25. document.getElementById('flecha2').src='img/imagenes/flecha_b.gif';
  26. }
  27.  
¿Alguien puede decirme que ésta mal?¿Hay otra manera de hacerlo?
Saludos y gracias  :hola:
Título: Re: Problema Con Onmouseover, Onmouseout Y Onmousedown
Publicado por: hano en Miércoles 8 de Agosto de 2007, 16:16
Puedes probar a llevar una variable que almacene si se ha hecho onMouseDown para controlar el cambio de imágenes.
Título: Re: Problema Con Onmouseover, Onmouseout Y Onmousedown
Publicado por: zaida20 en Jueves 9 de Agosto de 2007, 10:58
Hola hano:

Perdona mi ignoracia, pero podías ponerme un ejemplo de como se hace?

Saludos y gracias  :hola:
Título: Re: Problema Con Onmouseover, Onmouseout Y Onmousedown
Publicado por: LeGatoRojo en Jueves 9 de Agosto de 2007, 17:59
como se llama el objeo imagen que quieres utilizar, o es tan solo un codigo muestra??
Título: Re: Problema Con Onmouseover, Onmouseout Y Onmousedown
Publicado por: zaida20 en Jueves 9 de Agosto de 2007, 18:04
Mira te explico, en realidad es una imagen dividida en seis parte, cada parte tiene una zona interactiva donde tengo colocados los eventos, aquí te dejo todo el código:

Código: Text
  1. function inicio()
  2. {
  3. window.frames["contenido2"].location.href = "inicio2.htm";//manda el iframe al archivo inicio2.htm
  4. document.getElementById('banner').src='img/imagenes/banner.gif';//cambia el banner
  5. document.getElementById('imagen').src='img/mapa1.gif';//cambia el mapa
  6.  
  7. }
  8. function que()
  9. {
  10. window.frames["contenido2"].location.href = "que.htm";//manda el iframe al archivo que.htm
  11. document.getElementById('banner').src='img/banner_que.gif';//cambia el banner
  12. document.getElementById('imagen').src='img/mapa4.gif';//cambia el mapa
  13.  
  14. }
  15. function campana()
  16. {
  17. window.frames["contenido2"].location.href = "campana_especial.htm";//manda el iframe al archivo campana_especial.htm
  18. document.getElementById('banner').src='img/banner_campana.gif';//cambia el banner
  19. document.getElementById('imagen').src='img/mapa3.gif';//cambia el mapa
  20.  
  21. }
  22. function asesor()
  23. {
  24. window.frames["contenido2"].location.href = "contactar.htm";//manda el iframe al archivo contactar.htm
  25. document.getElementById('banner').src='img/banner_asesor.gif';//cambia el banner
  26. document.getElementById('imagen').src='img/mapa6.gif';//cambia el mapa
  27.  
  28. }
  29. function quienes()
  30. {
  31. window.frames["contenido2"].location.href = "quienes.htm";//manda el iframe al archivo quienes.htm
  32. document.getElementById('banner').src='img/banner_quienes.gif';//cambia el banner
  33. document.getElementById('imagen').src='img/mapa2.gif';//cambia el mapa
  34.  
  35. }
  36. var mostrar=false;
  37.  
  38. function inter()//hace intermitente el texto (clikee)
  39. {
  40. col= (mostrar) ? '#000000' : '#9933ff';
  41. document.getElementById('clikee').style.color=col;
  42. mostrar = !mostrar;
  43. int1=setTimeout('inter()',500);
  44. }
  45. function fintextointermitente()//para el texto intermitente
  46. {
  47. clearTimeout(int1);
  48. document.getElementById('clikee').style.color="#000000";
  49. }
  50. function imagen_0()
  51. {
  52. document.getElementById('imagen').src='img/mapa.gif';
  53. document.getElementById('flecha1').src='img/imagenes/flecha.gif';
  54. document.getElementById('flecha2').src='img/imagenes/flecha.gif';
  55. fintextointermitente();
  56. window.frames["contenido"].location.href = "inicio.htm";
  57. }
  58. function imagen_1()
  59. {
  60. document.getElementById('imagen').src='img/mapa.gif';
  61. document.getElementById('flecha1').src='img/imagenes/flecha.gif';
  62. document.getElementById('flecha2').src='img/imagenes/flecha.gif';
  63. fintextointermitente();
  64. window.frames["contenido"].location.href = "inicio.htm";
  65. }
  66. function imagen_2()
  67. {
  68. document.getElementById('imagen').src='img/mapa.gif';
  69. document.getElementById('flecha1').src='img/imagenes/flecha.gif';
  70. document.getElementById('flecha2').src='img/imagenes/flecha.gif';
  71. fintextointermitente();
  72. window.frames["contenido"].location.href = "inicio.htm";
  73. }
  74. function imagen_3()
  75. {
  76. document.getElementById('imagen').src='img/mapa.gif';
  77. document.getElementById('flecha1').src='img/imagenes/flecha.gif';
  78. document.getElementById('flecha2').src='img/imagenes/flecha.gif';
  79. fintextointermitente();
  80. window.frames["contenido"].location.href = "inicio.htm";
  81. }
  82. function imagen_4()
  83. {
  84. document.getElementById('imagen').src='img/mapa.gif';
  85. document.getElementById('flecha1').src='img/imagenes/flecha.gif';
  86. document.getElementById('flecha2').src='img/imagenes/flecha.gif';
  87. fintextointermitente();
  88. window.frames["contenido"].location.href = "inicio.htm";
  89. }
  90. function imagen_5()
  91. {
  92. document.getElementById('imagen').src='img/mapa.gif';
  93. document.getElementById('flecha1').src='img/imagenes/flecha.gif';
  94. document.getElementById('flecha2').src='img/imagenes/flecha.gif';
  95. fintextointermitente();
  96. window.frames["contenido"].location.href = "inicio.htm";
  97. }
  98.  
  99. function imagen_a()
  100. {
  101. document.getElementById('imagen').src='img/mapa1.gif';
  102. inter();
  103. window.frames["contenido"].location.href = "inicio_a.htm";
  104. document.getElementById('flecha1').src='img/imagenes/flecha_b.gif';
  105. document.getElementById('flecha2').src='img/imagenes/flecha_b.gif';
  106. }
  107. function imagen_b()
  108. {
  109. document.getElementById('imagen').src='img/mapa2.gif';
  110. inter();
  111. document.getElementById('flecha1').src='img/imagenes/flecha_b.gif';
  112. document.getElementById('flecha2').src='img/imagenes/flecha_b.gif';
  113. window.frames["contenido"].location.href = "inicio_b.htm";
  114. }
  115. function imagen_c()
  116. {
  117. document.getElementById('imagen').src='img/mapa3.gif';
  118. inter();
  119. window.frames["contenido"].location.href = "inicio_c.htm";
  120. document.getElementById('flecha1').src='img/imagenes/flecha_b.gif';
  121. document.getElementById('flecha2').src='img/imagenes/flecha_b.gif';
  122. }
  123. function imagen_d()
  124. {
  125. document.getElementById('imagen').src='img/mapa4.gif';
  126. inter();
  127. window.frames["contenido"].location.href = "inicio_d.htm";
  128. document.getElementById('flecha1').src='img/imagenes/flecha_b.gif';
  129. document.getElementById('flecha2').src='img/imagenes/flecha_b.gif';
  130. }
  131. function imagen_e()
  132. {
  133. document.getElementById('imagen').src='img/mapa5.gif';
  134. inter();
  135. window.frames["contenido"].location.href = "inicio_e.htm";
  136. document.getElementById('flecha1').src='img/imagenes/flecha_b.gif';
  137. document.getElementById('flecha2').src='img/imagenes/flecha_b.gif';
  138. }
  139. function imagen_f()
  140. {
  141. document.getElementById('imagen').src='img/mapa6.gif';
  142. inter();
  143. window.frames["contenido"].location.href = "inicio_f.htm";
  144. document.getElementById('flecha1').src='img/imagenes/flecha_b.gif';
  145. document.getElementById('flecha2').src='img/imagenes/flecha_b.gif';
  146. }
  147.  
  148.                       <img src="img/mapa.gif" name="imagen" width="184" height="121" border="0" usemap="#Map" id="imagen" style="cursor: pointer" href="#">
  149.                       <map name="Map">
  150.                         <area shape="rect" coords="-2,-5,59,61" onMouseOver="imagen_a()" onMouseOut="imagen_0()"  onMouseDown="inicio()">
  151.                         <area shape="rect" coords="60,-14,119,61" onMouseDown="quienes()" onMouseOver="imagen_b()" onMouseOut="imagen_1()">
  152.                         <area shape="rect" coords="121,-36,222,62" onMouseOver="imagen_c()" onMouseOut="imagen_2()" onMouseDown="campana()">
  153.                         <area shape="rect" coords="-37,63,59,162" onMouseOver="imagen_d()" onMouseOut="imagen_3()"onMouseDown="que()">
  154.                         <area shape="rect" coords="60,63,119,163" onMouseOver="imagen_e()" onMouseOut="imagen_4()" onMouseDown="referencias()">
  155.                         <area shape="rect" coords="121,63,221,163" onMouseOver="imagen_f()" onMouseOut="imagen_5()" onMouseDown="asesor()"></map>
  156.  
  157.  

Saludos y muchas gracias  :hola:
Título: Re: Problema Con Onmouseover, Onmouseout Y Onmousedown
Publicado por: zaida20 en Lunes 13 de Agosto de 2007, 13:42
Nadie puede darme una idea para hacerlo ?  :(
saludos :hola:
Título: Re: Problema Con Onmouseover, Onmouseout Y Onmousedown
Publicado por: F_Tanori en Lunes 13 de Agosto de 2007, 15:27
utilizas document.getElementById para la imagen completa sin embargo

ninguna area tiene id....
Citar
<area id='imagen_area_a' shape="rect" coords="-2,-5,59,61" onMouseOver="imagen_a()" onMouseOut="imagen_0()"  onMouseDown="inicio()">


Mira esta pagina no sé si se algo como lo que buscas tal vez pueda pueda ayudarte


http://www.ryerson.ca/JavaScript/lectures/...ggleButton.html (http://www.ryerson.ca/JavaScript/lectures/imglibrary/toggleButton.html)


Saludos
Título: Re: Problema Con Onmouseover, Onmouseout Y Onmousedown
Publicado por: zaida20 en Martes 14 de Agosto de 2007, 12:11
Muchas gracias F_Tanori:

Lo miraré y espero que me sirva
Saludos y gracias  :hola:

Una pregunta, alguien sabe dónde pueso encontrar un buena explicación sobre las variables de javascript?
Título: Re: Problema Con Onmouseover, Onmouseout Y Onmousedown
Publicado por: F_Tanori en Miércoles 15 de Agosto de 2007, 09:02
variables?

http://es.wikibooks.org/wiki/Programaci%C3...ipt_/_Variables (http://es.wikibooks.org/wiki/Programaci%C3%B3n_en_JavaScript_/_Variables)
http://www.vitaminaweb.com/javascript/tutorial/variables.php (http://www.vitaminaweb.com/javascript/tutorial/variables.php)
http://www.desarrolloweb.com/articulos/508.php (http://www.desarrolloweb.com/articulos/508.php)
http://www.programacionweb.net/articulos/articulo/?num=319 (http://www.programacionweb.net/articulos/articulo/?num=319)


Espero sea eso

Saludos
Título: Re: Problema Con Onmouseover, Onmouseout Y Onmousedown
Publicado por: zaida20 en Lunes 3 de Septiembre de 2007, 10:17
Gracias de nuevo F_Tanori  ;)
Saludos  :hola:
Título: Re: Problema Con Onmouseover, Onmouseout Y Onmousedown
Publicado por: F_Tanori en Lunes 3 de Septiembre de 2007, 10:29
No hay de que ;)


Saludos