Foros del Web » Creando para Internet » Diseño web »

Un efecto muy llamativo, ¿Cómo hacerlo?

 Estas en el tema de Un efecto muy llamativo, ¿Cómo hacerlo? en el foro de Diseño web en Foros del Web. Hola me gustaría saber, ¿Cómo puedo lograr hacer el efecto de la sección de Videos de la siguiente página: http://www.tnt.tv/series/microsite/fallingskies/ Lo que más he logrado ...
  #1 (permalink)  
Antiguo 12/06/2011, 17:29
 
Fecha de Ingreso: septiembre-2008
Mensajes: 221
Antigüedad: 15 años, 7 meses
Puntos: 1
Un efecto muy llamativo, ¿Cómo hacerlo?
Hola me gustaría saber, ¿Cómo puedo lograr hacer el efecto de la sección de Videos de la siguiente página: http://www.tnt.tv/series/microsite/fallingskies/

Lo que más he logrado es: http://extremegamex1.gofreeserve.com...os_1.2.26.html

Espero una pronta respuesta, Gracias de antemano :)
  #2 (permalink)  
Antiguo 13/06/2011, 10:06
 
Fecha de Ingreso: febrero-2009
Mensajes: 472
Antigüedad: 15 años, 2 meses
Puntos: 14
Respuesta: Un efecto muy llamativo, ¿Cómo hacerlo?
Hola ambigus. Pues por lo que veo en la seccion de videos, si te refieres al efecto de los videos que se encuentran en el centro de la web, por lo que veo, podrias hacerlo de la siguiente manera.
Puedes hacer una tabla de 5 columnas y dos filas, luego usas las propiedades colspan y rowspan para decir si abarcan mas de una fila o mas de una columna, si te fijas el primer video que aparece en la pantalla ocupa dos columnas con respecto a los dos videos de abajo, por lo que esta casilla de la tabla tendria la propiedad colspan="2"
Algo parecido pasaria con el video que ocupa dos filas en cuyo caso sera rowspan="2"
Por otro lado el efecto de pasar el raton por encima y que cambia la imagen, con el boton de play en medio lo puedes conseguir mediante javascript, llamando a una funcion que lo que haga sea cambiar la imagen de fondo de esa casilla de la tabla. A ver si un ejemplillo hace q te aclares un poco mejor, por que yo explicandome soy lo peor del mundo jejeje. Veamos.

Te voy a poner por ejmplo el primer video que ocupa dos columnas (el ejemplo de ocupar dos filas seria el mismo solo que en lugar de tener la propiedad colspan se usaria la propiedad rowspan como te comente antes)

Bueno antes de empezar te comento, que lo que yo llamo imagen1 seria la imagen que sale de fondo normalmente, e imagen2 seria la que sale cuando pasas el raton por encima.

Código HTML: 
Ver original
  1. <table>
  2.  <tr>
  3.    <td colspan="2" onmouseover='this.style.background="url(imagen2)"'   onmouseout='this.style.background="url(imagen1)"' background="imagen1"></td>
  4.  </tr>
  5. </table>

Lo que vemos en este ejemplo es que mediante la propiedad background definimos que por defecto la imagen es imagen1, luego cuando pasamos el raton por encima (onmouseover) cambiamos la imagen a imagen2 y cuando sacamos el raton del interior de la celda (onmouseout) volvemos a mostrar la imagen1.

Espero haberte servido de ayuda. Para cualquier problema no dudes en contestar. Mucha suerte con tu proyecto.

Un saludo.
Pinty
  #3 (permalink)  
Antiguo 15/06/2011, 07:41
 
Fecha de Ingreso: septiembre-2008
Mensajes: 221
Antigüedad: 15 años, 7 meses
Puntos: 1
Respuesta: Un efecto muy llamativo, ¿Cómo hacerlo?
Hola Pinty agradesco mucho tu ayuda. Si he entendido muy bien todo el efecto me has explicado. Ha salido muy bien, sin embargo, resulta que necesito que la imagen que cambie sea la que está en el DIV, osea:

Código HTML: 
Ver original
  1. <div id="windows" onmouseover='this.style.background="url(windows_icon.png)"'   onmouseout='this.style.background="url(video_1.1.jpg)"' "><img src="video_1.jpg" width="244" height="138" /></div>

Si te fijas muy bien tengo de imagen:

