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]