Foros del Web » Creando para Internet » HTML »

Background image c/ link

Estas en el tema de Background image c/ link en el foro de HTML en Foros del Web. Hola, tengo un sitio en internet en el cual hay solo una jpg como background al que le aplique un link. El unico problema es ...
  #1 (permalink)  
Antiguo 23/06/2010, 07:07
 
Fecha de Ingreso: junio-2010
Mensajes: 108
Antigüedad: 13 años, 9 meses
Puntos: 2
Background image c/ link

Hola,

tengo un sitio en internet en el cual hay solo una jpg como background al que le aplique un link. El unico problema es que en el firefox no me lo reconoce y no se puede clickear. (la img tiene un link y le tiré encima un map, pero nunguno de los dos funciona)

Este es el codigo:

Código:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title>Alice Bastin | Fashion Designer</title>

<style type="text/css" media="screen">
		
		
		img.bg {
			/* Set rules to fill background */
			min-height: 100%;
			min-width: 1024px;
			
			/* Set up proportionate scaling */
			width: 100%;
			height: auto;
			
			/* Set up positioning */
			position: fixed;
			top: 0;
			left: 0;
		}
		
		@media screen and (max-width: 1024px){
			img.bg {
				left: 50%;
				margin-left: -512px; }
		}
		
		div#content {
			/* This is the only important rule */
			/* We need our content to show up on top of the background */
			position: relative; 
			
			
			/* These have no effect on the functionality */
			width: 500px;
			margin: 0 auto;
			background: #fff;
			padding: 0px;
			font-family: helvetica, arial, sans-serif;
			font-size: 10pt;
			line-height: 16pt;
			-moz-box-shadow: #000 4px 4px 10px;
			-webkit-box-shadow: #000 4px 4px 10px;
		}
		
		body {
			/* These rules have no effect on the functionality */
			/* They are for styling only */
			margin: 0;
			padding: 0px 0 0 0;
		}
	</style>
<script language="javascript">AC_FL_RunContent = 0;</script>
<script src="AC_RunActiveContent.js" language="javascript"></script>

<link href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body bgcolor="#ffffff">

<div id="bg">
    <div>
        <table cellspacing="0" cellpadding="0">
            <tr>
                <td>
                    <a href="alicebastin.html" target="_self"><img src="images/index_alicebastin.jpg" alt="Alice Bastin" border="0" usemap="#Map"/></a>                </td>
          </tr>
        </table>
    </div>

</div>




<div id="cont">
    <div class="box">



    </div>
</div>



<map name="Map"><area shape="rect" coords="504,425,770,514" href="alicebastin.html" target="_self">
</map></body>
</html>
  #2 (permalink)  
Antiguo 23/06/2010, 09:10
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 16 años, 9 meses
Puntos: 1567
Respuesta: Background image c/ link

kidart:
El problema es que lo que has hecho y lo que esxpones son cosas bastante confusas

En primer lugar en ningun lado utilizas una imagen de "fondo", tienes una imágen con un link

<a href="alicebastin.html" target="_self"><img src="images/index_alicebastin.jpg" alt="Alice Bastin" border="0" usemap="#Map"/></a>

A su vez para esa imágen tienes asignado un "map", Si usas un map, los vinculos se definen en el map, dentro del "area" para las coordenadas especificas.

Mira el siguiente código:

Código HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Mapa</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body bgcolor="#FFFFFF">
<map name="chm-error1x1" id="chm-error1x1">
<area shape="rect" coords="260,68,788,112" href="http://google.com.ar" target="_blank" alt=
"Google" /></map> <img src="chm-error1x1.jpg" width="796" height="862" border="0" alt=
"chm-error1x1.jpg" usemap="#chm-error1x1" />
<div>
<table cellspacing="0" cellpadding="0">
<tr>
<td><a href="alicebastin.html" target="_self"><img src="chm-error1x1.jpg" alt="Alice Bastin"
border="0" usemap="#Map" width="796" height="862" /></a></td>
</tr>
</table>

</div>
<map name="Map" id="Map">
<area shape="rect" coords="504,425,770,514" href="alicebastin.html" target="_self" alt="" /></map>
</body>
</html> 
Ahi vas a ver la misma imágen que se repite, en la superior tengo definido un mapa #chm-error1x1 pero sin ningun <a></a> que encierre la imágen, en la inferior esta lo que tu hiciste, o bien quitas el mapa y toda la imagen sera un link a alicebastin.html, ó quitas el <a></a> de la imagen y harás que funcionen las coordenadas del mapa de ID "Map".


Te dejo una demo funcionando en
http://foros.emprear.com/map/mapa.html

Rastrea con el mouse para ver dónde esta el link en la imagen superior

Saludos

Etiquetas: firefox, link, fondo
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 06:25.