DUDA: Página del estilo Foto fondo con sus objetos linkiados

datcom · #1 (**permalink**) 06/09/2012, 08:36

Hola Comu...

Tengo que hacer una web en la cual hay una foto de fondo (segun me han dicho) y donde los objetos de la foto son links. NO TIENE QUE SER FLASH. m,e dijieron que con HTML se puede.

Alguien puede orientarme como hacerla?
GRACIAS

flashmax · #2 (**permalink**) 06/09/2012, 09:55

Muestra la foto si se puede! para ver a que te refieres! haber si se pueden cortar las partes para hacer los botones! saludos

datcom · #3 (**permalink**) 07/09/2012, 08:33

Cita:

Iniciado por flashmax

Muestra la foto si se puede! para ver a que te refieres! haber si se pueden cortar las partes para hacer los botones! saludos

Mira por ejemplo esta:

Que cada objeto sea un link y armar algo sin FLASH con html.
Un abrazo

Gracias

flashmax · #4 (**permalink**) 07/09/2012, 10:06

Bueno te dejo un ejemplo haber si te sirve la foto y la imagen boton.gif colócala dentro de una carpeta llamada img y crea una imagen transparente de 1x1 px y dale el nombre de boton.gif ..saludos!

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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
#contenedor_img {
	background-image: url(img/estanteria3.jpg);
	width:500px;
	height:375px;
}
#boton1 {
	width: 79px;
	height: 127px;
	position: absolute;
	top: 28px;
	left: 158px;
}
#boton2 {
	width: 84px;
	height: 77px;
	position: absolute;
	top: 82px;
	left: 274px;
}
#boton3 {
	width: 78px;
	height: 75px;
	position: absolute;
	top: 85px;
	left: 401px;
}
#boton4 {
	width: 62px;
	height: 118px;
	position: absolute;
	top: 213px;
	left: 50px;
}
#boton5 {
	width: 67px;
	height: 71px;
	position: absolute;
	top: 267px;
	left: 148px;
}
#boton6 {
	width: 117px;
	height: 73px;
	position: absolute;
	top: 264px;
	left: 266px;
}

</style>
</head>

<body>
<div id="contenedor_img">
<div id="boton1"><a href="boton1.html"><img src="img/boton.gif" width="100%" height="100%" /></a></div>
<div id="boton2"><a href="boton2.html"><img src="img/boton.gif" width="100%" height="100%" /></a></div>
<div id="boton3"><a href="boton3.html"><img src="img/boton.gif" width="100%" height="100%" /></a></div>
<div id="boton4"><a href="boton4.html"><img src="img/boton.gif" width="100%" height="100%" /></a></div>
<div id="boton5"><a href="boton5.html"><img src="img/boton.gif" width="100%" height="100%" /></a></div>
<div id="boton6"><a href="boton6.html"><img src="img/boton.gif" width="100%" height="100%" /></a></div>
</div>
</body>
</html>

datcom · #5 (**permalink**) 07/09/2012, 10:49

bueno lo voy a probar y te cuento! Gracias

datcom · #6 (**permalink**) 07/09/2012, 12:56

Me dio buen resultado!, Gracias!
Pero una cosa mas, como tomaste las medidas para encajar los DIvs? digo en el fotoshop como sacaste las coordenadas en pixeles para los cuatro lados?

Gracias

flashmax · #7 (**permalink**) 07/09/2012, 13:35

Hola lo hice de la siguiente manera utilizando el editor dreamweaver una ves que creas el div contenedor con la imagen incrustada y con los respectivos div de los botones y le asignas estos valores
width: 0px; height: 0px; position:absolute; top: 0px; left: 0px; en la parte visual diseño del dreamweaver con el ratón encima de cada div lo arrastras donde te guste y automáticamente se aplican las posiciones...saludos!

datcom · #8 (**permalink**) 10/09/2012, 06:51

Gracias! un abrazo =)

emprear · #9 (**permalink**) 10/09/2012, 08:26

Para eso existen los maps y las areas en htm, ejemplo

http://foros.emprear.com/html/image_map/estanteria.html

Te aclaro que las páginas de destino no existen, asi que se genera un error
Para no tener que luchar con las coordenadas, la mayoría de los programas de diseño grafico orientados a web trae un herramienta para generarlas
SAludos

datcom · #10 (**permalink**) 10/09/2012, 14:12

Cita:

Iniciado por emprear

Para eso existen los maps y las areas en htm, ejemplo

http://foros.emprear.com/html/image_map/estanteria.html

Te aclaro que las páginas de destino no existen, asi que se genera un error
Para no tener que luchar con las coordenadas, la mayoría de los programas de diseño grafico orientados a web trae un herramienta para generarlas
SAludos

No para ahora me marie... eso de los maps y areas me podrias expicar o mostrar algun tutorial?
Gracias

emprear · #11 (**permalink**) 10/09/2012, 14:26

esto es muy general
http://eternalinocence.starszz.com/t...eimagenps.html

si googleas un poco vas a ver que cada programa de gráficos, Corel, illustrator, Fireworks, etc, dispone de una herramienta similar

SAludos

datcom · #12 (**permalink**) 14/09/2012, 18:21

Hola, retomo
Como hago para que esta estanteria usando useMAP http://foros.emprear.com/html/image_map/estanteria.html

me quede correctamente centrado en el medio de la pantalla.

emprear · #13 (**permalink**) 14/09/2012, 19:47

centrando el contenedor de la imagen con css

Código CSS:

Ver original#capa {
position:absolute;
top: 50%;
left: 50%;
width:500px;
height:375px;
margin-top: -188px; /*valor negativo mitad del alto*/
margin-left: -250px; /*valor negativo mitad del ancho*/
border: 2px solid #2982C6;
background-color: #FFF;
text-align: center;
}

datcom · #14 (**permalink**) 14/09/2012, 20:31

Muchas gracias. ahi va quedando mejor.