Foros del Web » Creando para Internet » CSS »

Duda html ps y rollover css

Estas en el tema de Duda html ps y rollover css en el foro de CSS en Foros del Web. Bueno [email protected] mi nombre es andrea y me tope con un problemita estoy haciendo una prueba para un banner en photoshop les pongo la imagen ...
  #1 (permalink)  
Antiguo 30/06/2010, 16:56
 
Fecha de Ingreso: junio-2010
Mensajes: 8
Antigüedad: 7 años, 5 meses
Puntos: 0
Duda html ps y rollover css

Bueno [email protected] mi nombre es andrea y me tope con un problemita

estoy haciendo una prueba para un banner en photoshop les pongo la imagen de el cutre sketch que hise para que se den una idea.

http://img441.imageshack.us/img441/8833/sketchbanner.png
(no supe ponerla en spoiler asi que dejo el link espero no moleste)

al yo dividirla con photoshop me genera este codigo
Código:
<html>
<head>
<title>Sin título-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Sin título-1) -->
<table id="Tabla_01" width="1280" height="960" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="6">
            <img src="im&#xe1;genes/Sin-t&#xed;tulo-1_01.png" width="1280" height="510" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="im&#xe1;genes/Sin-t&#xed;tulo-1_02.png" width="231" height="56" alt=""></td>
        <td>
            <img src="im&#xe1;genes/Sin-t&#xed;tulo-1_03.png" width="217" height="56" alt=""></td>
        <td>
            <img src="im&#xe1;genes/Sin-t&#xed;tulo-1_04.png" width="251" height="56" alt=""></td>
        <td>
            <img src="im&#xe1;genes/Sin-t&#xed;tulo-1_05.png" width="217" height="56" alt=""></td>
        <td>
            <img src="im&#xe1;genes/Sin-t&#xed;tulo-1_06.png" width="194" height="56" alt=""></td>
        <td>
            <img src="im&#xe1;genes/Sin-t&#xed;tulo-1_07.png" width="170" height="56" alt=""></td>
    </tr>
    <tr>
        <td colspan="6">
            <img src="im&#xe1;genes/Sin-t&#xed;tulo-1_08.png" width="1280" height="394" alt=""></td>
    </tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
haora la cuestion es que en donde dice link1, link2 etc... con css hacer un rollover al poner el maouse encima utilizando una imagen como esta

http://img25.imageshack.us/img25/3052/botonjo.jpg

se puede hacer con dreamweaver.??
o que codigo tendria que poner a cada imagen para que ejecute el rollover con css.??



se que son preguntas tontas pero apenas estoy aprendiendo con esto

espero no incomode mi duda
besos
  #2 (permalink)  
Antiguo 30/06/2010, 20:24
Avatar de daidalos  
Fecha de Ingreso: enero-2005
Mensajes: 437
Antigüedad: 12 años, 10 meses
Puntos: 7
Respuesta: Duda html ps y rollover css

debes aprender html y css para hacer eso, la forma básica es que a cada etiqueta <img> la rodees con una etiqueta <a> y luego crees u estilo que afecte a la etiqueta <a> cuando esta en estado hover. Mira:

Código:
<html>
<head>
<title>Sin título-1</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<STYLE type="text/css">
   a {}
   
   a:hover {border: 1px solid #F0F}
 </STYLE>


</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Sin título-1) -->
<table id="Tabla_01" width="1280" height="960" border="0" cellpadding="0" cellspacing="0">
    <tr>
        <td colspan="6">
            <img src="im&#xe1;genes/Sin-t&#xed;tulo-1_01.png" width="1280" height="510" alt=""></td>
    </tr>
    <tr>
        <td>
            <a href="pagina.html"><img src="im&#xe1;genes/Sin-t&#xed;tulo-1_02.png" width="231" height="56" alt=""></a></td>
        <td>
            <a href="pagina.html"><img src="im&#xe1;genes/Sin-t&#xed;tulo-1_03.png" width="217" height="56" alt=""></a></td>
        <td>
            <a href="pagina.html"><img src="im&#xe1;genes/Sin-t&#xed;tulo-1_04.png" width="251" height="56" alt=""></a></td>
        <td>
            <a href="pagina.html"><img src="im&#xe1;genes/Sin-t&#xed;tulo-1_05.png" width="217" height="56" alt=""></a></td>
        <td>
            <a href="pagina.html"><img src="im&#xe1;genes/Sin-t&#xed;tulo-1_06.png" width="194" height="56" alt=""></a></td>
        <td>
            <a href="pagina.html"><img src="im&#xe1;genes/Sin-t&#xed;tulo-1_07.png" width="170" height="56" alt=""></a></td>
    </tr>
    <tr>
        <td colspan="6">
            <img src="im&#xe1;genes/Sin-t&#xed;tulo-1_08.png" width="1280" height="394" alt=""></td>
    </tr>
</table>
<!-- End Save for Web Slices -->
</body>
</html>
  #3 (permalink)  
Antiguo 02/07/2010, 14:35
 
Fecha de Ingreso: junio-2010
Mensajes: 8
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: Duda html ps y rollover css

Gracias daidalos por contestar y siento el no poder contestar antes
me ayudo a comprender el css, html e aprendido por mi cuenta pero nunca habia llegado a la necesidad de el css ya que hacia edits simples a un codigo ya creado.

y aunque logre algunas cosillas interesantes moviendole a los atributos de el css con dreamweaver :D no logre lo que buscaba

explico lo que intento hacer:
solo en la imagen de el banner tomemos como referencia la imagen que dice link1
lo que intento hacer es utilizar esta imagen


pero que solo se vea la mitad y al pasar el maouse se vea la otra mitad, es decir un rollover con solo una imagen

no se si se pueda :S expliquenme porfavo entiendo rapido solo necesito alguien que me explique.

porque tan necia en este aspecto de el css estoy editando el banner de un myspace de una amiga y para que diera un look mas pro :P.... decidi insertar los rollovers y tengo entendido que para myspace solo se usa css asi que porfavor

espero que no desepere mi duda

gracias daidalo me ayudaste a comprender un poco mas pero no he podido hacer esto ultimo
Besos y espero que alguien me ayude :P
  #4 (permalink)  
Antiguo 02/07/2010, 16:07
Avatar de daPhyre
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: [email protected] (Redirects to 127.0.0.1)
Mensajes: 2.404
Antigüedad: 9 años, 9 meses
Puntos: 142
Respuesta: Duda html ps y rollover css

Hola Andrea.

A esa técnica se le llama Sprites CSS. Aquí te dejo un ejemplo práctico, seguro tú podrás adaptarlo sin problemas.

http://source.octabot.net/web-tips/menu-num-i.html

Si tienes dudas, avísanos. Suerte
__________________
<signs>daPhyre</signs>
Jugaa.me


Adios al dolor de cabeza de IE...
  #5 (permalink)  
Antiguo 07/08/2010, 13:31
 
Fecha de Ingreso: junio-2010
Mensajes: 8
Antigüedad: 7 años, 5 meses
Puntos: 0
Respuesta: Duda html ps y rollover css

Bueno ya lo pueden cerrar Duda Resuelta Muchas gracias por la ayuda brindada

Etiquetas: html, rollover
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 16:52.