Y sigo aprovechando el E-drive.
Este nuevo ejemplo usa
canvas por una sugerencia de
Carlangueitor en
Cambiar de color un <area> en un mapa de imagen?
Es un poco rebuscada, y quizá sea más práctica como alternativa al filtro
light de
Microsoft, pero me pareció que podía usar este viejo tema y presentarla como una versión simulada de mapeado.
Código HTML:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<script type="application/x-javascript">
var canvas, ctx;
var X = 0;
var Y = 0;
var luz = "#f33"
var cursor = "move";
var destino ="#";
var titulo = "";
function draw() {
var imagen = document.getElementById('image1');
canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");
ctx.globalCompositeOperation = "lighter";
ctx.clearRect(0,0,640,480);
ctx.drawImage(imagen, 0, 0);
ctx.fillStyle = luz;
ctx.beginPath();
ctx.arc(X,Y,60,0,Math.PI*2,true);
ctx.fill();
}
function mueve(evento){
var distX = document.getElementById("caja").offsetLeft;
var distY = document.getElementById("caja").offsetTop;
document.title = X+" "+Y+" "+distX+" "+distY;
X = evento.pageX - distX;
Y = evento.pageY - distY;
if ((X>345 && Y>180) && (X<415 && Y<230)){
cursor = "pointer";
luz = "#090";
destino = "http://imageshack.us/photo/my-images/696/davidkatzowicz2.jpg/";
titulo = "Cabeza."
}
else if ((X>350 && Y>285) && (X<390 && Y<310)){
cursor = "pointer";
luz = "#090";
destino = "http://imageshack.us/photo/my-images/849/fabianabarreda.jpg/";
titulo = "Mano Izquierda."
}
else if ((X>180 && Y>240) && (X<240 && Y<280)){
cursor = "pointer";
luz = "#090";
destino = "http://imageshack.us/photo/my-images/545/nataliamartinez.jpg/";
titulo = "Mano Derecha."
}
else {
cursor = "move";
luz = "#f33";
destino = "#"
titulo = ""
}
canvas.style.cursor = cursor;
canvas.title = titulo;
draw()
}
function lleva(){
window.location = destino;
}
onload = draw;
</script>
</head>
<body style="color: #fff; background-color: #000; font-size: 100%; font-weight: 600;">
<h2>Simula '<tt>map, area</tt>' con <tt>canvas</tt>,
destaca con <em>spot</em> color. (Chrome, Safari, Firefox, no IE)</h2>
<div style="position: relative; margin-left: 10%; width: 640px; height: 480px; " id="caja">
<span style="position: absolute; top: 20px; right:-1em; font: bold 3em cursive; color: #f0f;">*</span>
<img id="image1" src="http://img836.imageshack.us/img836/9695/metropolis03.jpg" >
<canvas id="canvas" onmousemove=mueve(event) onclick="lleva()"
style="position: absolute; top:0; left: 0;
width: 640px; height: 480px; " width=640 height=480></canvas>
</div>
<p><span style="font: bold 1.2em cursive; color: #f0f;">*</span> Homenaje a <u>Metrópolis</u>, de <em>Fritz Lang</em>.</p>
</body>
</html> Algunas aclaraciones : perfectamente se puede usar un mapa de imagen, si el
canvas no lo acepta (no lo probé), se usa el mismo truco que para los
mouseover que cambian el elemento que está soportando ese evento, y que es una nueva imagen -transparente- cubriendo todo, a la que se le aplica el mapeo. Otra aclaración tiene que ver con el método para hacer la animación; ya una vez tuve que "reescribir" dinamicamente
todo el
canvas porque algún navegador no me reconocía el
save() , o los métodos para mantener una parte del dibujo mientras modifico la otra, así que en esta ocasión corté por lo sano y ni lo probé. Si ya anda en todos, así se puede mejorar mucho la performance; pero en este ejemplo, redibuja todo a lo bestia.
Por supuesto que el destacado puede ser de forma irregular y hasta se puede cambiar dependiendo de la parte donde se apoye el puntero, también se puede usar un efecto distinto a la 'iluminación de color', como el "XOR" que "borra" el área y deja ver (p.e.) la imagen de fondo, que puede ser la misma del frente, pero editada para que el diseño del destacado no dependa del CSS o HTML, sino que podamos dibujar cualquier cosa. (Viendo los huesos, ahora se me ocurre poner a una persona adelante y un esqueleto detrás, para que parezca una capa de "rayos X").
Otra sugerencia es eliminar el cursor hasta que llegue a un área clickeable, donde sí aparecerá el puntero.
En fin, si alguien lo quiere mejorar, ahí se los dejo.
Imagen : ◙