Hola:
Inspirado en el ejemplo de
kahlito te he propuesto mi idea:
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">
#enlace1 {
display: block;
background: red;
width: 600px;
height: 300px;
}
#enlace1:hover {
display: block;
background: #880000;
width: 600px;
height: 300px;
}
</style>
</head>
<body>
<p>
<a id="enlace1" href="http://www.forosdelweb.com">
Este es el párrafo que te lleva a forosdelweb.com incluyendo todo un div entero.<br/>
Imagina que quieres seguir el contenido y así hasta hacer un div bastante largo...
</a>
</p>
</body>
</html>
Teniendo en cuenta que los elementos A sólo pueden contener elementos
%inline que no sean A (esto es:
<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; | %formctrl;">
Lo que viene siendo
texto, (TT | I | B | BIG | SMALL) |
(EM | STRONG | DFN | CODE | SAMP | KBD | VAR | CITE | ABBR | ACRONYM) |
(A | IMG | OBJECT | BR | SCRIPT | MAP | Q | SUB | SUP | SPAN | BDO) |
(INPUT | SELECT | TEXTAREA | LABEL | BUTTON)
)
(todo esto en la
especificacion 4.01)
Doy por supuesto que no vas a colocar un DIV dentro de un A.
De lo demás, H2's DIV's y textos que cambian y cosas que se colorean no he entendido nada. He intentado descifrarlo. Doy por sabido que conoces javascript y sabes programar en ello. He hecho un efecto mediante el cual al hacer click en el DIV es como si se hiciera click en el enlace, es decir, vamos a donde apunta el enlace. No me acuerdo donde vi la idea original, no he podido encontrarlo:
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">
.pastilla-menu {
background: #cc0000;
}
.pastilla-menu-over {
background: red;
}
.menu {
color: #0f0;
}
</style>
</head>
<body>
<script type="text/javascript">
<!--
// document.getElementById abreviado
function $(x) { return document.getElementById(x); }
function over(elem) {
elem.className='pastilla-menu-over';
$('txt-razones').innerHTML='blablabla';
}
function out(elem) {
elem.className='pastilla-menu';
$('txt-razones').innerHTML='';
}
function expandirEnlace(id) {
var elEnlace = $(id);
// subimos hasta que encontramos un div
var padre = elEnlace.parentNode;
while( padre.nodeType==1 && padre.tagName.toUpperCase()!="DIV" )
padre = padre.parentNode;
padre.style.cursor = "pointer";
padre.style.cursor = "hand";
padre.onclick = function() {
self.location.href = elEnlace.href;
}
}
window.onload = function() {
expandirEnlace("enlaceRazon");
}
// -->
</script>
<div onmouseover="over(this)" onmouseout="out(this)" class="pastilla-menu">
<h2><a id="enlaceRazon" class="menu" href="index.php?fuseaction=razon">razon</a></h2>
<p class="subtitulo" id="txt-razones"> </p>
</div>
</body>
</html>
Bueno, no es la mejor solución porque usa javascript, hay mejores maneras de hacerlo, pero con tantos requisitos... no sé cómo se podría hacer sin javascript. No sé hasta que punto podrías transformarlo en ésto:
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">
#enlaceRazon {
display: block;
height: 300px;
width: 500px;
background: #cc0000;
}
#enlaceRazon span {
display: block;
margin-top: 3em;
}
#enlaceRazon:hover {
display: block;
height: 300px;
width: 500px;
background: red;
}
</style>
</head>
<body>
<script type="text/javascript">
<!--
// document.getElementById abreviado
function $(x) { return document.getElementById(x); }
function over(elem) {
elem.className='pastilla-menu-over';
$('txt-razones').innerHTML='blablabla';
}
function out(elem) {
elem.className='pastilla-menu';
$('txt-razones').innerHTML='';
}
// -->
</script>
<a id="enlaceRazon" onmouseover="over(this)" onmouseout="out(this)">
<em>razon</em>
<span class="subtitulo" id="txt-razones"> </span>
</div>
</body>
</html>
Espero que haya aportado algo.
Un saludo
