Linkear alguna zona concreta de un fondo

[kiM-]

Pués eso, quisiera saber cómo hacer para poner una imagen de fondo y linkear alguna zona de la misma en concreto, así me ahorraría muchos recortes de imágenes innecesarios.

Mirad, en esta web: http://www.pokemonmillennium.net/home.php?version=12 en la zona dónde pone Enciclopedia Universale, Pokemon Navigator, Pokemon Gate, Pokemon Tech, pués toda esa zona entera es un una misma imagen puesta como fondo, me he dado cuenta de que debe de usar los spacer_menu.png que podreis ver si pinchais encima de los links con e botón derecho, pero no sé como emplearlos ni nada.

¿Alguno sabe?

Saludos y gracias!

[safe]

Se me ocurre que la mejor forma es poner la imagen de fondo de un contenedor y dentro del contenedor posicionar los enlaces de forma absoluta y ocutalndo el texto.
Sería algo así:

Código:

<style type="text/css">
    #container { background:url(imagen_de_fondo.jpg) no-repeat center center; height:150px; position:relative; width:300px; }
    #container a { display: block; position:absolute; }
    #container a#link_1 { height:50px; left:50px; position:absolute; text-indent:-9999px; top:50px; width:50px; }
    #container a#link_2 { height:50px; left:200px; position:absolute; text-indent:-9999px; top:100px; width:50px; }
</style>
<div id="container">
    <a href="#" id="link_1">Enlace 1</a>
    <a href="#" id="link_2">Enlace 2</a>
</div>

[kiM-]

Muchas gracias, es un truco baastante bueno pero yo busco saber como lo ha hecho esa web, de que forma ha hecho que una zona específica de un fondo se convierta en un link y de que manera emplea el spacer_menu.png :\.. ¿Nadie sabe?

Saludos y gracias por responder!

[Ciel]

Pero para que queres saber exactamente como lo hicieron en esa web si con la solucion que te dio safe deberia dar el mismo resultado? Aparte, para saber como lo hicieron en esa web basta con ver el codigo fuente.

Otra solucion que se me ocurre, que no se mucho del tema pero lo vi hace ya un tiempo, es el uso de maps, podes posicionar links en base a coordenadas de la pagina. Lo que no se si es considerado valido o ya no.

[Alucine]

Hola Kim, soy novata pero hace unos dias aprendí a hacer eso, es muy práctico.. es como dice Ciel, se llama HOTSPOT, y cuando seleccionas una imagen abajo a la izquierda del panel propiedades te aparecen unos dibujitos geometricos en celeste. Usa por ejemplo el polígono que te permite ir haciendo puntos sobre el área de la imagen qe queres que sea clickeable y cuando termines la forma en el panel propiedades verás que te deja ingresar el link.

Fijáte sino este tutorial que lo muestra:
[URL="http://www.youtube.com/watch?v=L29v2NVRbzo"]http://www.youtube.com/watch?v=L29v2NVRbzo[/URL]


O este que te muestra como hacer un rollover con los hotspots:
[URL="http://www.youtube.com/watch?v=Px8h86sILj8"]http://www.youtube.com/watch?v=Px8h86sILj8[/URL]

Yo uso Dreamwever CS5 y la función está disponible asi que no creo que sea considrado inválido pero... además he visto webs que lo usan y se ven correctamente. Si alguien sabe algo al respecto que avise :)

Saludos!

Alucine.