Get best price on Prepaid Samsung Galaxy A01 | ||||||||||||
|
||||||||||||
|
JavaScript : Mouse-oversMove your mouse over the button.
Here's the JavaScript, which you would put in the HEAD portion of your HTML document to use the mouse over hilight:
<SCRIPT LANGUAGE="JavaScript"><!--
testOff = new Image(22, 123); testOff.src = "btn.gif"; testHi = new Image(22, 123); testHi.src = "btn_hi.gif"; function hilight(imgName) { imgOn = eval(imgName + "Hi.src"); document [imgName].src = imgOn; } function normalize(imgName) { imgOff = eval(imgName + "Off.src"); document [imgName].src = imgOff; } //--> </SCRIPT> So what is all that stuff?
testOff = new Image(22, 123);
testOff.src = "btn.gif"; testHi = new Image(22, 123); testHi.src = "btn_hi.gif"; The first part is just creating new image objects. First we assign the name 'testOff' as an Image and the what size the image is. For some weird reason the size is (height, width). The next line is telling JavaScript where it can find the source for the image, ie. the location. We do the same for 'testHi' which will be the hilighted image object.
The next section is defining our functions. We need to functions, one when the Mouse goes over the image, and one when the Mouse exits the image.
function hilight(imgName) {
imgOn = eval(imgName + "Hi.src"); document [imgName].src = imgOn; } function normalize(imgName) { imgOff = eval(imgName + "Off.src"); document [imgName].src = imgOff; } The function is passed the imgName, which is just the name of the image it is going to hilight. We then create the hilighted image object, this is done by taking the imgName adding on to it the Hi.src to get the image object variable we created above. The next command uses the imgName to find the object in the document, named in this case 'test', it then changes that objects src to our image object. The other function does the same thing, but it creates a different image, one that is Off or non-hilighted, usually the image that loads on the page. To use this JavaScript, you need to call it within your BODY section of your HTML document. If your hilighted image is a link, then the best place to put the function calls is in the anchor tag <A HREF... portion. This is because in early versions of Navigator, the anchor tag or links were considered objects which can be used by JavaScript, and images were not considered objects. Now everything on the page I believe, is considered an object. If the image you wish to hilight with the mouse over is not a link just put the following code in the IMG tag, but you should make sure that you use version checking (see below).
<A HREF="js_menu.html"
onMouseover="hilight('test')" onMouseout="normalize('test')">
<IMG SRC="btn.gif" BORDER=0 NAME="test"></A>
In order to save space I have removed the width, height, and alt tags, these should be in each image you use. This helps the browser's layout manager and people using text-browsers, or screen readers. There is a problem using just the above code. Netscape Navigator version 2.02 and prior, did not have a image object, so this would not work. So you need to do some version checking to insure that no errors will pop up if some one is using Navigator 2.0. The script to do version checking is: var verNum;
verNum = parseInt(navigator.appVersion); if (verNum >= 3) { ... code goes here ... } For more information on checking the browser version see the
version checking section, page. You use the same HTML tags in the body as above, so the complete JavaScript with version checking, would look like this:
<SCRIPT LANGUAGE="JavaScript"><!--
var verNum; verNum = parseInt(navigator.appVersion); if (verNum >= 3) { testOff = new Image(22, 123); testOff.src = "btn.gif"; testHi = new Image(22, 123); testHi.src = "btn_hi.gif"; } function hilight(imgName) { if (verNum >= 3) { imgOn = eval(imgName + "Hi.src"); document [imgName].src = imgOn; } } function normalize(imgName) { if (verNum >= 3) { imgOff = eval(imgName + "Off.src"); document [imgName].src = imgOff; } } //--> </SCRIPT>
You don't have to change the image the mouse rolls over either. You can name another image and have that one change. All you need to do is to change the IMG NAME= tag. Here's an example, roll over the button again. Here is an example of an even fancier JavaScript mouse-over concept. However, be careful how you use it. Specifically, do not implement this for navigation. The term for the mess that results is "mystery meat navigation." See Web Pages That Suck . com for details.
|
privacy policy || © 1997-2016. astonishinc.com All Rights Reserved. |