Imagen de sustitución sin Dreaweaver solo html y css

MLDGATO · #1 (**permalink**) 20/08/2011, 10:59

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]

matungoo · #2 (**permalink**) 20/08/2011, 12:19

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.

ArturoGallegos · #3 (**permalink**) 20/08/2011, 13:06

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

Código HTML:

Ver original<ul id="Menu">
    <li><a href="#">Link1</a></li>
    <li><a href="#">Link2</a></li>
    <li><a href="#">Link3</a></li>
    <li><a href="#">Link4</a></li>
    <li><a href="#">Link5</a></li>
</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