Te explicas, de hecho yo pienso que es la mejor manera.
Digamos que tenemos este código.
<a href="#"><img scr="..." /></a>
Pues así, de seguido yo haría esto (por poner un ejemplo, cada uno que lo
adapte a lo que necesite)
a {
display: block;
height: 50px;
width: 50px;
padding: 50px;
}
img {
display: block;
width: 100%;
}
a:hover {
padding: 0;
}
Y así conseguiría que la imagen de dentro se agrandara sin desplazar al
resto de los elementos de la página. Esto está hecho deprisa y corriendo,
por supuesto es posible e incluso aconsejable, según la situación, contar
con un contenedor envolvente o wrapper, pero la base aquí está ;)
Un saludo, David Merino.
P.D.: No lo he probado (soy muuu vago), así que no seais muy crítcos si
falla un poquillo. xD
On 12/14/05, jEsuSdA 8) <[EMAIL PROTECTED]> wrote:
>
> Muy bien conseguido.
> Eso es a lo que yo me refería.
> La incomodidad a la que hacía referencia en mi mail anterior era que, al
> cambiar de tamaño, todo elemento que se encuentre al lado de la imagen,
> se desplaza, de ahí que no sea muy recomendable lo de aumentar tamaños
> de elementos.
>
> LO que tal vez se pudiea hacer para solventar esto es meter cada imagen
> en una capa con un tamaño mayor o igual que el tamaño máximo que pueda
> alcanzar la imagen contenida en su interior.
> De ese modo, la imagen aumenta y disminuye de tamaño sin desplazar lo
> que haya a su alrededor.
> No se si me explico. ;)
>
> Jose Antonio Riquelme escribió:
>
> >Perdon, cuando redacté el mensaje tenia el 2 a pelo, y luego le puse
> >el parametro del tamaño.
> >
> >El ejemplo lo hace aumentando por 2, pero la funcion admite cualquier
> >numero, incluso 0 :P
> >
> >El 14/12/05, Jose Antonio Riquelme<[EMAIL PROTECTED]> escribió:
> >
> >
> >>Forma Javascript
> >>
> >>Este codigo coge la imagen y multiplica el ancho y el alto por 2.
> >>Importante poner el atributo ID al IMG, es el "identificador unico" de
> >>cada imagen.
> >>
> >>Saludos y espero que te sea util.
> >>
> >>PD. El codigo es mejorable, lo sé.
> >>
> >><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
> >>"http://www.w3.org/TR/html4/loose.dtd";>
> >><html>
> >><head>
> >><title>Documento sin título</title>
> >><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
> >></head>
> >>
> >><body>
> >>
> >><img name="dinosaurio" id="dinosaurio" src="avatar.gif" border="0"
> >>onMouseOver="javascript:aumenta_tamanio(this.name,2);"
> >>Onmouseout="javascript:disminuye_tamanio(this.name,2);">
> >><script language= "JavaScript" type="text/javascript">
> >> function aumenta_tamanio(nombre_imagen,cuanto) {
> >> var ancho, alto;
> >>
> >> I=document.getElementById(nombre_imagen);
> >> ancho=I.width;
> >> alto=I.height;
> >> I.width=cuanto*ancho;
> >> I.height=cuanto*alto;
> >>
> >> }
> >> function disminuye_tamanio(nombre_imagen,cuanto) {
> >> I=document.getElementById(nombre_imagen);
> >> I.width=I.width/cuanto;
> >> I.height=I.height/cuanto;
> >> }
> >>
> >></script>
> >>
> >></body>
> >></html>
> >>
> >>
> >>
> >>
> >>
> >_______________________________________________
> >Lista de distribución Ovillo
> >Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
> >Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> http://ovillo.org/mailman/listinfo/ovillo
> >
> >
> >
>
>
>
> _______________________________________________
> Lista de distribución Ovillo
> Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
> Puedes modificar tus datos o desuscribirte en la siguiente dirección:
> http://ovillo.org/mailman/listinfo/ovillo
>
>
>
_______________________________________________
Lista de distribución Ovillo
Para escribir a la lista, envia un correo a Ovillo@lists.ovillo.org
Puedes modificar tus datos o desuscribirte en la siguiente dirección:
http://ovillo.org/mailman/listinfo/ovillo
