Foros del Web » Creando para Internet » CSS »

Linkear alguna zona concreta de un fondo

Estas en el tema de Linkear alguna zona concreta de un fondo en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 01/05/2011, 10:13
Avatar de kiM-  
Fecha de Ingreso: mayo-2008
Mensajes: 191
Antigüedad: 9 años, 6 meses
Puntos: 2
Linkear alguna zona concreta de un fondo

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!
  #2 (permalink)  
Antiguo 01/05/2011, 14:34
 
Fecha de Ingreso: enero-2003
Ubicación: Córdoba, Argentina
Mensajes: 1.047
Antigüedad: 14 años, 10 meses
Puntos: 10
Respuesta: Linkear alguna zona concreta de un fondo

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>
__________________
oohh... quisiera ser godines!!!
  #3 (permalink)  
Antiguo 01/05/2011, 14:39
Avatar de kiM-  
Fecha de Ingreso: mayo-2008
Mensajes: 191
Antigüedad: 9 años, 6 meses
Puntos: 2
Respuesta: Linkear alguna zona concreta de un fondo

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!
  #4 (permalink)  
Antiguo 03/05/2011, 02:02
 
Fecha de Ingreso: julio-2010
Mensajes: 126
Antigüedad: 7 años, 5 meses
Puntos: 5
Respuesta: Linkear alguna zona concreta de un fondo

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.
  #5 (permalink)  
Antiguo 04/05/2011, 08:31
Avatar de Alucine  
Fecha de Ingreso: abril-2011
Mensajes: 59
Antigüedad: 6 años, 7 meses
Puntos: 10
Respuesta: Linkear alguna zona concreta de un fondo

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.

Etiquetas: fondo, linkear, zonas
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 03:20.