28/10/2004, 09:55
|
| (Desactivado) | | Fecha de Ingreso: noviembre-2002 Ubicación: Ciudad Autónoma de Buenos Aires
Mensajes: 2.367
Antigüedad: 22 años, 1 mes Puntos: 317 | |
Y encima con pretenciones... (  )
Código:
<HTML><HEAD><TITLE>DESTACA CON CLIP + AREA.</TITLE>
<style>
#contenedor{position:relative; border:solid 10px blue; height:220px; width:403px}
#imagen1{position:absolute; height:200px; filter:xray();}
#imagen2{position:absolute; height:200px}
</style>
<script>
function destaca(clp){
var I2=document.getElementById("imagen2");
I2.style.clip='rect('+clp+')';
I2.style.cursor='ne-resize';
}
function restaura(){
var I2=document.getElementById("imagen2");
I2.style.clip='rect(0 '+I2.width+' '+I2.height+' 0)';
I2.style.cursor='';
}
</script>
<BODY >
<h2>Destaca partes de imagen con <tt>clip</tt> y toma eventos con <tt>area</tt>.</h2>
<table align=center><td><div id="contenedor"><MAP NAME="mapa">
<area shape="rect" id="rectangulo1" coords="75,60,220,105" title="FOROS"
onmouseover="destaca('60 220 105 75')"; onmouseout="restaura()">
<area shape="rect" id="rectangulo2" coords="215,90,310,140" title="Del Web"
onmouseover="destaca('90 310 140 215')"; onmouseout="restaura()">
</map><img src="http://www.forosdelweb.com/images/vbulletin3_logo_fdw.gif" id="imagen1">
<img SRC="http://www.forosdelweb.com/images/vbulletin3_logo_fdw.gif" id="imagen2" usemap="#mapa">
</div></td></table>
</BODY></HTML>
saludos
furoya |