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> Código PHP:
function hazClip(id,t,r,b,l)
Código PHP:
function cabezaMouseOver(id);
function cabezaMouseOut(id);
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++;
}
?> 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>
La funcion empekenecelos (empekeñecelos):
Código PHP:
function empekenecelos()
------------------------------------------------------
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!
