12/10/02 updated 02/06/06

Flip Flap Two Images

Touch The Jet With You Mouse

  • The Picture Of The Jet Is A One In A Million Picture
  • Picture Taken July 7,1999
  • At The Split Second The Jet Broke The Sound Barrier
  • Click On The Jet To Read The History Of The Photograph
  • And A Much Larger Photograph

F or This Effect To Work Properly
The Page Needs To Be Fully Loaded

W e have tested the code in IE5.5, IE6, Netscape4.08 and Netscape7.0. This script worked well in all platforms tested with no variations observed.

T his "Flip Flap" image mouseover effect is very easy to do depending on your knowledge of HTML and java scripts. It is a one part copy and paste code that is pasted into the <BODY> section of your document where ever you want it to appear.

F ind two images or pictures you like that are about the same size that you want to use. Below are where you add your images and pixel size of your images.

<SCRIPT LANGUAGE="JavaScript">
<!-- hide from none JavaScript Browsers
Image1= new Image(175,140)
Image1.src = "Path To Your First Uploaded Image"
Image2 = new Image(175,174)
Image2.src = "Path To Your Second Uploaded Image"
function SwapOut()

Y ou can notice in the above code the numbers associated with both images, either:

Image1= new Image(175,140)
Image2 = new Image(175,174)

T he above pixel sizes must match the width and height in the in the below section of script. In other words
Image1= new Image(175,140)

Must Be The Same As

<IMG NAME="Rupert" SRC="Path To #1 Image" WIDTH=175 HEIGHT=140 BORDER=0></A>

B elow is where you make the reconfigurations for the initial image to appear and the URL it will call when the picture is clicked.

<A HREF="Path To URL The Picture Will Link"target="_blank" onmouseover="SwapOut()" onmouseout="SwapBack()">
<IMG NAME="Rupert" SRC="Path To Image1.src" WIDTH=175 HEIGHT=140 BORDER=0></A>

A s you can notice in the above section of code, we added the attribute of target="_blank" to the linking URL. This is to make the link open in a new browser window as opposed to opening in the same window. This can either be added or left as is and open in the same window.

W e would also suggest that you may want to read our section on "Optimizing" an image first. This explains why you should optimize pictures for compression and loading speed.
 [ Why You Should Optimize ]

I f you do decide to Optimize" your images the below link will take you to an Adobe® online graphic editor. When you get to this page just click on "Image Optimizer" to start the process. If you also want to resize and enhance your photographs click on
"Create A Graphic" to start your photo enhancements.

T his online program is not hard to follow but it just takes a little time to figure out all the great features it has and how to use them to your greatest advantage.
 [ Adobe® Graphic Editor ]

I f you would like to add this effect into your pages, grab the respective below link and you are there. We hope our tutorial was easy to follow and we covered everything in detail. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ]   [ Rate This Page ]  

T his exact script is no longer in the archives of Draac.com. The above link will take you to a similar script without the linking option. If you would like this version, just copy the below script and paste it into your document.

Select All

Talk Live To A Support Technician

Search Our Site By Individual letter

[ A ]  [ B ]  [ C ]  [ D ]  [ E ]  [ F ]  [ G ]  [ H ]  [ I ]  [ J-K ]  [ L ] 
[ M ]  [ N-O ]  [ P-Q ]  [ R ]  [ S ]  [ T ]  [ U-V ]  [ W ]  [ X-Y-Z ] 

Little Tips Directory

[ Page 1  ] [ Page 2 ] [ Page 3 ] [ Page 4 ] [ Page 5  ] [ Page 6  ] [ Page 7  ]

[ Index Page 1 ] [ Index Page 2 ] [ Index Page 3 ] [ Index Page 4 ] [ Index Page 5 ]
[ Index Page 6 ] [ Index Page 7 ] [ Index Page 8 ] [ Index Page 9 ] [ Index Page 10 ]
[ Index Page 11 ] [ Index Page 12 ] [ Index Page 13 ]

[ News Letter Archives ] [ Navigation Page ] [ Archives Of Published Material ]
[ Link To Us ] [ Alphabet Index ] [ Feedback ] [ On Line Support ] [ FAQ ]
[ Webmaster Utilities ] [ Casino ] [ Banner Exchange ] [  Advanced Site Search ]

If you are part of the ever growing number of webmasters who enjoy sharing your knowledge with others on web design, join The Consigliere Ltd. web ring to broaden your scope of exposure.
Join Today

This Site Was Built And Is Maintained Exclusively by
The Webmaster @ Consigliere Ltd.

Copyright © Consigliere Ltd., All Rights Reserved. 2001-