clipping para partir una imagen en cachos (html + css + js +php)

[derkenuke]

Continuacion

Código PHP:

  <div id="cabeza2-0" style="z-index:23;position:absolute;left:10px;top:10px;"><img src="imgs_titulo/cabeza.jpg" onmouseover="cabezaMouseOver('cabeza2-0')" onmouseout="cabezaMouseOut('cabeza2-0')"></div>
<script>
    hazClip("cabeza2-0", 64*2 , 753-68*10 , 258-64*1 , 68*0 )
</script>
 
<div id="cabeza2-1" style="z-index:24;position:absolute;left:10px;top:10px;"><img src="imgs_titulo/cabeza.jpg" onmouseover="cabezaMouseOver('cabeza2-1')" onmouseout="cabezaMouseOut('cabeza2-1')"></div>
<script>
    hazClip("cabeza2-1", 64*2 , 753-68*9 , 258-64*1 , 68*1 )
</script>
 
<div id="cabeza2-2" style="z-index:25;position:absolute;left:10px;top:10px;"><img src="imgs_titulo/cabeza.jpg" onmouseover="cabezaMouseOver('cabeza2-2')" onmouseout="cabezaMouseOut('cabeza2-2')"></div>
<script>
    hazClip("cabeza2-2", 64*2 , 753-68*8 , 258-64*1 , 68*2 )
</script>
 
<div id="cabeza2-3" style="z-index:26;position:absolute;left:10px;top:10px;"><img src="imgs_titulo/cabeza.jpg" onmouseover="cabezaMouseOver('cabeza2-3')" onmouseout="cabezaMouseOut('cabeza2-3')"></div>
<script>
    hazClip("cabeza2-3", 64*2 , 753-68*7 , 258-64*1 , 68*3 )
</script>
 
<div id="cabeza2-4" style="z-index:27;position:absolute;left:10px;top:10px;"><img src="imgs_titulo/cabeza.jpg" onmouseover="cabezaMouseOver('cabeza2-4')" onmouseout="cabezaMouseOut('cabeza2-4')"></div>
<script>
    hazClip("cabeza2-4", 64*2 , 753-68*6 , 258-64*1 , 68*4 )
</script>
 
<div id="cabeza2-5" style="z-index:28;position:absolute;left:10px;top:10px;"><img src="imgs_titulo/cabeza.jpg" onmouseover="cabezaMouseOver('cabeza2-5')" onmouseout="cabezaMouseOut('cabeza2-5')"></div>
<script>
    hazClip("cabeza2-5", 64*2 , 753-68*5 , 258-64*1 , 68*5 )
</script>
 
<div id="cabeza2-6" style="z-index:29;position:absolute;left:10px;top:10px;"><img src="imgs_titulo/cabeza.jpg" onmouseover="cabezaMouseOver('cabeza2-6')" onmouseout="cabezaMouseOut('cabeza2-6')"></div>
<script>
    hazClip("cabeza2-6", 64*2 , 753-68*4 , 258-64*1 , 68*6 )
</script>
 
<div id="cabeza2-7" style="z-index:30;position:absolute;left:10px;top:10px;"><img src="imgs_titulo/cabeza.jpg" onmouseover="cabezaMouseOver('cabeza2-7')" onmouseout="cabezaMouseOut('cabeza2-7')"></div>
<script>
    hazClip("cabeza2-7", 64*2 , 753-68*3 , 258-64*1 , 68*7 )
</script>
 
<div id="cabeza2-8" style="z-index:31;position:absolute;left:10px;top:10px;"><img src="imgs_titulo/cabeza.jpg" onmouseover="cabezaMouseOver('cabeza2-8')" onmouseout="cabezaMouseOut('cabeza2-8')"></div>
<script>
    hazClip("cabeza2-8", 64*2 , 753-68*2 , 258-64*1 , 68*8 )
</script>
 
<div id="cabeza2-9" style="z-index:32;position:absolute;left:10px;top:10px;"><img src="imgs_titulo/cabeza.jpg" onmouseover="cabezaMouseOver('cabeza2-9')" onmouseout="cabezaMouseOut('cabeza2-9')"></div>
<script>
    hazClip("cabeza2-9", 64*2 , 753-68*1 , 258-64*1 , 68*9 )
</script>
 
<div id="cabeza2-10" style="z-index:33;position:absolute;left:10px;top:10px;"><img src="imgs_titulo/cabeza.jpg" onmouseover="cabezaMouseOver('cabeza2-10')" onmouseout="cabezaMouseOut('cabeza2-10')"></div>
<script>
    hazClip("cabeza2-10", 64*2 , 753-68*0 , 258-64*1 , 68*10 )
</script>
 
