Do you wanna a menu for your web page ??? … which are the options ??? … to resolve the issue you have to know the best options and the best option is … CSS … why ??? … the most important reason is performance … while you can get a cool effects with the Javascript, if the user have disabled that cross web client language, you page is nothing, yes …. NOTHING …. the user won’t be able to search all your pages because the menu doesn’t work, the javascript is not enabled … but in these days all well-known browser are Javascript enabled in default setting … but we want cool menu with images that doesn’t change images between mouse hover event, for that, we need to work with a translucid property . When we trigger mouse over in some less-bright image we can full it with his real color and then have a great menu. It’s really easy get the effect … let see how can we reach that …
1. Put the next code in your CSS file:
#logo h1
{ color: #000; background: #fff; }
.opacityit img
{ filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);-moz-opacity: 0.4; }
.opacityit:hover img
{ filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100); -moz-opacity: 1; }
2. Link in the html or aspx file like this (Change the image the image source directory and href property to change the url detination, if you see i have li tags nested in ul tags, to make the ilusion of a horizontal menu)
<ul id=”menu”>
<li><a class=”opacityit” href=”Put your URL here“><img border=”0″ alt=”Link 3″ src=”images/Your image here.gif” /></a></li>
<li><a class=”opacityit” href=”Put your URL here“><img border=”0″ alt=”Link 3″ src=”images/Your image here.gif” /></a></li>
<li><a class=”opacityit” href=”Put your URL here“><img border=”0″ alt=”Link 3″ src=”images/Your image here.gif” /></a></li>
<li><a class=”opacityit” href=”Put your URL here“><img border=”0″ alt=”Link 3″ src=”images/Your image here.gif” /></a></li>
<li><a class=”opacityit” href=”Put your URL here“><img border=”0″ alt=”Link 3″ src=”images/Your image here.gif” /></a></li>
</ul>
3. Thats all ¡¡¡ You have now a really cool graphic menu wiht amazing bright effect …Hope this help … Arturo Quiñones Martínez .net Developer
