Hola
Deiv:
Voy a intentar darte un ejemplo de cómo lo haría yo, jugando con las propiedades
margin de CSS conseguirás este efecto. Eso sí, debe haber espacio suficiente para que la imagen se agrande correctamente, aunque no necesitas un DIV para ello, fíjate:
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es">
<head>
<meta http-equiv="Content-type" content="text/html;charset=iso-8859-1" />
<meta name="Author" content="derkeNuke" />
<title>Página nueva</title>
<style type="text/css">
</style>
</head>
<body>
<p>Mauris vestibulum tempus felis. Nulla ipsum lorem, auctor nec, pretium quis, auctor eget, tortor. Suspendisse accumsan orci id nisi. Integer egestas velit at nisi. Integer laoreet fermentum erat. Aliquam mollis orci porttitor felis fringilla condimentum. Sed ultrices ligula at magna iaculis feugiat. Integer metus enim, laoreet id, feugiat at, blandit sit amet, massa. Pellentesque nunc lectus, placerat a, malesuada nec, sagittis vitae, orci. Nulla odio erat, iaculis nec, iaculis eget, pellentesque a, lacus. Donec a velit. Donec eros. Nulla metus felis, dignissim ac, condimentum id, consequat bibendum, tortor. Donec eros felis, aliquam eu, mattis non, cursus vel, justo. Phasellus justo elit, dictum at, laoreet quis, venenatis eu, libero. Cras vel mauris. Morbi nec nisi. Aliquam viverra ligula.</p>
<img id="carita" src="http://www.forosdelweb.com/images/icons/icon10.gif" style="width: 16px; height: 16px; margin-top:50px; margin-left: 50px;" />
<p>Cras at nibh nec purus lobortis tincidunt. In pretium. Vestibulum blandit sagittis leo. Aenean ut nisi. Pellentesque non nisl. Phasellus vel massa. Nam ut risus. Quisque vestibulum mi. Sed dictum. Proin mi massa, porttitor sit amet, gravida a, sollicitudin vitae, nunc.</p>
<p>
<button type="button" onclick="aumentar()">aumentala a 50 px</button>
<button type="button" onclick="reducir()">reducela a 16 px</button>
</p>
<script type="text/javascript">
<!--
// document.getElementById abreviado
function $(x) { return document.getElementById(x); }
var aumentando, reduciendo; // los procesos
function aumentar() {
// Si estan iniciados los procesos los paramos
clearInterval(aumentando);
clearInterval(reduciendo);
// Parámetros principales
var imagen = $("carita");
var hastaCuanto = 50;
// Proceso aumentativo
aumentando = setInterval( function() {
var anchuraActual = parseInt( imagen.style.width );
var alturaActual = parseInt( imagen.style.height );
if( anchuraActual<hastaCuanto && alturaActual<hastaCuanto ) { // Si podemos aumentar todavía, aumentamos
//dimensiones
imagen.style.width = anchuraActual + 1;
imagen.style.height = alturaActual + 1;
//margen
imagen.style.marginLeft = parseInt(imagen.style.marginLeft) - 1;
imagen.style.marginTop = parseInt(imagen.style.marginTop) - 1;
}
else // Si no, paramos
clearInterval(aumentando);
}, 10);
}
function reducir() {
// Si estan iniciados los procesos los paramos
clearInterval(aumentando);
clearInterval(reduciendo);
// Parámetros principales
var imagen = $("carita");
var hastaCuanto = 16;
// Proceso reductivo
reduciendo = setInterval( function() {
var anchuraActual = parseInt( imagen.style.width );
var alturaActual = parseInt( imagen.style.height );
if( anchuraActual>hastaCuanto && alturaActual>hastaCuanto ) {
//dimensiones
imagen.style.width = anchuraActual - 1;
imagen.style.height = alturaActual - 1;
//margen
imagen.style.marginLeft = parseInt(imagen.style.marginLeft) + 1;
imagen.style.marginTop = parseInt(imagen.style.marginTop) + 1;
}
else
clearInterval(reduciendo);
}, 10);
}
// -->
</script>
</body>
</html>
Espero que te inspire para encontrar la solución.
Un saludo