<div id="cabeza3-0" style="z-index:34;position:absolute;left:10px;top:10px;"><img src="imgs_titulo/cabeza.jpg" onmouseover="cabezaMouseOver('cabeza3-0')" onmouseout="cabezaMouseOut('cabeza3-0')"></div>
<script>
    hazClip("cabeza3-0", 64*3 , 753-68*10 , 258-64*0 , 68*0 )
</script>
 
<div id="cabeza3-1" style="z-index:35;position:absolute;left:10px;top:10px;"><img src="imgs_titulo/cabeza.jpg" onmouseover="cabezaMouseOver('cabeza3-1')" onmouseout="cabezaMouseOut('cabeza3-1')"></div>
<script>
    hazClip("cabeza3-1", 64*3 , 753-68*9 , 258-64*0 , 68*1 )
</script>
 
<div id="cabeza3-2" style="z-index:36;position:absolute;left:10px;top:10px;"><img src="imgs_titulo/cabeza.jpg" onmouseover="cabezaMouseOver('cabeza3-2')" onmouseout="cabezaMouseOut('cabeza3-2')"></div>
<script>
    hazClip("cabeza3-2", 64*3 , 753-68*8 , 258-64*0 , 68*2 )
</script>
 
<div id="cabeza3-3" style="z-index:37;position:absolute;left:10px;top:10px;"><img src="imgs_titulo/cabeza.jpg" onmouseover="cabezaMouseOver('cabeza3-3')" onmouseout="cabezaMouseOut('cabeza3-3')"></div>
<script>
    hazClip("cabeza3-3", 64*3 , 753-68*7 , 258-64*0 , 68*3 )
</script>
 
<div id="cabeza3-4" style="z-index:38;position:absolute;left:10px;top:10px;"><img src="imgs_titulo/cabeza.jpg" onmouseover="cabezaMouseOver('cabeza3-4')" onmouseout="cabezaMouseOut('cabeza3-4')"></div>
<script>
    hazClip("cabeza3-4", 64*3 , 753-68*6 , 258-64*0 , 68*4 )
</script>
 
<div id="cabeza3-5" style="z-index:39;position:absolute;left:10px;top:10px;"><img src="imgs_titulo/cabeza.jpg" onmouseover="cabezaMouseOver('cabeza3-5')" onmouseout="cabezaMouseOut('cabeza3-5')"></div>
<script>
    hazClip("cabeza3-5", 64*3 , 753-68*5 , 258-64*0 , 68*5 )
</script>
 
<div id="cabeza3-6" style="z-index:40;position:absolute;left:10px;top:10px;"><img src="imgs_titulo/cabeza.jpg" onmouseover="cabezaMouseOver('cabeza3-6')" onmouseout="cabezaMouseOut('cabeza3-6')"></div>
<script>
    hazClip("cabeza3-6", 64*3 , 753-68*4 , 258-64*0 , 68*6 )
</script>
 
<div id="cabeza3-7" style="z-index:41;position:absolute;left:10px;top:10px;"><img src="imgs_titulo/cabeza.jpg" onmouseover="cabezaMouseOver('cabeza3-7')" onmouseout="cabezaMouseOut('cabeza3-7')"></div>
<script>
    hazClip("cabeza3-7", 64*3 , 753-68*3 , 258-64*0 , 68*7 )
</script>
 
<div id="cabeza3-8" style="z-index:42;position:absolute;left:10px;top:10px;"><img src="imgs_titulo/cabeza.jpg" onmouseover="cabezaMouseOver('cabeza3-8')" onmouseout="cabezaMouseOut('cabeza3-8')"></div>
<script>
    hazClip("cabeza3-8", 64*3 , 753-68*2 , 258-64*0 , 68*8 )
</script>
 
<div id="cabeza3-9" style="z-index:43;position:absolute;left:10px;top:10px;"><img src="imgs_titulo/cabeza.jpg" onmouseover="cabezaMouseOver('cabeza3-9')" onmouseout="cabezaMouseOut('cabeza3-9')"></div>
<script>
    hazClip("cabeza3-9", 64*3 , 753-68*1 , 258-64*0 , 68*9 )
</script>
 
<div id="cabeza3-10" style="z-index:44;position:absolute;left:10px;top:10px;"><img src="imgs_titulo/cabeza.jpg" onmouseover="cabezaMouseOver('cabeza3-10')" onmouseout="cabezaMouseOut('cabeza3-10')"></div>
<script>
    hazClip("cabeza3-10", 64*3 , 753-68*0 , 258-64*0 , 68*10 )
</script>
 
 
 
<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> 
  

Y esto es todo, para el que lo quiera probar.

Espero ayuda por favor.