Flangy > Software Development > JavaScript

Client-side JavaScript

On this page:

• Parsing the querystring
• Image roll-overs

Download: QueryString.zip

This code creates an object that lets you get values for names from the querystring.

Example Usage

var qs = new Querystring()
alert(qs.get("param1","some default value"))

This code could be useful if you want to do some simple browser-only test pages, like color pickers or font size viewers, without needing any CGI access.

Font size viewer.

The Code

function Querystring()
{
// get the query string, ignore the ? at the front.
	var querystring=location.search.substring(1,location.search.length);

// parse out name/value pairs separated via &
	var args = querystring.split('&');

// split out each name = value pair
	for (var i=0;i<args.length;i++)
	{
		var pair = args[i].split('=');

		// Fix broken unescaping
		temp = unescape(pair[0]).split('+');
		name = temp.join(' ');

		temp = unescape(pair[1]).split('+');
		value = temp.join(' ');

		this[name]=value;
	}

	this.get=Querystring_get;
}


function Querystring_get(strKey,strDefault)
{
	var value=this[strKey];
	if (value==null)
	{
		value=strDefault;
	}

	return value;
}

Lots of image roll-over code does two explicit Image object creations per roll-over. This means for each roll-over there are two more explicit JavaScript variables, and the path to the original image is repeated in the img tag and the JavaScript.

This code lets you set up roll-overs by adding pairs of IDs and img paths to a list. The Image objects are created out of this list and added to a hash, and you don't have to duplicate the original image path.

Following is the code block to put in your page's head. Replace the "b#" strings with your image IDs, and the paths with the paths of the images to swap in.

<script language="JavaScript">

var Hots, swapsrc, swapimg

// swap in
function sin(which)
{
	swapimg = document.images[which]
	swapsrc = swapimg.src
	swapimg.src = Hots[which].src
}

// swap out
function sout()
{
	swapimg.src = swapsrc
}

  
function Initialize()
{
  var HotList = [
["b1","images/TheFlangyNews/tsuckers.gif"],
["b2", "images/TheFlangyNews/tlinkfarm.gif"],
["b3", "images/TheFlangyNews/tcontact.gif"],
["b4", "cam/status.py?d=1"]]

  Hots = new Object()
  
  for (i = 0; i < HotList.length; i++)
  {
    img = new Image();
    img.src = HotList[i][1]
    Hots[HotList[i][0]]=img
   }

}

Initialize()

</script>

The HTML code for an individual image follows. Again, replace "b#" with your own image ID. (You'll want to put all those tags on the same line; some browser add extraneous spaces to the link if there are line breaks.)

<a href="/suckers" onmouseover="sin('b1')" onmouseout="sout()">
<img src="images/TheFlangyNews/tsuckers2.gif" width="80" height="20" border="0" name='b1'>
</a>

Usage notes

Each roll-over image on your page needs a unique ID. I'm using b1, b2, etc. for mine.

In the Initialize function an array is set up with the IDs and the image to use on in the rolled-over state.

The image itself should have a name='the id' attribute. The A around the image needs to have onmouseXYZ events as shown above, substituting the proper ID in the onmouseover event.

If you wanted, you could pull the functions into a separate .js file that's included on the pages that have roll-overs. You'd then add a parameter to Initialize so you could pass in the id/image list. In the head of each page you'd then make your list and then call Initialize with it.