Mmmm...
Yo también miré los enlaces. No entiendo muy bien a qué vienen. Quizá el del
z-index sea una buena idea : al pasar el puntero sobre la imagen delantera, la pasamos atrás de los botones y se ve como si esos botones saltaran adelante para poder clickear.
En realidad iba a cometer un abuso, porque se me ucurrió otra forma más
seria de hacer lo que se le inventó a
danihxh. Funcionaría bien para un menú hecho con imágenes (en rigor de verdad, hecho con
1 imagen de todos los botones mapeando cada uno para el evento o link) y lo que tendríamos que hacer es fijar el fondo, liberar al desplazamiento la capa de botones, fijar el logo con transparencias ... y poner una imagen totalemente transparente, libre como los botones, en sus mismas coordenadas y con el mapa de botones ahí.
Denme un segundo. Hago un demo y si funciona mando este mensaje. Si no, jamás sabrán que lo escribí.
⌚
OK. Anda sin una línea de javascript.
El esquema sería más o menos el siguiente :
Si pudiésemos ver las capas "del costado izquierdo" (contraescrólbar), nos encontraríamos que poniendo ...
Código:
Logo fijo con
transparencia.
▼
- ↕ - ↕
¡ [ | ¦
! [ | ¦ Cubierta desplazable
¡ [ | ¦ ◄ transparente
Imagen fija ! [ | ¦ Igual al menú,
(de fondo). ► ¡ [ | ¦ con mapa.
! [ | ¦
- [ | ¦
[ | ¦
[ - ¦
Menú desplazable ► [ ¦
[ ¦
↕ ↕
hacemos un
sánguche intercalando una capa fija de fondo (el puzzle), con una desplazable de menúes (tu ejemplo,
danihxh), con una fija de logo (el de opacidad gradiente) y una desplazable "invisible", pero que es la que tiene el mapeo según las posiciones de la imagen de menú. Ésta es la que queda por delante de todo el conjunto, y por eso es el área clickeable.
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>
<meta http-equiv=Content-Type content="text/html; charset=utf-8">
<title>CLICK A TRAVÉS DE IMAGEN.</title>
<style type="text/css">
body {background-image: url(http://img84.imageshack.us/img84/6059/sombrapuzzle.gif); background-attachment: fixed; background-repeat: repeat-x; }
#botonera , #cubierta {width: 400px; height:800px; position: absolute; top:15px; left: 25px; }
#logo {width: 500px; height:400px; position: fixed; top:20px; left: 20px; }
hr { margin-top: 2000px; }
</style>
</head>
<body>
<map name="mimapa">
<area shape="rect" coords="0,180,30,210" title="Enlace 0." href="Javascript:alert('Enlace 0.')">
<area shape="rect" coords="0,216,30,246" title="Enlace 1." href="Javascript:alert('Enlace 1.')">
<area shape="rect" coords="0,252,30,282" href="Javascript:alert('Enlace 2.')" title="Enlace 2.">
<area shape="rect" coords="0,288,30,318" href="Javascript:alert('Enlace 3.')" title="Enlace 3.">
<area shape="rect" coords="0,324,30,354" href="Javascript:alert('Enlace 4.')" title="Enlace 4.">
<area shape="rect" coords="0,360,30,390" href="Javascript:alert('Enlace 5.')" title="Enlace 5.">
<area shape="rect" coords="0,396,30,426" href="Javascript:alert('Enlace 6.')" title="Enlace 6.">
<area shape="rect" coords="0,432,30,462" href="Javascript:alert('Enlace 7.')" title="Enlace 7.">
<area shape="rect" coords="0,468,30,498" href="Javascript:alert('Enlace 8.')" title="Enlace 8.">
<area shape="rect" coords="0,504,30,534" href="Javascript:alert('Enlace 9.')" title="Enlace 9.">
<area shape="rect" coords="0,540,30,570" href="Javascript:alert('Enlace 10.')" title="Enlace 10.">
<area shape="rect" coords="0,576,30,606" href="Javascript:alert('Enlace 11.')" title="Enlace 11.">
<area shape="rect" coords="0,612,30,642" href="Javascript:alert('Enlace 12.')" title="Enlace 12.">
<area shape="rect" coords="0,648,30,678" href="Javascript:alert('Enlace 13.')" title="Enlace 13.">
<area shape="rect" coords="0,684,30,714" href="Javascript:alert('Enlace 14.')" title="Enlace 14.">
<area shape="rect" coords="0,720,30,750" href="Javascript:alert('Enlace 15.')" title="Enlace 15.">
<area shape="rect" coords="0,756,30,792" href="Javascript:alert('Enlace 16.')" title="Enlace 16.">
</map>
<img src="http://img11.imageshack.us/img11/5161/sinttulo1eaq.png" id="botonera">
<img src="http://img853.imageshack.us/img853/5572/degrad018my.png" id="logo">
<img src="http://img42.imageshack.us/img42/6156/transparente.gif" id="cubierta" usemap="#mimapa">
<hr>
</body>
</html> Vale aclarar que los
shape's son exactamente los mismos que se harían para el menú que está detrás; la imagen es transparente, pero tiene el mismo tamaño y posición de aquellos.
Soy una vergüenza. Dos chanchadas en el mismo mensaje.
¿Y así me querían de Colaborador?. Deberían echarme del Foro, por indigno.