Foros del Web » Creando para Internet » CSS »

convertir tr creado con photoshop a menu cambiar al pasar cursor

Estas en el tema de convertir tr creado con photoshop a menu cambiar al pasar cursor en el foro de CSS en Foros del Web. Hola muy buenas estoy haciendo una pagina que la maquetado con photoshop, ya lo he pasado en html,, ahora tengo un <tr>que incluye 6 <td>que ...
  #1 (permalink)  
Antiguo 15/01/2010, 06:28
Avatar de gachon  
Fecha de Ingreso: septiembre-2004
Ubicación: En Google
Mensajes: 462
Antigüedad: 19 años, 7 meses
Puntos: 3
convertir tr creado con photoshop a menu cambiar al pasar cursor

Hola muy buenas estoy haciendo una pagina que la maquetado con photoshop, ya lo he pasado en html,, ahora tengo un <tr>que incluye 6 <td>que son 6 imagenes que quiero que sean botones, pero el problema radica es quiero cuando pase el raton por encima de una de esas imagenes cambien a otra imagen, asin es como lo estoy haciendo y no funciona.
en html le pongo el css en el "id"=disenoweb
Código PHP:
<tr>
<
td id="disenoweb" colspan="8" rowspan="2">
</
td>
.
.
.
.
</
tr
y en css le pongo esto para cuando pase el raton cambie pero eso no pasa es mas no sale ni siquiera la imagen

Código PHP:
#disenoweb a
{
background:URL('imagenes/WEB2sectores_05.jpg');
}

#disenoweb a:hover
{
background:URL('imagenes/WEB2sectores3recortar-imagenes_05.jpg');

eso es lo que pongo pero no pasa nada
aver si por favor me podeis ayudar
muchas gracias
y saludos
  #2 (permalink)  
Antiguo 15/01/2010, 07:41
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 16 años, 3 meses
Puntos: 68
Respuesta: convertir tr creado con photoshop a menu cambiar al pasar cursor

Y digo yo, por que no haces las cosas bien y creas un menú utilizando listas?
__________________
No diseñes usando tablas.
  #3 (permalink)  
Antiguo 15/01/2010, 07:50
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 15 años, 7 meses
Puntos: 20
Respuesta: convertir tr creado con photoshop a menu cambiar al pasar cursor

Aparte de como ya ha dicho Hades87, recomendarte hacer un menú con listas, veras que en tu código css estas poniendo un enlace que no existe en el html.

Prueba con

Código CSS:
Ver original
  1. #disenoweb td
  2. {
  3. background:URL('imagenes/WEB2sectores_05.jpg');
  4. }
  5.  
  6. #disenoweb td:hover
  7. {
  8. background:URL('imagenes/WEB2sectores3recortar-imagenes_05.jpg');
  9. }

La otra opción seria meter las imágenes dentro de un enlace.

Saludos¡¡
__________________
Revisa las FAQ's antes de disparar.
  #4 (permalink)  
Antiguo 15/01/2010, 08:23
Avatar de gachon  
Fecha de Ingreso: septiembre-2004
Ubicación: En Google
Mensajes: 462
Antigüedad: 19 años, 7 meses
Puntos: 3
Respuesta: convertir tr creado con photoshop a menu cambiar al pasar cursor

al final voy tener que acabar haciendolo con lista, porque quiero hacer el menu desplegable, lo malo de esto, es que en css estoy pegao y me va ha destrozar toda la estructura que tengo bien hecha en html y al pasarlo en css va hacer doloroso
voy a probar a ver que pasa y muchas gracias por las respuesta
Impostor el codigo que me ha puesto lo he probado y no me ha funcionado
de todas formas voy a probar con listas a ver que pasa si no me muero de la ansiedad,,,,por no saber css..
  #5 (permalink)  
Antiguo 15/01/2010, 08:44
Avatar de gachon  
Fecha de Ingreso: septiembre-2004
Ubicación: En Google
Mensajes: 462
Antigüedad: 19 años, 7 meses
Puntos: 3
Respuesta: convertir tr creado con photoshop a menu cambiar al pasar cursor

una cosa como se hace con lista para que cambie de imagen al pasar el cursor sobre la imagene que es un enlace , lo digo ya que el ejemplo que me paso "hades" lo hace solo con sprite, vamos que pone las dos imagenes juntas, pero yo quiero saber como se hace sin que tenga que poner la imagenes juntas por separado, que yo pueda controlar las imagenes por separado
  #6 (permalink)  
Antiguo 15/01/2010, 09:24
Avatar de gachon  
Fecha de Ingreso: septiembre-2004
Ubicación: En Google
Mensajes: 462
Antigüedad: 19 años, 7 meses
Puntos: 3
Respuesta: convertir tr creado con photoshop a menu cambiar al pasar cursor

otra prueba he hecho y tampoco me sale, no me entero
html
Código PHP:
<a href="#" id="navi"><span>inicio</span></a
css
Código PHP:
#navi a {
    
display:block;
    
width:131px;
    
height:149px;
    
text-decoration:none;
    
background-image:url(imagenes/WEB2sectores_05.jpg)

}
#navi a:hover {
    
