Foros del Web - Ver Mensaje Individual

emprear · #2 (**permalink**) 24/01/2012, 13:04

Esta no es una solución tan solo una aproximación

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Html5</title>
<style type="text/css">
/*<![CDATA[*/
article{
        height:130px;
        overflow:hidden;
        transition:height 2s;
        -webkit-transition:height 2s;
        -ms-transition:height 2s;
        -op-transition:height 2s;
        -moz-transition:height 2s;
    }
 
article:focus{
        height:280px;
        outline:none;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
function desactivar(){
document.getElementById('xxx').contentEditable= false;
}
function activar(){
document.getElementById('xxx').contentEditable= true;
}
//]]>
</script>
</head>
<body>
<article id="xxx" contenteditable="true">
<h3>titulo</h3>
<img src="correcto01.png" width="800" height="100" alt="" onmouseover="desactivar();" onmouseout="activar()"/>
<p onclick="desactivar();" onmouseout="activar()">un texto cualquiera</p>
</article>
</body>
</html>

Fijate que el h3 sigue siendo editable porque no contiene los eventos de javascript.
Por lo visto lo del conteneditable lo pusiste para que el article recibiera el focus, pero si no vas a editar nada, quizás sea más práctico usa la pseudoclase :hover.

El efecto lo veo individualmente, pero habría que analizar el conjunto de la aplicación
Saludos