| Navigation Bar Here is the HTML code for the [LastFM] box: <span class="button"The <style> codes on the right side take care of the colors and roll-over. |
<style> span.button{ background-color:#cceeff; } span.button:hover{ background-color:#ffddbb; } ... </style> |
| Image Buttons These are normal images, but marked with class="button" <img class="button" src=....> The <style> commands at the right draw the green border on mouseover. |
<script> .... .... img.button:hover{ border:solid 3px lime; } </style> |
Now download this simplified page and open it in Komodo: - Add another box in the NAVIGATION BAR by making a <span> with class = "button". Add an onclick function as well. Place the new Navigation Bar BELOW the other one (on the next line) - Add an ONCLICK event to the dancer - Add another IMAGE BUTTON, with class = "button". - Add another image but with a different HOVER effect. This means it must have a different class name, maybe class=mypic - Make another navigation bar, with different colors and a LARGER FONT. Use different colors in this navigation bar. - Read the tutorial at: http://www.w3schools.com/css/css_image_transparency.asp Then add an image that fades out when the mouse rolls over. |
You can also EXPRIMENT with obvious changes : - Use different colors for the navigation bar - Change the text and .onclick targets in the navigation bar - Change the dancer to a different picture - Use a different color (not green) for the border around the pictures - Make the navigation bar elements MOVABLE (click the push-pin at the top right) and place them one above the other - Make the pictures OVERLAP and check whether they still work correctly |