background-image:url(imagenes/WEB2sectores_06.jpg);
    

porque no me sale, que es lo que no estoy entendiendo del css???
por favor ayudenme

Última edición por gachon; 15/01/2010 a las 09:53
  #7 (permalink)  
Antiguo 15/01/2010, 09:43
 
Fecha de Ingreso: agosto-2008
Mensajes: 469
Antigüedad: 15 años, 7 meses
Puntos: 20
Respuesta: convertir tr creado con photoshop a menu cambiar al pasar cursor

A bote pronto, sobra la etiqueta <span> del código.
__________________
Revisa las FAQ's antes de disparar.
  #8 (permalink)  
Antiguo 15/01/2010, 13:59
Avatar de hades87  
Fecha de Ingreso: diciembre-2007
Ubicación: Barcelona - España
Mensajes: 3.194
Antigüedad: 16 años, 3 meses
Puntos: 68
Respuesta: convertir tr creado con photoshop a menu cambiar al pasar cursor

gachon, trata de editar el mensaje y no postees tantas veces seguidas, que rompe un poco la dinámica.

Para que al pasar por un link te cambie de imagen solo tendrías que hacer esto:

link a:hover{ background: url(urldelaimagen.formato); }

y depsués tener en cuenta de darlo suficiente padding al enlace apra que se vea todo correcto. Por otro lado te aconsejo hacerlo con sprites y además te aconsejo encarecidamente que te pases por www.librosweb.es y te mires este tutorial para coger bien las bases del XHTML y CSS.

Espero haberte ayudado. Saludos!
__________________
No diseñes usando tablas.
  #9 (permalink)  
Antiguo 15/01/2010, 15:16
Avatar de gachon  
Fecha de Ingreso: septiembre-2004
Ubicación: En Google
Mensajes: 462
Antigüedad: 19 años, 7 meses
Puntos: 3
Respuesta: convertir tr creado con photoshop a menu cambiar al pasar cursor

muchas gracias hades tiene mucha razon, he estado mirando los manuales que me has pasado y tienen buena pinta, he buscado lo que quiero hacer y no lo encuentro solo sprite y otro con javascript,,,no se me he estoy rompiendo la cabeza y veo que no se puede,,lo unico que quiero es que una imagen1 cambie a otra imagen2 cuando pase el cursor sobre la imagen1 y que imagen1 sea un enlace y como te he dicho antes creo que con css solo no he encotrado de hacerlo, o con sprite o con javascript,, de todas formas te pido disculpa por mi torpeza y por tu interes prestado hacia mi por intentar ayudarme
muchas gracias de verdad

Etiquetas: cursor, pasar, photoshop
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 04:30.