Duda html ps y rollover css

Zera · #1 (**permalink**) 30/06/2010, 15:56

Bueno chic@s 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

daidalos · #2 (**permalink**) 30/06/2010, 19:24

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>

Zera · #3 (**permalink**) 02/07/2010, 13:35

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

daPhyre · #4 (**permalink**) 02/07/2010, 15:07

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

Zera · #5 (**permalink**) 07/08/2010, 12:31

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