Foros del Web » Creando para Internet » HTML »

Ayudaa, HTML Rollover

Estas en el tema de Ayudaa, HTML Rollover en el foro de HTML en Foros del Web. Hola. Estoy intentando hacer en un sitio propio, una botonera similar a la de este sitio: http://www.rawnarch.com/cedar_rapids_federal.html La botonera de la izquierda, que al pasar ...
  #1 (permalink)  
Antiguo 07/03/2012, 07:13
 
Fecha de Ingreso: junio-2010
Ubicación: Lomas de Zamora
Mensajes: 2
Antigüedad: 13 años, 10 meses
Puntos: 0
Ayudaa, HTML Rollover

Hola.
Estoy intentando hacer en un sitio propio, una botonera similar a la de este sitio:

http://www.rawnarch.com/cedar_rapids_federal.html

La botonera de la izquierda, que al pasar el mouse sobre los botones, aparezca una imagen miniatura. No se si se utiliza css o js, etc.

En ese sitio está hecho con flash, pero necesito armarlo sin salir del HTML.

Gracias por las respuestas.
  #2 (permalink)  
Antiguo 07/03/2012, 08:07
Avatar de maycolalvarez
Colaborador
 
Fecha de Ingreso: julio-2008
Ubicación: Caracas
Mensajes: 12.120
Antigüedad: 15 años, 8 meses
Puntos: 1532
Respuesta: Ayudaa, HTML Rollover

se puede hacer con CSS o Javascript, pero no sólo depende de HTML
__________________
¡Por favor!: usa el highlight para mostrar código
El que busca, encuentra...
  #3 (permalink)  
Antiguo 07/03/2012, 08:15
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: Ayudaa, HTML Rollover

si la estructura del layout fuera distinta, podrías hacerlo con css. por lo tanto lo único que te queda es hacerlo con javascript.
necesitarás un bloque (donde aparecerá imagen), o una imagen transparente, asignarle a cada link los eventos (onmouseover y onmouseout) y la función que será invocada cuando se produzca esos eventos.
si usas una imagen transparente lo único que has de hacer es cambiar su src. por el contrario si usas un bloque, tendrás que usar innerHTML para insertar la nueva imagen.

hay alguna otro forma que puedes usar, se trata de hecharle un poco de imaginación


pd: upsss!! sí que he tardado. sorry!!
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}
  #4 (permalink)  
Antiguo 07/03/2012, 11:05
 
Fecha de Ingreso: junio-2010
Ubicación: Lomas de Zamora
Mensajes: 2
Antigüedad: 13 años, 10 meses
Puntos: 0
Respuesta: Ayudaa, HTML Rollover

Hola, Gracias por sus respuestas.
Estoy intentando hacer lo que decis IsaBelM.

Igual creo que me expresé mal con lo de no salis de HTML, quise decir NO usar flash para hacerlo. Pero si usar css.
Es menos dificultoso con CSS??
  #5 (permalink)  
Antiguo 07/03/2012, 13:01
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 9 meses
Puntos: 1567
Respuesta: Ayudaa, HTML Rollover

Con css podés hacer algo asi
Código HTML:
Ver original
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <title>titulo</title>
  4. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  5.  
  6. <style type="text/css">
  7. /*<![CDATA[*/
  8.  
  9. /*  código para el Tooltip  */
  10. .tip {
  11. position: relative;
  12. cursor: default;
  13. }
  14. .tip span {
  15. display: none;
  16. position: absolute;
  17. width: 250px;
  18. z-index: 100;
  19. top: 15px;
  20. left: 20px;
  21. width: 225px;
  22. padding: 5px;
  23. }
  24.  
  25. *:hover#l1 span {
  26. display: block;
  27. left: 0px;
  28. top: -160px;
  29. padding: 0;
  30. margin: 0;
  31. }
  32.  
  33. *:hover#l2 span {
  34. display: block;
  35. left: 0px;
  36. top: -200px;
  37. padding: 0;
  38. margin: 0;
  39. }
  40.  
  41. *:hover#l3 span {
  42. display: block;
  43. left: 0px;
  44. top: -240px;
  45. padding: 0;
  46. margin: 0;
  47. }
  48.  
  49. *:hover#l4 span {
  50. display: block;
  51. left: 0px;
  52. top: -280px;
  53. padding: 0;
  54. margin: 0;
  55. }
  56.  
  57.  
  58. a.tip{
  59. cursor: pointer;
  60. display: block;
  61. width: 250px;
  62. height: 30px;
  63. text-decoration: none;
  64. color: #000;
  65. padding: 5px 0;
  66. margin: 0;
  67. }
  68.  
  69. /*]]>*/
  70. </head>
  71.  
  72. <div style="padding: 160px 0 0 0; width: 250px; background-color: #ccc;">
  73.  
  74. <a id="l1" href="#" class="tip">New Performing Arts and Humanities Facility <span><img alt='' src ='espacio.jpg' width='240' height='100' />
  75. </span></a>
  76.  
  77. <a id="l2" href="#" class="tip">New Town on the Napa River <span><img alt='' src ='d.png' width='240' height='100' />
  78. </span></a>
  79.  
  80. <a id="l3" href="#" class="tip">Texto del link 3 <span><img alt='' src ='espacio.jpg' width='240' height='100' />
  81. </span></a>
  82.  
  83. <a id="l4" href="#" class="tip">Texto del link 3 <span><img alt='' src ='d.png' width='240' height='100' />
  84. </span></a>
  85. </div>
  86. </body>
  87. </html>
Fijate que el top negativo entre link y link crece segun sea el alto de a.tip más el padding (esto dependerá si tus textos puedan tener una o más lineas).
Y la capa contenedora tendrá que tener un padding-top lo suficientemente alto para poder contener el alto de la imagen (es a partir de ahi en que empiezas a sumar los top negativos, en el ejemplo el link 1 arranca en -160 px
Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #6 (permalink)  
Antiguo 08/03/2012, 14:51
Avatar de IsaBelM
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 5.032
Antigüedad: 15 años, 10 meses
Puntos: 1012
Respuesta: Ayudaa, HTML Rollover

a ver, con este layout se puede hacer
Cita:
<div id="cont">
<a id="a1" href="#">link1</a>
<a id="a2" href="#">link2</a>
<a id="a3" href="#">link3</a>
<a id="a4" href="#">link4</a>
<div id="img">
<img src ="img" id="i1" width="100px" height="100px" alt='' />
<img src ="img" id="i2" width="100px" height="100px" alt='' />
<img src ="img" id="i3" width="100px" height="100px" alt='' />
<img src ="img" id="i4" width="100px" height="100px" alt='' />
</div>
</div>
el css asociado sería este
Cita:
#cont {
width: 100px;
padding: 100px 0 0 0;
border: 1px solid red;
}


#cont a {
display: block;
margin-top: 20px;
}


#img, #img img {
display: none;
}


#cont a:hover ~ div#img {
display: block;
position: relative;
left: 0;
top: -200px; /* es una estimación */
}


#cont a:hover#a1 ~ div#img #i1, #cont a:hover#a2 ~ div#img #i2, #cont a:hover#a3 ~ div#img #i3, #cont a:hover#a4 ~ div#img #i4 {
display: block;
position: absolute;
left: 0;
top: 0;
}
__________________
if(ViolenciaDeGénero) {alert('MUJER ASESINADA');}

Etiquetas: html+java
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 15:31.