A fully interactive image map of the united states using pure CSS; great rollover technique

I had actually written this in 2006, but I saw this technique used recently and apparently it's a 'new' technique. You can see this example here. Really the coding is pretty simple, though a little bit tedious.

First thing is to simply make a list of the items you want in the image map. I use dl->dt/dd here instead of a ul->li which would work just as well. Notice my dt element is just 'us', then I start with the states: 'al', 'ak', etc. Also notice that each dd has an 'img' id and each a holds an id and a span with the state name in it.

<dl id="imap">
   <dt><a id="us" href="#nogo" title="us"><span>United States</span></a></dt>
   <dd id="imgal">
     <a id="al" href="#al" title="Alabama"><span>Alabama </span></a>
   </dd>
   <dd id="imgak">
     <a id="ak" href="#ak" title="Alaska"><span>Alaska </span></a>
   </dd>
  ...
</dl>

Next we move on to the css, which is pretty simple to understand, it is just that getting the values is a pain. One of the most imporatant values is the position of the 'box' for each state. You can see if you look further into the css that all of these are relatively positioned in relation to the whole map - it is the upper-left corner of where the 'box' is. I say box because css only works in squares. It takes some planning, but most any shape can be achieved by overlapping squares, and that overlapping is controlled by z-index. Also you will see that the images are positioned negatively against the position so they sit int he right place. And finally, the height and width are just the height and width of the image.

/*ALABAMA*/
#imap #imgal { left:400px; top:220px; z-index:20; }
#imap a#al:hover { background:url(images/states/al.gif) -400px -220px; }
#imap a#al { width:45px; height:70px; }

Repeat this over and over, and you have a full 'image map' made with CSS only. Not the fastest method, but it works and is better than the old image map methods IMO.

Simple way to add watermarks to your textboxes for a little flair in your input forms

I have always used the TextBoxWatermark control that is supplied with the AjaxControlToolkit which is very easy to use and I highly recommend it.  But recently I was asked to figure out a way without using 3rd party tools, hence in JavaScript.  At first I figured it was going to be simple, just clear the text when you click on the box and maybe change the background color.  Simple, that works.   Thats when I ran into my next problem.

 

I wanted a textbox that was forr passwords, it would start out and say 'password' but then when you clicked on it, that would disappear and it would become a type="password" box (display text as: ******).  It worked flawlessly! ...in non-crappy browsers.  IE7 dumped all over my dreams yet again and left me with a Javascript error.  Turns out you can't change the type property in IE7 (apparently it works in IE6???) which is completely stupid.

 

So, I did some good old googling which brought me here to find out that in order to change type, you now have to make an entire new object and swap it out with the old one.  So after that, it works, but my focus is all screwed up: I click on the blank, the password text disappears, but the cursor is not in the textbox I just clicked?!  That brought me here which showed me a crazy way to reset focus on a lost object:

window.tempObject = newObject;
   setTimeout("tempObject.hasFocus=true;tempObject.focus();",1);

Now everything seems to work just fine.  BUT, they aren't.  For one thing, I had had an onblur statement in my textbox originally (not in the example, but for discussion purposes) and since the new object did not have an onblur, I had to make sure to re-add that back in.  Also, the same loss goes for CSS class, but that might want to change, so I added a new field into the function to take into account a new CSS class.  If it is left blank, it will inherit the old CSS class if there is one, or simply have no class like Britney Spears. 

 

Ok, so I *thought* that would be easy, but IE comes back again to spite me.  For most browsers, you can set Object.setAttribute("onblur", "JSmethod") but IE decides that isn't good enough, so you have to to this Object.onblur = function(){js_function(god, damnit, ie);}; (from this thread).  Ok, now that we have that fixed, we can look at the CSS class.  It's mostly the same, but this is yet another IE specific problem.  You need to include two different declarations: Object.setAttribute("class", "css_class"); for most browsers and Object.setAttribute("className", "css_class"); for IE.  This time the IE fix/hack will not work for cross-browser compatibility.  So here is the finished JS:

 

 

Remember though that you will have to validate that the original values are not in the textboxes when the user submits, as they will not be empty initially.  Here is a fully working example to mess with, it shows how to use it both for a simple watermark/mask and also with a password field change.  It also includes how to add javascript function calls and deal with changing (or persistent) css:

 

If you have a form that limits characters entered into a textfield, using this simple approach you can automatically jump to the next control, making it easy for your user

Say you have a zip code field that takes in 5 numbers, next you have a state dropdown.  Your user should be able to type in the 5 digit zip code, then boom, the focus is automatically shifts to the dropdown.  It is very simple to implement.  It just requires the following JS function:

 

function next(currentControl, maxLength, nextControl)
   {
    if(document.getElementById(currentControl).value.length >= maxLength)
    document.getElementById(nextControl).focus();
  }

 

and then just call this from a textbox in html:

<input id="Text1" onkeyup="next('Text1', '5', 'Text2')" type="text" />

Or if you are using an asp.net TextBox control:

txt1.Attributes.Add("onkeyup", "next('txt1','5','txt2')");

it's just that easy... here is an example using both asp.net and just html:

Recently on a forum the question was asked how to redirect using a dropdown and not using any server side scripting - the answer turns out to be pretty simple

All that is needded is a simple Javascript function that takes in a drop-down list as an input, takes the value of the selected option and run it through a location.href.  Here is the JavaScript:

function Navigate(drop_down_list) {
   var number = drop_down_list.selectedIndex;
   location.href = drop_down_list.options[number].value; }

Then all you need to do is add a dropdown list setting the values to the urls you want to navigate to, and the onclick event set to Navigate(name_of_dropdown) and you are all ready to go. Here is a quick example:

Great looking 'web 2.0' (god I hate that term) rounded textboxes - fully adjustable to the length of your textbox using css 'sliding doors'

 I saw some of these rounded textboxes somewhere (?) and I though they looked pretty good.  Even though they don't really go with any of my sites, I wanted to know how they were done.  I figured the easiest way to get them working without making a ton of images would be to use CSS sliding doors technique I picked up from http://alistapart.com/ a while back (awesome site!). 

 

The finished product looks pretty good, uses strictly html and css (asp controls work great too) and really couldn't get much easier.  It works for single-line textboxes as well as checkboxes.  You could easily take the concept to a multiline textbox if you just added some larger images.  The code is pretty self-explanatory, so I won't get into the details here.  I included the .png files so you can customize the colors if you want - just drop in the code and go.