The Javascript:

function rolloverMenu(showHide, menu)
{
    var link = 'mainLink';
    if (showHide == 0)
    {
        document.getElementById(menu).style.display = 'none';
        document.getElementById(link).setAttribute('class', 'mainNav');
        document.getElementById(link).setAttribute('className', 'mainNav');
    }
    else
    {
        document.getElementById(menu).style.display = 'block';
        document.getElementById(link).setAttribute('class', 'selectedRollover');
        document.getElementById(link).setAttribute('className', 'selectedRollover');
    }
}

This javascript will either hide or show the menu depending on the location of the cursor. The HTML that calls the javascript has a delay on it as well, but you’ll see that later. This javascript also changes the class name of the link so that even though your mouse isn’t technically hovering over that link it will look like it is being hovered over.

The CSS:

#container{
    position: absolute;
    z-index: 1001;
}
a.mainNav{
    color: White;
    font-weight: bold;
    font-size: 12px;
    height: 40px;
    padding: 0px 10px;
    line-height: 40px;
    float: left;
    background-color: #1D3E66;
}
a.mainNav:hover{
    background-color: #3D6199;
    color: #AAAAAA;
}
a.selectedRollover{
    color: White;
    font-weight: bold;
    font-size: 12px;
    height: 40px;
    padding: 0px 10px;
    line-height: 40px;
    float: left;
    background-color: #3D6199;
}
.rolloverMenu{
    float:left;
    padding: 10px 10px 6px 10px;
    position: absolute;
    z-index: 1000;
    background-color: #3D6199;
    width: 100px;
}
.rolloverMenu#mainMenu{
    top: 40px;
}
.rolloverMenu a{
    color: White;
    font-weight: bold;
    font-size: 12px;
    line-height: 20px;
}

Change the CSS to fit your own design. I’ve been very specific in this CSS so that it should be easier for you to identify everything. Note that the #container definition is actually very important for an IE6 bug fix. IE6 has issues with z-index when not combined with absolute positioning. Basically, the parent element of the rollover menu needs to have that specific definition.

Lastly, the HTML:

<div id="container">
  <a class="mainNav" href="#" id="mainLink" onmouseover="rolloverMenu(1, 'mainMenu');" onmouseout="rolloverMenu(0, 'mainMenu');">Rollover Me</a>
  <div class="rolloverMenu" id="mainMenu" style="display: none;" onmouseover="rolloverMenu(1, 'mainMenu');" onmouseout="rolloverMenu(0, 'mainMenu');">
    <a href="#">Link 1</a><br />
    <a href="#">Link 2</a><br />
    <a href="#">Link 3</a><br />
    <a href="#">Link 4</a>
  </div>
</div>

And that’s that! The HTML link calls the javascript which implements a series of CSS rules that will hide or show the menu of your choice! Have fun!

So either in an external Javascript file (which is called the same way as an external CSS file), or in the head of your HTML inside a <script> tag, include the following javascript:

The Javascript:

function hideWatermark(theID)
{
    var element = document.getElementById(theID);
    element.style.backgroundImage = 'none';
    element.style.backgroundColor = 'white';
}
function showWatermark(theID)
{
    var element = document.getElementById(theID);
    if (element.value.length == 0)
        element.style.backgroundImage = 'url(\'IMAGE_LOCATION_HERE\')';
    else
        element.style.backgroundColor = 'white';
}

On focus (when the user clicks on the textbox) the hideWatermark function is called. The javascript takes in a string of the textbox ID. It then sets the background image to none, and the background color to white. On blur (when the user clicks away from the textbox, putting focus on any other element), the showWatermark function is called. This javascript also takes in the same ID. It then checks to see if the content of the textbox is empty, if it is, it puts the background image of the watermark back in. If it is not empty, then it keeps the background color as white.

Here is the HTML that goes with the JS:

<input type="text" class="gatherZip" id="theTextBox" onblur="showWatermark('theTextBox')" onfocus="hideWatermark('theTextBox')" />

And the CSS:

.gatherZip{
   background: white url('IMAGE_LOCATION_HERE') no-repeat center center;
}

The image you create can say or imply whatever you want. As an estimate, try to keep the image no more than about 15 pixels high or it won’t fit in standard sized textboxes. And that’s it. A beautiful textbox watermark just for you and your users! Comments? Questions?

So either in an external Javascript file (which is called the same way as an external CSS file), or in the head of your HTML inside a <script> tag, include the following javascript:

The Javascript:

function changeInlineStyle(tagID){
   var theTag = document.getElementById(tagID);
   if (theTag.style.display == 'block')
      theTag.style.display = 'none';
   else
      theTag.style.display = 'block';
}

The javascript first takes in a string with the tag ID that you send to it in the HTML below. Then, it creates an object that represents that ID which is named theTag. Then with a simple if statement, the javascript checks to see if the object is visible. If it is, it hides it, if it is hidden, it shows it. This is great for toggling a div with certain content. You can change different aspects of style though. Try "backgroundImage" or "backgroundColor" to change background characteristics. You can mess around with any aspect of tag’s style that you want. Text color, float, width, height, whatever you want. I have found the most common ones I use are display, backgroundColor, and backgroundImage though.

