Sample JavaScript Image Flip for the Image Map
Below you will find the code used for this page, You may simply cut and paste the code, and
plug-in your own filenames and sizes for the images..etc..
Please note that Internet Explorer 3.0 doesn't support the image flip, but does support the status line messages
(The Katsation and LeChatPaws parts of the image use the image flip.)

Katsation Site Map Katsation Cats Purrsuits Cattery Karabel Cattery LeChat Paws Cattery Design Tyme The Silk Pyramid, HTML help Katsation


The Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Katsation's Site Map</TITLE>
<meta name="author" content="Judy berman">
<!--This script was actually cut out of above so that this page could be used within the frames of the SilkPyramid. If you place this script into your page it will automatically break out of someone elses frames when the page loads.-->
<SCRIPT LANGUAGE= "JavaScript" type="text/javascript"><!--
if (top.frames.length!=0)
top.location=self.document.location;
//-->
</SCRIPT>

<!--This script pre-loads the images for the flip part, it really isn't needed but makes for a faster image flip-->
<SCRIPT LANGUAGE="JavaScript" type="text/JavaScript"><!--// Hide from Older browsers

//This line "if(document.images)" in the script tells browsers that support javascript.. but not image flips to ignore these lines

if(document.images){

//"Bittersweet" 0

kat0on = new Image();
kat0on.src = "pics/bitter4in.jpg";
kat0off = new Image();
kat0off.src = "images/bit4.jpg";

//"LeChatPaws" 0

kat0on = new Image();
kat0on.src = "lechatpaws/lpics/sneak6in2.jpg";
kat0off = new Image();
kat0off.src = "images/bit4.jpg";
}
// Finish Hiding From Old Browsers -->
</SCRIPT>
</HEAD>
<body bgcolor="#FFFFFF" text="#000080" link="#FF80FF" vlink="#FF80C0" alink="#0080FF">
<center><B>Sample JavaScript Image Flip for the Image Map</B><P>
<a name="top"><IMG SRC="images/bit4.jpg" USEMAP="#KatsationSiteMap" border=0 width=422 height=356 alt="Katsation Site Map"></a>
<MAP NAME="KatsationSiteMap">
<!-- The Bold areas below are the parts of the map above that do the image flip when they are Moused Over...
 
The "if(document.images)" part is telling the browser once again to please ignore if it doesn't support the image flip...
 
The "images[0].src" part is telling the browser to change the first image listed on the page, this # may change if you have a different image on the page first...
 
The "window.status=" part is telling the browser to show this text in the status line of the browser,
 
The "onMouseOut" part is telling the browser to return the image and/or the status line back to normal, when the mouse moves out.
 
Please view the source code of the page, as you will notice that the lines below aren't "wrapped", each "<AREA SHAPE" is the beginning of a new line, and all the JavaScript code which follows is on ONE line, JavaScript doesn't like to be wrapped. -->

<AREA SHAPE=RECT COORDS="123,3,377,71" href="home.html#HOME" alt="Katsation Cats" onMouseOver="if(document.images)images[0].src='pics/bitter4in.jpg';window.status='Visit with Natl GRC Katsations Bittersweet of Karabel, DM';return true;" onMouseOut="images[0].src='http://www.katsation.com/images/bit4.jpg'; return true;">

<AREA SHAPE=RECT COORDS="314,77,420,122" href="http://purrsuits.com" alt="Purrsuits Cattery" OnMouseOut="window.status=''; return true" OnMouseOver="window.status='Purrsuits Cattery'; return true">
<AREA SHAPE=RECT COORDS="1,71,176,108" href="kar/" alt="Karabel Cattery" OnMouseOut="window.status=''; return true" OnMouseOver="window.status='Karabel Cattery'; return true">

<AREA SHAPE=RECT COORDS="1,158,133,193" href="http://lechatpaws.com/index.html" alt="LeChat Paws Cattery" onMouseOver="if(document.images)images[0].src='lechatpaws/lpics/sneak6in2.jpg';window.status='Visit with G.C. Karabels Sneak Preview';return true;" onMouseOut="images[0].src='images/bit4.jpg'; return true;">
<AREA SHAPE=RECT COORDS="233,308,420,356" href="http://www.designtyme.com/webprice.html#top" alt="Web Design" OnMouseOut="window.status=''; return true" OnMouseOver="window.status='Web Design'; return true">
<AREA SHAPE=RECT COORDS="24,298,191,355" href="http://www.silkpyramid.com/" alt="The Silk Pyramid, HTML help" OnMouseOut="window.status=''; return true" OnMouseOver="window.status='The Silk Pyramid, HTML help'; return true">
<AREA SHAPE=default href="http://www.katsation.com/index2.html#HOME" alt="Katsation" onMouseOver="window.status='Katsations Main Index Page';return true;" OnMouseOut="window.status=''; return true">
</MAP>
<P> <BR>
<B>

<!-- The same "word wrap" rules apply to the status line messages.... Put the JavaScript code on ONE line, as JavaScript doesn't like to be wrapped... The lines below each start with "[<a HREF" and end with "</a>]", with the spacer GIF in between. -->

This Page Designed for use with
The Silk Pyramid
THE Place to find HTML Help.

 

Google
 


The Pet Rescue.com   ~   The Humane Society.org

Click Here! New Photos Katsation Himalayans and Persians ... - Free toys, food
samples and "kitty go home" blanket with the purchase of a Kitten!

Himalayan / Persian Kittens for Sale!

Meet The Weblady
 
Have the Tyme?
Suggest this site to a friend !

Your Name and/or E-Mail:
Your Friends E-Mail:

For product prices, availability and/or order
information, please click on the photo or text
link for that product.
Thank You!

Other Questions? Comments?
Judith Berman
Phone: 1-706-783-4722
Comer, Ga.   30629

08:33 PM
September 22, 2018

Disclaimer: Design Tyme is in no way, shape, or form responsible or liable for the ethical or moral integrity of other Businesses, Catteries, Kennels, People, Listings, and/or Posts featured on its pages. Each Business, Cattery, Kennel, Person, Listing, and/or Post is a distinct and separate entity in its own right.

Copyright © 1998-2018 All Rights Reserved
Privacy Policy
Reserved