Bueno veamos, esto es bastante complicao deesplicar. lo que estoy haciendo es:
cojo esta imagen:
y mediante clipping y posiciones absolutas la convierto en 44 imagenes (4x11) pekeñas como esta:
Entonces lo que me queda es algo asi:
Vale, ahora veamos la parte seria del tema. El codigo es php, pero si alguien no controla y puede aportar algo tambien le pego el html generado. El codigo php es el siguiente:
Código PHP:
<script language="JavaScript" type="text/javascript">
function hazClip(id,t,r,b,l){
if(document.all){
obj=document.all[id]
obj.style.clip="rect("+t+","+r+","+b+","+l+")";
obj.clippedT=t;
obj.clippedR=r;
obj.clippedB=b;
obj.clippedL=l;
}
else if(document.layers){
obj=document.layers[id];
obj.clip.top=obj.clippedT=t;
obj.clip.right=obj.clippedR=r;
obj.clip.bottom=obj.clippedB=b;
obj.clip.left=obj.clippedL=l;
}
else if(document.getElementById){
obj=document.getElementById(id)
obj.style.clip="rect("+t+","+r+","+b+","+l+")";
obj.clippedT=t;
obj.clippedR=r;
obj.clippedB=b;
obj.clippedL=l;
}
}
function cabezaMouseOver(id) {
obj=document.getElementById(id);
anterioresClips=new Array( obj.clippedT , obj.clippedR , obj.clippedB , obj.clippedL );
hazClip(id, anterioresClips[0]-2 , anterioresClips[1]+2 , anterioresClips[2]+2 , anterioresClips[3]-2 );
}
function cabezaMouseOut(id) {
obj=document.getElementById(id);
anterioresClips=new Array( obj.clippedT , obj.clippedR , obj.clippedB , obj.clippedL );
hazClip(id, anterioresClips[0]+2 , anterioresClips[1]-2 , anterioresClips[2]-2 , anterioresClips[3]+2 );
}
</script>
<?
$f=0; //fila
$c=0; //col
for($a=1;$a<=44;$a++) {
if($c==11) { //saltamos
$c=0;
$f++;
}
$l=10;
$t=10;
// un cuadro mide 64*68
echo '<div id="cabeza'.$f.'-'.$c.'" style="z-index:-'.$a.';position:absolute;left:'.$l.'px;top:'.$t.'px;"><img src="imgs_titulo/cabeza.jpg" onmouseover="cabezaMouseOver(\'cabeza'.$f.'-'.$c.'\')" onmouseout="cabezaMouseOut(\'cabeza'.$f.'-'.$c.'\')"></div>' ."\r";
echo "<script>\r";
echo "\t". 'hazClip("cabeza'.$f.'-'.$c.'", 64*'.$f.' , 753-68*'.(10-$c).' , 258-64*'.(3-$f).' , 68*'.$c.' )' ."\r";
echo "</script>\r\r";
$c++;
}
?>
<script>
function empekenecelos() {
f=0; c=0;
for(a=0;a<=44;a++) {
if(c==11) {
c=0; f++;
}
id="cabeza"+f+"-"+c;
obj=document.getElementById(id);
anterioresClips=new Array( obj.clippedT , obj.clippedR , obj.clippedB , obj.clippedL );
hazClip(id, anterioresClips[0]+4 , anterioresClips[1]-4 , anterioresClips[2]-4 , anterioresClips[3]+4 ); //restableciendo
c++;
}
}
empekenecelos();
</script>
Voi a explicarlo un pokillo:
Código PHP:
function hazClip(id,t,r,b,l)
Esta funcion hace clip a la capa id que se le pase, y guarda los valores que de clip en propiedades del mismo objeto.
Código PHP:
function cabezaMouseOver(id);
function cabezaMouseOut(id);
Son los handlers para cuando se pase el raton por encima de cada mini-imagen cambiar el clip, agrandan y empequeñecen el clip. (Mouseover=>agranda mini imagen; mouseout=>restablece mini imagen)
Código PHP:
<?
$f=0; //fila
$c=0; //col
for($a=1;$a<=44;$a++) {
if($c==11) { //saltamos
$c=0;
$f++;
}
$l=10;
$t=10;
// un cuadro mide 64*68
echo '<div id="cabeza'.$f.'-'.$c.'" style="z-index:'.$a.';position:absolute;left:'.$l.'px;top:'.$t.'px;"><img src="imgs_titulo/cabeza.jpg" onmouseover="cabezaMouseOver(\'cabeza'.$f.'-'.$c.'\')" onmouseout="cabezaMouseOut(\'cabeza'.$f.'-'.$c.'\')"></div>' ."\r";
echo "<script>\r";
echo "\t". 'hazClip("cabeza'.$f.'-'.$c.'", 64*'.$f.' , 753-68*'.(10-$c).' , 258-64*'.(3-$f).' , 68*'.$c.' )' ."\r";
echo "</script>\r\r";
$c++;
}
?>
Este es el codigo php que coloca cada imagen, con su capa, en su sitio, y luego le hace el clipping. Genera un codigo como este.
Código PHP:
<div id="cabeza0-0" style="z-index:1;position:absolute;left:10px;top:10px;"><img src="imgs_titulo/cabeza.jpg" onmouseover="cabezaMouseOver('cabeza0-0')" onmouseout="cabezaMouseOut('cabeza0-0')"></div>
<script>
hazClip("cabeza0-0", 64*0 , 753-68*10 , 258-64*3 , 68*0 )
</script>
<div id="cabeza0-1" style="z-index:2;position:absolute;left:10px;top:10px;"><img src="imgs_titulo/cabeza.jpg" onmouseover="cabezaMouseOver('cabeza0-1')" onmouseout="cabezaMouseOut('cabeza0-1')"></div>
<script>
hazClip("cabeza0-1", 64*0 , 753-68*9 , 258-64*3 , 68*1 )
</script>
<div id="cabeza0-2" style="z-index:3;position:absolute;left:10px;top:10px;"><img src="imgs_titulo/cabeza.jpg" onmouseover="cabezaMouseOver('cabeza0-2')" onmouseout="cabezaMouseOut('cabeza0-2')"></div>
<script>
hazClip("cabeza0-2", 64*0 , 753-68*8 , 258-64*3 , 68*2 )
</script>
<div id="cabeza0-3" style="z-index:4;position:absolute;left:10px;top:10px;"><img src="imgs_titulo/cabeza.jpg" onmouseover="cabezaMouseOver('cabeza0-3')" onmouseout="cabezaMouseOut('cabeza0-3')"></div>
<script>
hazClip("cabeza0-3", 64*0 , 753-68*7 , 258-64*3 , 68*3 )
</script>
Asi se ve claro para los que no manejan php.
La funcion empekenecelos (empekeñecelos):
Código PHP:
function empekenecelos()
que tiene como objetivo realizar a cada capa el clip de 4 por todos sus lados, haciendo que cada capa sea mas pequeña que una porcion de la imagen, y entonces se vean los cuadraditos. Si no, se veria la imagen entera sin cortes porque los cuadraditos la formarian sin cortes.
------------------------------------------------------
El caso es que funciona bien y perfecto en IE, se colocan las capas donde deben, y al mouseover y mouseout funcionan como deben.
Los problemas llegan en Opera, donde no funcionan esos eventos, solo tienen efecto en la ultima capa colocada (la de abajo a la dcha), pero funciona bien. Pense que era el z-index pero jugue con el y como si nada...
En firefox ya directamente, se muestra la imagen completa, sin clipping ni nada, y no se puede apreciar si funcionan los eventos, pero no aparece la imagen partida ni nada.
En los tres navegadores es codigo generado es el mismo.
La pregunta del millon despues de esto es.. ¿Como puedo hacer que funcione tanto el IE como el Opera? Luego vendria en firefox...
Salu2 maestros!