Código HTML: 
Ver original
  1. img src="video_1.jpg" width="244" height="138"

Con sus cualidades especifícas, y es que resulta que lo que le hago a esa imagen es insertarle un efecto muy llamativo, como verás en este link:

http://extremegamex1.gofreeserve.com...os_1.2.26.html

Al hacer click en la imagen de HD o SD, aparece el efecto, es el mismo principio pero ahora con la imagen directamente.

Osea el código queda:
Código HTML: 
Ver original
  1. <div id="windows"><a href='http://youtube.com/v/a2UCnblmOMY?hd=1' class='lightview' rel='set[myset][flash]' title='Crysis :: caption :: width: 800, height: 600'><img src='sd_icon_2.png' alt=''/></a></div>

y al agregarle lo que me enseñaste:

Código HTML: 
Ver original
  1. <div id="windows" onmouseover='this.style.background="url(windows_icon.png)"'   onmouseout='this.style.background="url(video_1.1.jpg)"' "><a href='http://youtube.com/v/a2UCnblmOMY?hd=1' class='lightview' rel='set[myset][flash]' title='Crysis :: caption :: width: 800, height: 600'><img src='sd_icon_2.png' alt=''/></a></div>

Sin embargo lo que quiero es que se interactue ese cambio de imagenes de mouse encima y demás con la misma IMAGEN que yo pongo, osea: " <img src='sd_icon_2.png' " con la imagen que yo pongo, no con la imagen de fondo del DIV, sino con la que yo pongo.

¿Es eso posible?.

Espero una pronta respuesta.
  #4 (permalink)  
Antiguo 15/06/2011, 18:43
 
Fecha de Ingreso: febrero-2009
Mensajes: 472
Antigüedad: 15 años, 2 meses
Puntos: 14
Respuesta: Un efecto muy llamativo, ¿Cómo hacerlo?
Ah comprendo, quieres cambiar la imagen que esta dentro del <div>, no la imagen que esta de fondo del <div>. Puedes hacer lo siguiente a ver si esto te funciona. Te comento.

Suponemos que tienes la siguiente imagen dentro de tu div

Código HTML: 
Ver original
  1. <div id="contenido">
  2. <img id="imagen1" alt="imagen" src="miImagen1.jpg" onmouseover="cambiarImagen1();" onmouseout="cambiarImagen2();"/>
  3. </div>

Como puedes ver tenemos dos funciones que se corresponden con las acciones onmouseover (cuando pasamos el raton por encima) y onmouseout (cuando quitamos el raton de por encima)
Cada evento hace cosas diferentes asi que usaremos dos funciones javascript diferentes aunque su codigo sea el mismo, veamos.

Código Javascript: 
Ver original
  1. function cambiarImagen1(){
  2.     var imagen = document.getElementById('imagen1');
  3.     imagen.src = 'images/miImagen2.jpg';
  4. }

Código Javascript: 
Ver original
  1. function cambiarImagen2(){
  2.     var imagen = document.getElementById('imagen1');
  3.     imagen.src = 'images/miImagen1.jpg';
  4. }

Espero que este pequeño ejemplo te sirva de ayuda y no tienes nada que agradecerme
Mucha suerte

Un saludo
Pinty
  #5 (permalink)  
Antiguo 16/06/2011, 21:29
 
Fecha de Ingreso: septiembre-2008
Mensajes: 221
Antigüedad: 15 años, 7 meses
Puntos: 1
Respuesta: Un efecto muy llamativo, ¿Cómo hacerlo?
Hola Pinty, he tomado las recomandaciones que me diste, mira como voy:

http://extremegamex1.gofreeserve.com...os_1.2.33.html

Me ha funcionado, lo de cambiar la imagen y demás, sin embargo mira que se me ha destrozado el estilo que llevaba antes:

http://extremegamex1.gofreeserve.com/aprendiendocss/videos_1.2.29.html

Podrías porfavor indicarme dónde está mi error?

Espero una pronta respuesta. :)
  #6 (permalink)  
Antiguo 17/06/2011, 07:01
 