Here is the HTML that goes with the JS:

<a href="#" onclick="changeInlineStyle(targetTag);">
<div id="targetTag">This div will hide when the link above is clicked</div>

Yep, simple as that! When the link is clicked, it calls the javascript function, sending over the id to identify the tag it should work with. In this case, the link targets the div below it. Simple as that! I’ll talk about textbox watermarks next. Comments? Questions?

The Javascript:

function changeCSS(tagID)
{
   var currentTag = document.getElementById(tagID);
   currentTag.setAttribute("class", "secondClass");
   currentTag.setAttribute("className", "secondClass");
   return;
}

The second setAttribute function is for certain versions of IE that for some odd reason (IE sucks) setting the class through javascript does not always function properly. I personally have not noticed this issue with IE6 or IE7, and IE5 is tops 1% of your users, so you can probably leave it out, I’ve just seen other people using it…

And now the HTML that goes with that JS:

<a href="#" onclick="changeCSS(targetTag);" id="targetTag" class="firstClass">Adjust link CSS</a>

Yep, simple as that! When the link is clicked, it calls the javascript function, sending over the id to identify the tag it should work with. In this case, the link is adjusting it’s own CSS, but it can work on anything else in the page. But what if you want the link to work both ways, to be able to change the CSS class of an object back and forth instead of just one direction? Try this on for size, a simple if statement in your JS function (the same HTML will do)

The New Javascript:

function changeCSS(tagID)
{
   var currentTag = document.getElementById(tagID);
   if (currentTag.className == "firstClass")
   {
      currentTag.setAttribute("class", "secondClass");
      currentTag.setAttribute("className", "secondClass");
   }
   else
   {
      currentTag.setAttribute("class", "firstClass");
      currentTag.setAttribute("className", "firstClass");
   }
   return;
}

And that’s that! Simple right? It is also possible to just change a specific aspect of the CSS instead of the entire class, but I’ll talk about that in a future post. Comments? Questions?

So now you must be asking, how does this wondrous CSS miracle work? It is actually quite simple. Using only one image, you will restrict the size of your button (to only show part of the image which will be set as the background), and then use the pseudo-class :hover to shift the background-position of that image into the hovered portion. Again, this allows your full image to be preloaded so there is no delay on rollover. This has been cross-browser tested in Firefox 2 and 3, Internet Explorer 6* and 7, Safari, Opera, and Chrome, and it works perfectly. Here is an example below including the full image, the image as it will appear/work, the HTML, and the CSS.

My Example Button

This is the HTML:

<div class="rollover" id="exampleButtonIDHere">
  <a href="link location here">
    Put a summary of your button here. A few words will suffice, imagine this as the "alt" text for your image/link
  </a>
</div>

This is the CSS that made the image on the left into the button on the right.

.rollover a{
   display: block;
   text-indent: -9999px;
   margin: auto auto auto auto;
   cursor: pointer;
   outline: transparent solid 0px;
}
#exampleButtonIDHere a{
   height: 100px; /*This height is the visible portion of the button only*/
   width: 200px; /*Put your image width here*/
   background: url('Put your image location here') no-repeat left top;
}
#exampleButtonIDHere a:hover{
   background-position: left -100px; /*This negative value should match the height above*/
}

So basically, a div, with a background image of both buttons, and a height and width restricted to the size of only one of the default button, shifts on :hover to pushing the hover portion of the image up into the viewable portion of the div, with the default portion of the image pushed out. Simple right? I know! If you are going to have a lot of these buttons, I’d suggest a whole separate CSS document for them. You can also combine the .rollover with the #exampleButtonIDHere. I keep them separate because it reduces the length of the CSS document with lots of buttons.

Don’t forget the a tag inside the div tag, and include the a as part of your CSS style declarations. Each portion of that CSS is very important! The “display: block;” allows for the image to not be pushed out of it’s own div. The “text-indent: -9999px;” pushes the alt text out of the way, the “margin: auto auto auto auto;” eliminates any cross-browser issues with default settings, the “cursor: pointer;” forces every browser to display it as a link with the mouse icon changing, and the “outline: transparent solid 0px;” forces browsers to not outline the link when being clicked. If you have any trouble implementing this, let me know, because I completely swear by this amazing CSS trick. I’d also love to hear if you’ve had successes implementing this on your own website. Again, for great examples, check out College Prowler.

*Be careful, if you use png images for your buttons (which I do because they are far superior to gifs with transparency) then IE6 won’t allow your rollover to work. Most png fixes that I have found so far disable background-position properties in CSS in IE6. Annoying, but really not the end of the world. Either live with it for whatever percentage of your users are IE6 users, or use jpgs and gifs instead. I say the pngs are worth it for the better transparency quality and lower file size.