Foros del Web » Creando para Internet » HTML »

Imagen de sustitución sin Dreaweaver solo html y css

Estas en el tema de Imagen de sustitución sin Dreaweaver solo html y css en el foro de HTML en Foros del Web. Hola Disculpen la molestia pero quería saber si hay alguna forma de colocar un vinculo a un div vació, ya que estoy haciendo un menu ...
  #1 (permalink)  
Antiguo 20/08/2011, 11:59
Avatar de MLDGATO  
Fecha de Ingreso: marzo-2011
Ubicación: Guatemala
Mensajes: 96
Antigüedad: 5 años, 8 meses
Puntos: 2
Pregunta Imagen de sustitución sin Dreaweaver solo html y css

Hola Disculpen la molestia pero quería saber si hay alguna forma de colocar un vinculo a un div vació, ya que estoy haciendo un menu de navegacion utilizando la regla de hover que creo que es de css3 para que cuando el puntero pase sobre el div cambie la imagen de fondo que tiene, pero mi problema es que no se como agregar un hipervinculo para que abra otra pagina al hacer clic sobre el div o si es posible pone un texto con el hipervinculo pero que este texto este oculto yo se hacerlos con dreamweaver con la opción de imagen de sustitución pero eso genera mucho código que no entindo bien y la razon principal es que yo estoy enseñando ha hacer página web a puro codigo html y css y por el momento tampoco voy a enseñar javascript. asi que muchas gracias aqui esta el codigo html que genera el menu y abajo la direccion en donde lo pueden ver.

Código:
<html>
<head>
<title>Menú</title>
<style type="text/css">
#menuprincipal {
	background-color: #09C;
	height: 50px;
	width: 900px;
	margin-top: 0px;
	margin-right: auto;
	margin-bottom: 0px;
	margin-left: auto;
}
#menu1 {
	background-image: url(imagenes/inicio1.png);
	background-repeat: no-repeat;
	width: 150px;
	height: 50px;
	float:left;
}
#menu2 {
	background-image: url(imagenes/servicios1.png);
	background-repeat: no-repeat;
	width: 150px;
	height: 50px;
	float:left;
}
#menu3 {
	background-image: url(imagenes/galeria1.png);
	background-repeat: no-repeat;
	width: 150px;
	height: 50px;
	float:left;
}
#menu4 {
	background-image: url(imagenes/videos1.png);
	background-repeat: no-repeat;
	width: 150px;
	height: 50px;
	float:left;
}
#menu5 {
	background-image: url(imagenes/paseos1.png);
	background-repeat: no-repeat;
	width: 150px;
	height: 50px;
	float:left;
}
#menu6 {
	background-image: url(imagenes/contacto1.png);
	background-repeat: no-repeat;
	width: 150px;
	height: 50px;
	float:left;
}
#menu1:hover {
	background-image: url(imagenes/inicio2.png);
	background-repeat: no-repeat;
}
#menu2:hover {
	background-image: url(imagenes/servicios2.png);
	background-repeat: no-repeat;
}
#menu3:hover {
	background-image: url(imagenes/galeria2.png);
	background-repeat: no-repeat;
}
#menu4:hover {
	background-image: url(imagenes/videos2.png);
	background-repeat: no-repeat;
}
#menu5:hover {
	background-image: url(imagenes/paseos2.png);
	background-repeat: no-repeat;
}
#menu6:hover {
	background-image: url(imagenes/contacto2.png);
	background-repeat: no-repeat;
}
</style>
</head>

<body>
<div id="menuprincipal">
  <div id="menu1"></div>
  <div id="menu2"></div>
  <div id="menu3"></div>
  <div id="menu4"></div>
  <div id="menu5"></div>
  <div id="menu6"></div>
</div>
</body>
</html>
para ver como me quedó vean:

[URL="http://serviciosaereos.site90.net/menu.html"]http://serviciosaereos.site90.net/menu.html[/URL]
  #2 (permalink)  
Antiguo 20/08/2011, 13:19
 
Fecha de Ingreso: diciembre-2007
Mensajes: 64
Antigüedad: 9 años
Puntos: 1
Respuesta: Imagen de sustitución sin Dreaweaver solo html y css

Si agregas este estilo al css:
#menuprincipal a {
display:block;
width:100%;
height:100%;
}
y dentro de los divs el enlace:
<div id="menu1"><a href="google.com"></a></div>
me parece que funciona.
__________________
-------------------------------
Las Grutas Río Negro - www.ilovelasgrutas.com.ar
  #3 (permalink)  
Antiguo 20/08/2011, 14:06
Avatar de ArturoGallegos
Colaborador
 
Fecha de Ingreso: febrero-2008
Ubicación: SLP, México
Mensajes: 5.580
Antigüedad: 8 años, 9 meses
Puntos: 899
Respuesta: Imagen de sustitución sin Dreaweaver solo html y css

creo que deberías empezar por lo básico, los menús se hacen con listas

Código HTML:
Ver original
  1. <ul id="Menu">
  2.     <li><a href="#">Link1</a></li>
  3.     <li><a href="#">Link2</a></li>
  4.     <li><a href="#">Link3</a></li>
  5.     <li><a href="#">Link4</a></li>
  6.     <li><a href="#">Link5</a></li>
  7. </ul>

también te aconsejo que leas sobre sprites CSS que ayudara a mejorar el rendimiento de tu menú ya que utilizas imágenes -> clic aquí

y por ultimo recuerda que un enlace <a> no puede ir vació siempre has de colocar texto o una imagen en su interior, si deseas que no se muestre utiliza text-indent
__________________
Toda ayuda se proporciona exclusivamente en el foro, no skype, no mensajes privados u otro medio....

Etiquetas: css, hover, menú
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 09:29.