Tema: Ayudaa, HTML Rollover
Ver Mensaje Individual
  #5 (permalink)  
Antiguo 07/03/2012, 13:01
Avatar de emprear
emprear
Colaborador
  
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 10 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. <head>
  4. <title>titulo</title> 
  5. <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  6.  
  7. <style type="text/css">
  8. /*<![CDATA[*/
  9.  
  10. /*  código para el Tooltip  */
  11. .tip {
  12. position: relative;
  13. cursor: default;
  14. }
  15. .tip span {
  16. display: none;
  17. position: absolute;
  18. width: 250px;
  19. z-index: 100;
  20. top: 15px;
  21. left: 20px;
  22. width: 225px;
  23. padding: 5px;
  24. }
  25.  
  26. *:hover#l1 span {
  27. display: block;
  28. left: 0px;
  29. top: -160px;
  30. padding: 0;
  31. margin: 0;
  32. }
  33.  
  34. *:hover#l2 span {
  35. display: block;
  36. left: 0px;
  37. top: -200px;
  38. padding: 0;
  39. margin: 0;
  40. }
  41.  
  42. *:hover#l3 span {
  43. display: block;
  44. left: 0px;
  45. top: -240px;
  46. padding: 0;
  47. margin: 0;
  48. }
  49.  
  50. *:hover#l4 span {
  51. display: block;
  52. left: 0px;
  53. top: -280px;
  54. padding: 0;
  55. margin: 0;
  56. }
  57.  
  58.  
  59. a.tip{
  60. cursor: pointer;
  61. display: block;
  62. width: 250px;
  63. height: 30px;
  64. text-decoration: none;
  65. color: #000;
  66. padding: 5px 0;
  67. margin: 0;
  68. }
  69.  
  70. /*]]>*/
  71. </style>
  72. </head>
  73. <body>
  74.  
  75. <div style="padding: 160px 0 0 0; width: 250px; background-color: #ccc;">
  76.  
  77. <a id="l1" href="#" class="tip">New Performing Arts and Humanities Facility <span><img alt='' src ='espacio.jpg' width='240' height='100' />
  78. </span></a>
  79.  
  80. <a id="l2" href="#" class="tip">New Town on the Napa River <span><img alt='' src ='d.png' width='240' height='100' />
  81. </span></a>
  82.  
  83. <a id="l3" href="#" class="tip">Texto del link 3 <span><img alt='' src ='espacio.jpg' width='240' height='100' />
  84. </span></a>
  85.  
  86. <a id="l4" href="#" class="tip">Texto del link 3 <span><img alt='' src ='d.png' width='240' height='100' />
  87. </span></a>
  88. </div>
  89. </body>
  90. </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.