Fecha de Ingreso: febrero-2009
Mensajes: 472
Antigüedad: 15 años, 2 meses
Puntos: 14
Respuesta: Un efecto muy llamativo, ¿Cómo hacerlo?
Hola ambigus. Por lo que veo en los enlaces que me pasaste el problema es que se te descoloca el div de la derecha.
Puedes enseñarme como tienes el codigo css de los dos div??
Se me ocurren dos soluciones. Me terlos en una tabla de una fila y dos columnas, de este modo forzarias a su posicion, pero es un pelin chapuzas jeje. La otra opcion que se me ocurre, es que hagas los div flotantes, y uno flote a la derecha y el otro a la izquierda. Por ultimo usar posiciones absolutas para ambos div.
Lo mejor para ayudarte seria que pusieses aqui el codigo y echandole un ojo te ayudariamos mucho mejos.

Un saludo
Pinty
  #7 (permalink)  
Antiguo 17/06/2011, 11:21
 
Fecha de Ingreso: septiembre-2008
Mensajes: 221
Antigüedad: 15 años, 7 meses
Puntos: 1
Respuesta: Un efecto muy llamativo, ¿Cómo hacerlo?
Hola Pinty,

Agradesco mucho tu ayuda. Te envio el código CSS de los DIVs. y también el código CSS global.

CSS de los DIVs:

Este DIV:

Código: 
<div id="redondeado1">
<div id="windows"><img id="imagen1" width="244" height="138" alt="imagen" src="video_1.jpg" onmouseover="cambiarImagen1();" onmouseout="cambiarImagen2();"/>
Tiene este CSS:

Código CSS: 
Ver original
  1. #redondeado1{
  2. -khtml-border-radius: 10px;
  3. -ms-border-radius: 10px;
  4. -o-border-radius: 10px;
  5. -moz-border-radius: 10px;
  6. -webkit-border-radius: 10px;
  7. border-radius: 10px;
  8. background-color:#FFF;
  9. margin-left:50px;
  10. margin-right:30px;
  11. padding-right: 0px;
  12. height:295px;
  13. width:260px;
  14. padding-left: 15px;
  15. padding-top: 10px;
  16. } 
  17.  
  18. #windows {
  19.  
  20. float:left;
  21. height:150px;
  22. width:244px;
  23. padding-left: 0px;
  24. padding-right: 5px;
  25. padding-top: 0px;
  26. padding-bottom: 0px;
  27. margin-left:0px;
  28. background:url(video_1.1.jpg) no-repeat;
  29. }


CSS Global:

