design: ride the honu

Honu is the Hawaiian word for the green sea turtle. You'll see honu drawings from old stone carvings all over Kauai, on aloha shirts, menus, boogie boards, you name it. Popular little guys. This one swims all over the web - just give him a click and see where he'll take you. Hurry back and I'll show you how he works.

scripts to include

Back already? That was quick. All the honu stuff lives in one script file that's included in the head section of the page:

<script type="text/javascript" src="honu.js"></script>

The honu.js script contains an array of fifty-odd links, plus a simple little function to pick one of them at random. Here's the first couple of working lines in the file. What happens below is a new array is created and then a couple of items are inserted into it. Actually, lots of items are inserted in it, but I'm only going to show you a couple of them, because you like surprises, right?

var honu = new Array();
honu[0] = "http://www.comics.com/comics/frazz/";
honu[1] = "http://britneyspears.ac/lasers.htm";

The other thing of interest in the script file is the random link picker. Here's the rideTheHonu() function:

function rideTheHonu() {
  window.location = honu[Math.floor(Math.random() * honu.length)];
  return false;
}

The window.location is the JavaScript way of addressing the URL of the page you're looking at in your browser. Change it and you see a different web page. This value is set to an item randomly selected from the array we created. The second return false line is for form processing (we'll look at this next).

page code

Here's what the little form on the page looks like:

      
<form id="honuform" name="honuform" 
  method="get" 
  action="http://www.janbrett.com/" 
  onsubmit="return rideTheHonu()">
  <input type="image" id="honu" src="images/honu.gif" 
    alt="ride the honu" title="ride the honu">
</form>

The form tag's action value is the URL of Jan Brett's home page. This is one of the links in our array from honu.js. You may recognize the onsubmit handler value as the function we looked at earlier. The input tag acts like a button with a picture in it - click the image and the form submits.

There are simpler ways of making this work - we could do it in a single link tag if we wanted to. But this method lets visitors without JavaScript enabled ride the honu too. With JavaScript enabled in the browser, the onsubmit handler fires before the form is submitted. The handler sets the window.location to a new place, and then returns false. This prevents the form from submitting. Visitors without JavaScript click on the honu and the form submits - this takes them to Jan Brett's site. Everybody's happy.

stylin' honu

We want our little honu to fit in well with his friends on the site, so we took him to the salon for a style. This is how he's styled for the deep gray sea personality on the site:

/* ride the honu */
#honu {cursor: pointer;
  display: inline;
  border: 1px solid #0D2D40;
  padding: 0;
  vertical-align: text-bottom;
  margin: 3px 10px 0px 0px;
  float: left;}

He floats, of course. Aloha!