Bueno hace unos minutos estaba programando cositas rapidas y pequeñas para llenar un poco las secciones de programacion web, y se me ocurrio esto jeje, como ya sabeis la barra de S.O mac cuando tu pones el cursor encima de una imagen se hace mas grande, cierto?
Pues lo mismo e echo en php y en js, quedaos con el codigo el diseño es nulo solo queria mostrar el diseño.
<html>
<head>
<title>Menu 'MAC' eDeex</title>
<style type="text/css">
#Menu{ width:1000px; height:60px; float:left; text-align:center; margin:0 auto; }
.Botones { width:150px; height:40px; float:left }
</style>
<script type="text/javascript">
function menu(id,ancho,alto)
{
document.getElementById(id).width=ancho;
document.getElementById(id).height=alto;
}
</script>
</head>
<body>
<div id="Menu">
<a class="Botones" href="#" onmouseout="menu('edeex','150','40');" onmousemove="menu('edeex','160','50');">
<img id="edeex" src="img/edeex.png" border="0" width="150" height="40" />
</a>
<a class="Botones" href="#" onmouseout="menu('google','150','40');" onmousemove="menu('google','160','50');">
<img id="google" src="img/google.png" border="0" width="150" height="40" />
</a>
<a class="Botones" href="#" onmouseout="menu('underc0de','150','40');" onmousemove="menu('underc0de','160','50');">
<img id="underc0de" src="img/underc0de.png" border="0" width="150" height="40" />
</a>
<a class="Botones" href="#" onmouseout="menu('zone','150','40');" onmousemove="menu('zone','160','50');">
<img id="zone" src="img/zone-h.png" border="0" width="150" height="40" />
</a>
<a class="Botones" href="#" onmouseout="menu('mac','150','40');" onmousemove="menu('mac','160','50');">
<img id="mac" src="img/mac.png" border="0" width="150" height="40" />
</a>
</div>
</body>
</html>
Comentarme que tal! Quiero decir que tambien se puede hacer con hojas de estilo con "hover", espero que os guste.
Saludos
Similar topics (5)
Julio 04, 2011, 04:04:02 pm