Código CSS: 
Ver original
  1. <style type="text/css">
  2.  
  3. #fondo {
  4.  
  5. height:425px;
  6. width:893px;
  7. background:url(http://extremegamex1.gofreeserve.com/aprendiendocss/images/background_post.png) no-repeat;
  8. margin-top: 5px;
  9. margin: 0 auto;
  10.  
  11. }
  12.  
  13.  
  14.  
  15.  
  16. #windows {
  17.  
  18. float:left;
  19. height:150px;
  20. width:244px;
  21. padding-left: 0px;
  22. padding-right: 5px;
  23. padding-top: 0px;
  24. padding-bottom: 0px;
  25. margin-left:0px;
  26. background:url(video_1.1.jpg) no-repeat;
  27. }
  28.  
  29. #ram {
  30.  
  31. float:left;
  32. height:55px;
  33. width:55px;
  34. padding-left: 0px;
  35. padding-right: 5px;
  36. padding-top: 10px;
  37. padding-bottom: 0px;
  38.  
  39. }
  40.  
  41. #cpu {
  42.  
  43. float:left;
  44. height:55px;
  45. width:55px;
  46. padding-left: 0px;
  47. padding-right: 5px;
  48. padding-top: 8px;
  49. padding-bottom: 0px;
  50.  
  51. }
  52.  
  53. #gpu {
  54.  
  55.  
  56. height:60px;
  57. width:250px;
  58. padding-left: 60px;
  59. padding-right: 5px;
  60. padding-top: 3px;
  61. padding-bottom: 0px;
  62. background:url(gpu_icon.png) no-repeat;
  63.  
  64. }
  65.  
  66. #hd {
  67.  
  68.  
  69. height:40px;
  70. width:250px;
  71. padding-left: 60px;
  72. padding-right: 5px;
  73. padding-top: 12px;
  74. padding-bottom: 0px;
  75. background:url(hard_disk_icon.png) no-repeat;
  76.  
  77. }
  78.  
  79. #menu ul{
  80. list-style-type: none;
  81. }
  82.  
  83. #menu li{
  84. width:150px;
  85. height:38px;
  86. font:14px Verdana;
  87. background:url(http://extremegamex1.gofreeserve.com/aprendiendocss/images/boton_menu_1.png) no-repeat center;
  88. text-align:center;
  89. color: #FFF;
  90. line-height:38px;
  91. display: inline-block;
  92. margin: 0 4px;
  93. }
  94.  
  95. #redondeado1{
  96. -khtml-border-radius: 10px;
  97. -ms-border-radius: 10px;
  98. -o-border-radius: 10px;
  99. -moz-border-radius: 10px;
  100. -webkit-border-radius: 10px;
  101. border-radius: 10px;
  102. background-color:#FFF;
  103. margin-left:50px;
  104. margin-right:30px;
  105. padding-right: 0px;
  106. height:295px;
  107. width:260px;
  108. padding-left: 15px;
  109. padding-top: 10px;
  110. } 
  111.  
  112. #redondeado2{
  113. -khtml-border-radius: 10px;
  114. -ms-border-radius: 10px;
  115. -o-border-radius: 10px;
  116. -moz-border-radius: 10px;
  117. -webkit-border-radius: 10px;
  118. border-radius: 10px;
  119. background-color:#FFF;
  120. margin-left:50px;
  121. margin-right:30px;
  122. padding-right: 0px;
  123. height:295px;
  124. width:260px;
  125. padding-left: 15px;
  126. padding-top: 10px;
  127. } 
  128.  
  129. #titulo1{
  130. background:url(http://extremegamex1.gofreeserve.com/aprendiendocss/images/descripcion_bar.png) no-repeat;
  131. margin-left:90px;
  132. margin-right:30px;
  133. padding-right: 5px;
  134. margin-top:0px;
  135. height:30px;
  136. width:180px;
  137. padding-left: 10px;
  138. padding-top: 7px;
  139. font:15px Verdana;
  140. color: white;
  141. text-align:center;
  142.  
  143. } 
  144.  
  145. #titulo2{
  146. background:url(http://extremegamex1.gofreeserve.com/aprendiendocss/images/descripcion_bar.png) no-repeat;
  147. margin-left:90px;
  148. margin-right:30px;
  149. padding-right: 5px;
  150. margin-top:0px;
  151. height:30px;
  152. width:180px;
  153. padding-left: 10px;
  154. padding-top: 7px;
  155. font:15px Verdana;
  156. color: white;
  157. text-align:center;
  158.  
  159. } 
  160.  
  161.  
  162. #requisitos_minimos{
  163.  
  164. float:left;
  165. margin-left:15px;
  166. margin-right:15px;
  167. padding-right: 5px;
  168. margin-top:0px;
  169. height:300px;
  170. width:300px;
  171. padding-left: 0px;
  172. padding-top: 0px;
  173.  
  174. } 
  175.  
  176. #requisitos_recomendados{
  177.  
  178. float:left;
  179. margin-left:15px;
  180. margin-right:0px;
  181. padding-right: 5px;
  182. margin-top:0px;
  183. height:300px;
  184. width:350px;
  185. padding-left: 0px;
  186. padding-top: 0px;
  187.  
  188. } 
  189.  
  190. .simple {text-decoration: none; color:#FFF}
  191.  
  192. </style>

Quisiera detallar, que estoy tratando de no utilizar tablas, porque me digieron que era "Arcaico".

Gracias de antemano,
Espero una pronta respuesta. :)
  #8 (permalink)  
Antiguo 19/06/2011, 19:07
 
Fecha de Ingreso: febrero-2009
Mensajes: 472
Antigüedad: 15 años, 2 meses
Puntos: 14
Respuesta: Un efecto muy llamativo, ¿Cómo hacerlo?
Hola ambigus. En primer lugar disculpa por tardar tanto en responder. Con respecto al codigo, por las que miro y hago pruebas no se donde puede estar el error, lo siento mucho. Espero que alguien mas en este foro le pueda echar una ayuda a nuestro amigo.
Lo unico que se me ocurre es que hagas la prueba de quitar el float y plantarlo como absoluto a ver que pasa, y hacer pruebas asi. Si lo de utilizar tablas es arcaico, pero hombre si se necesita asi en plan a la desesperada jaja, no pasa nada por una vez.

Lo siento mucho por no poder serte de mas ayuda, no obstante si veo algo que te pueda ayudar no dudes que te lo hare saber.

Mucha suerte. Un saludo
Pinty

Etiquetas: efecto, hacerlo
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


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 01:07.