Java Script for "highlighted buttons"


Graphics on a page that appear to become highlighted when your mouse is passed over them are really two different graphic images that the Netscape has loaded at the same time and then swaps them with each other on the page. If you view the same page in Internet Explorer, you will not see the graphics change, but the hyperlinks that are attached to them will still work. Jave Scripts that allow graphics to change are Netscape specific.

There are a few different Java Scripts on the internet that will accomplish this effect, but the one used for this lesson is in my opinion, the the easiest one to understand and edit to suit your own needs.

For this lesson, I have created a sample page with highlighting buttons. View the source code of the sample page so you can see how the java script is written. The code for the highlighted buttons effect is in two parts. The first part is the actual script itself that defines which button is for what purpose. The beginning and end of the JavaScript is clearly marked, with the buttons defined in between. Scrape across the top section of script, down to the script's closing code (</SCRIPT>), then paste it into a new Simpletext or Notepad file. Since you need enough code for four buttons, you will need to add a couple of sets of code that deal with specific buttons. Modify the "button specific portion of the code so that it reflects the names of the buttons on your practice website as shown below.

<SCRIPT LANGUAGE = "JavaScript">
<!--
window.onerror=null;
browserName = navigator.appName;
browserVer = parseInt(navigator.appVersion);

    if(browserName=="Netscape" && browserVer >= 3) ver = "yes";
    else ver = "no";
    if(ver == "yes") {

    home1 = new Image(); home1.src = "home1.gif";
    home2 = new Image(); home2.src = "home2.gif";

    aboutus1 = new Image(); aboutus1.src = "aboutus1.gif";
    aboutus2 = new Image(); aboutus2.src = "aboutus2.gif";

    orderform1 = new Image(); orderform1.src = "orderform1.gif";
    orderform2 = new Image(); orderform2.src = "orderform2.gif";

    email1 = new Image(); email1.src = "email1.gif";
    email2 = new Image(); email2.src = "email2.gif";
    }

function active(imgName)
{
    if (ver == "yes")  {
    img1 = eval(imgName + "1.src");
    document [imgName].src = img1;
    }}

function inactive(imgName){
    if (ver == "yes")  {
    img2 = eval(imgName + "2.src");
    document [imgName].src = img2;
    }}
// -->

</SCRIPT>


The second part of the code is where you place the button on the page and reference it back to the java script. Go back to the sample page's source code and scroll down to where you see the buttons listed the second time, and copy the code and paste it in your file. Modify the code so that it has the new button's names just like you did with the first section. Since you have an e-mail button, remove the targetting information for that button. The second section of code should now look like this:

<A HREF="home.html" TARGET="main" onMouseover = "inactive('home');
window.status='Home';return true" onMouseout = "active('home')">
<IMG SRC="home1.gif" ALT="Home" NAME= "home" BORDER=0></A>

<A HREF="aboutus.html" TARGET="main" onMouseover = "inactive('aboutus');
window.status='Aboutus';return true" onMouseout = "active('aboutus')">
<IMG SRC="aboutus1.gif" ALT="Aboutus" NAME= "aboutus" BORDER=0></A>

<A HREF="orderform.html" TARGET="_parent" onMouseover = "inactive('orderform');
window.status='Orderform';return true" onMouseout = "active('orderform')">
<IMG SRC="orderform1.gif" ALT="Orderform" NAME= "orderform" BORDER=0></A>

<A HREF="mailto:[email protected]?Subject=Request for more information"
onMouseover = "inactive('email'); window.status='email';return true" onMouseout ="active('email')">
<IMG SRC="email1.gif" ALT="E-Mail" NAME= "email" BORDER=0></A>


The "window.status=" part of the code above will cause the browser's status bar at the bottom of the window to say whatever you write within the quote marks when your mouse passes over the button. Change this part of the code to say something a little more interesting than just stating the page�s name.

<A HREF="home.html" TARGET="main" onMouseover = "inactive('home');
window.status='Back to out homepage.';return true" onMouseout = "active('home')">
<IMG SRC="home1.gif" ALT="Home" NAME= "home" BORDER=0></A>

<A HREF="aboutus.html" TARGET="main" onMouseover = "inactive('aboutus');
window.status='Preview some of our travel packages.';return true" onMouseout ="active('aboutus')">
<IMG SRC="aboutus1.gif" ALT="Aboutus" NAME= "aboutus" BORDER=0></A>

<A HREF=orderform.html" TARGET="_parent" onMouseover = "inactive('orderform');
window.status='Request more information or order our products'.;return true" onMouseout = "active('orderform')">
<IMG SRC="orderform1.gif" ALT="Orderform" NAME= "orderform" BORDER=0></A>

<A HREF="mailto:[email protected]?Subject=Request for more information"
onMouseover = "inactive('email'); window.status='E-Mail us!';return true" onMouseout ="active('email')">
<IMG SRC="email1.gif" ALT="E-Mail" NAME= "email" BORDER=0></A>


You can save this new file and refer back to it when you want to use it again. To add or remove buttons, you just add or remove the number of sets of code that pertain to specific buttons, and keep the rest of the JavaScript intact.

Up until this point, your buttons have kept their origial name. Now that you will be refering to two buttons for each hyperlink, you will need to modify the names of your original buttons.

Rename your homebutton.gif graphic file as home1.gif, your aboutusbutton.gif as aboutus1.gif, the orderformbutton.gif as orderform1.gif, and your emailbutton.gif as email1.gif


















Hosted by www.Geocities.ws

1