|
In part one of this series, we looked at slicing your images with Ulead's SmartSaver Pro. Now we're going to take a look at how to add some action to your site, without purchasing expensive software - by using JavaScript!
The World Wide Web has come a long way in the past few years, and sites designed two years ago look ancient by today's standards. A few years ago, it was commonplace (and indeed, quite acceptable) to have the navigation structure of your web site be nothing more then a series of text links at the bottom and top of your page. The only motion on the page was from animated GIFs, and more often than not they were irritating and didn't add anything to the presentation of the web site.
Times change, and now we have highly interactive web sites using technologies like Macromedia Shockwave/Flash, JavaScript, Java applets, DHTML, and others. Although all of these technologies are successful to a degree, we're going to focus on JavaScript because it has the widest browser support, and the best price (free!). The strength of JavaScript lies in its ability to be quickly downloaded (it is text) and executed instantly. Although JavaScript can be difficult to implement properly, this article show you how to easily add the most commonly sought-after JavaScript effect: the "something changes on the page when I move the mouse over something else" effect, also known as an onmouseover or rollover effect.
The scripts we are going to be using were designed by an associate of mine named Scott Sharp. I'm not a programmer myself, and the JavaScripts I found out on the 'Net weren't easy to understand and seemed far to complicated for what I wanted to accomplish. Scott managed to create a very elegant solution that required far less code than other scripts I've seen. Scott has allowed his code to be published here and used by you all - send him a thank you note if you like what he's done and plan on using his script.
Before we go any further, it's important to note that adding animation and motion to your site needs to be done with a specific purpose in mind. It should add to the overall effectiveness of the site, not just be added "gee whiz" that takes up bandwidth and time. The onmouseover effect adds a visual indicator to your visitor that something will happen when they click on it, which adds to the intuitiveness of your site. So it's a good thing!
[note that all the effects on this page will work with Netscape 2.0 and higher, and Microsoft Internet Explorer 4.0 and higher - IE 3.0 users are out of luck, and the lack of JavaScript support was a big problem with IE 3.0]
The Basic 1-2 Onmouseover Effect
This effect is fairly straight forward - you have one image (say, a button or text item) and when the mouse moves over it, the "over" graphic loads. Hover over the graphic below to see this effect in action:
This effect is accomplished with two pieces of code: the actual JavaScript (JS) which is placed at the top of the page (above the <HEAD> tag) and a few small pieces of code inserted into the code for the image itself. Don't worry, it's not that scary to do! Follow these steps:
Step 1 Create your graphic in two forms: the "on" and "off" states. It's easiest to create the OFF version first (the plain looking button that loads first), save it, then change it somehow. For the ON button (the fancy one with the fire) I used the CREATIVE TYPE feature in Ulead PhotoImpact. Make the buttons the same size, or else your page will shuffle around when the button changes. Name your files something that makes sense - I called mine button_on.jpg and button_off.jpg.
Step 2:Write down the exact pixel dimensions of the graphic (i.e.: 42x87) - you'll need this information in a minute.
Step 3: Insert the following code into your HTML page, placing the code in red somewhere inside your head tag. I've included a sample of what your page might look like. You only need to cut and paste the code in red, nothing else.
<html>
<head>
<title>Your title would go here!</title>
<meta name="GENERATOR" content="Microsoft FrontPage 3.0 - The Tool of Champion Webmasters!">
<script language="JavaScript">
if (document.images)
{
toc1on = new Image(71,82);
toc1on.src = "button1_on.jpg";
toc1off= new Image(71,82);
toc1off.src= "button1_off.jpg";
toc2on = new Image(71,82);
toc2on.src = "button2_on.jpgf";
toc2off= new Image(71,82);
toc2off.src= "button2_off.jpg";
}
function img_act(imgName)
{
if (document.images)
{
imgOn = eval(imgName + "on.src");
document[imgName].src = imgOn;
}
}
function img_inact(imgName)
{
if (document.images)
{
imgOff = eval(imgName + "off.src");
document[imgName].src = imgOff;
}
}
</script>
</head>
<body>
[Your web site content would then come next]
There are four important things to notice about this script:
- toc1 is the name of the function - without the name, the script doesn't know what to do.
- There are also copious amounts of ;'s and }'s in the code - if even one of these is missing, it won't work!
- You need to specify the pixel dimensions of your graphic or it won't work: toc1on = new Image(71,82); [change info in blue for each toc you've created, and it's in the format of height, width]
- The pixel dimensions of the ON and OFF image must be the same.
The sample code above has two onmouseovers, but you can have as many as you want: just copy/paste the four lines of code near the top and change the numbers. For example, if we wanted to add a third effect to the page, we'd add the following code:
toc3on = new Image(71,82);
toc3on.src = "button3_on.jpg";
toc3off= new Image(71,82);
toc3off.src= "button3_off.jpg";
Notice that all we changed was the toc1 to toc3, and the names of the files. That's all it takes!
Step 4: Once we have our JS pasted into the HEAD of our HTML page, the final step is to change the code around our image files so it works. The code below is taken from the button example above.
<a href="jd-4-4-99.htm" onmouseover="img_act('toc1'); return true;" onmouseout="img_inact('toc1')">
<img src="button_off.jpg" width="71" height="82" alt="I'm one HOT button baby!" border="0" name="toc1">
</a>
The first line of code is the link code - it creates the hyperlink to another page in the site. The code in red is the code you need to include - pay close attention to the numbers. If this is for your first onmouseover effect, it should be toc1. If it's the second one, it should be toc2, etc.
The next line of code links to your graphic - the only JS code you need to worry about here is the name="toc1" code. And like all the others, if you have three JS effects, each graphic will be named appropriate: toc1, toc2, toc3, etc. Note that some HTML editors (like FrontPage) won't recognise the name=toc1 as valid code and will delete it, so make sure you add your graphic then manually add the name="toc1" code.
The last line of code closes off the link (no JS here!).
And there you have it - the 1-2 onmouseover effect! Although you should be able to do this by following the above steps, if you'd like a little "help" you can give the Navworks Mega Coder a try. It's a web-based form that generates onmouseover code for you. However, it's not as flexible or elegant as the code above.
Up Next: Code examples of two advanced JavaScript effects... |
