scriptygoddessWell, this just wouldn't be a scripty blog without a little mouseover tutorial. Here's a simple little mouseover script/tutorial:
(I should add, there are many many many different ways to do mouseovers. This is just ONE of them. I'm not saying this is the "best" way.)
<script language="javascript">
<!–
/***************
for each "ON" version of your images, you'll have one "element" in your array. You're going to specify each element as being of type IMAGE, and then give the width and height of that image. Also for each "element" (ie. [0], or [1]) you'll specify a source… the path to where the image is.
****************/
var imgarrayon = new Array(2) // the (2) here says there are two elements.
// I know you see four lines below, but remember,
// each element is defined as and
// image (w,h) and a path (which is the[0].src)
imgarrayon[0] = new Image(165,16);
imgarrayon[0].src = "images/about_on.gif";
imgarrayon[1] = new Image(92,16);
imgarrayon[1].src = "images/myblog_on.gif";
/***************
do the same for your OFF versions
***************/
var imgarrayoff = new Array(2)
imgarrayoff[0] = new Image(165,16);
imgarrayoff[0].src = "images/about_off.gif";
imgarrayoff[1] = new Image(92,16);
imgarrayoff[1].src = "images/myblog_off.gif";
/***************
now we're going to make a correspoding array of names. This time, it's only one line for each element. Make sure these names match up with the correct image specified in the above array, and what you declare in your image tag (ie. <img name="imagename"…etc.
***************/
var imgName = new Array(2)
imgName[0] = "about";
imgName[1] = "myblog";
/***************
these two functions, you pretty much leave as is. If for some reason you decide to change variable names you'll notice that these names match the variables you defined above, so just make sure that IF you're going to change them, you change them in both places
***************/
function imageOn(i) {
document[imgName[i]].src = imgarrayon[i].src;
}
function imageOff(i) {
document[imgName[i]].src = imgarrayoff[i].src;
}
/***************
Here's an extra function you can use if you want to display discriptive text as to WHAT the link is for
***************/
function setMsg(msg) {
window.status = msg;
return true;
//–>
</script>
OK. Now that above stuff goes in between your <head> tags on your page… Here's where how you use it (in the <body>)
here's the sample links using the above for doing the mouseover…
<a href="docs/about.htm" onMouseOut="imageOff(0); return setMsg(' ')" onMouseOver="imageOn(0); return setMsg('about)"><img src="images/about_off.gif" name="about" width="165" height="16"></a>
Did you see how we put the number "0" inside the "( )" when we called the function "imageOff"? We used a "0" there because that's how it's defined in that stuff in the header…
take a look at imgarrayon[0], or imgarrayoff[0], or imgName[0]… 0 is for the about button.
Consequently, "1" will be used for the "my blog" mouseover… so that would looke like this:
<a href="docs/myblog.htm" onMouseOut="imageOff(1); return setMsg(' ')" onMouseOver="imageOn(1); return setMsg('My Blog)"><img src="images/myblog_off.gif" name="about" width="92" height="16"></a>
You'll notice also that in the "default" showing of the image, we're using the "off" version of the button.
As for that "setMsg()" function. You have it empty like this: (' ') onMouseOut, and definite it for onMouseOver, like this: ('My Blog'). Make sure you throw that "; return " in there between the two function calls.
