Back

Image Flip 004

  

 

Choose a Background Style

Brick Cool Graffiti
     

This script changes as many images when you mouseover a link.  The image stays the same until you mouseover another link.  You can replace the images with yours.
There is a lot to change in this script.  But instead of going though the whole script, there is a little trick that is very helpful to programmers.  After you paste the script to a notepad or html editor, at the top select "Edit"  and then "Replace".  In the "Find what" box input for example brick1  and in the "Replace with" your image info.

Paste between the <HEAD></HEAD> tags.

<!-- Paste between the <HEAD></HEAD> tags. -->
<SCRIPT LANGUAGE="JAVASCRIPT" TYPE="TEXT/JAVASCRIPT">

if(document.images) {
wht=new Image
blu=new Image
grn=new Image
red=new Image
brick1=new Image
brick2=new Image
brick3=new Image
brick4=new Image
cool1=new Image
cool2=new Image
cool3=new Image
cool4=new Image
graf1=new Image
graf2=new Image
graf3=new Image
graf4=new Image

wht.src="images/wht.jpg"
blu.src="images/blu.jpg"
grn.src="images/grn.jpg"
red.src="images/red.jpg"
brick1.src="images/brick1.jpg"
brick2.src="images/brick2.jpg"
brick3.src="images/brick3.jpg"
brick4.src="images/brick4.jpg"
cool1.src="images/cool1.jpg"
cool2.src="images/cool2.jpg"
cool3.src="images/cool3.jpg"
cool4.src="images/cool4.jpg"
graf1.src="images/graf1.jpg"
graf2.src="images/graf2.jpg"
graf3.src="images/graf3.jpg"
graf4.src="images/graf4.jpg"
}
else{
wht = ""
blu = ""
grn = ""
red = ""
brick1 = ""
brick2 = ""
brick3 = ""
brick4 = ""
cool1 = ""
cool2 = ""
cool3 = ""
cool4 = ""
graf1 = ""
graf2 = ""
graf3 = ""
graf4 = ""

document.bg = ""

}
</SCRIPT>
 

Paste where needed in the body if the HTML Document

Be sure to change the link info.  Highlighted in Mint.

<div align="center">
<center>
<table border="0" cellpadding="5" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="60%">
<tr>
<!-- _________________________________________________________________-->
<td width="25%" align="center"><b><a href="image%20flip%20010.htm" onMouseover="document.bg.src=brick1.src;document.bg1.src=brick2.src;
document.bg2.src=brick3.src;document.bg3.src=brick4.src " onMouseout="document.bg.src=brick1.src;document.bg1.src=brick2.src;document.bg2.src=brick3.src; document.bg3.src=brick4.src">
<font size="2">Brick</font></a></b></td>
<!-- _____________________________________________________________-->
<td width="25%" align="center"><b><a href="image%20flip%20010.htm" onMouseover="document.bg.src=cool1.src;document.bg1.src=cool2.src;
document.bg2.src=cool3.src;document.bg3.src=cool4.src " onMouseout="document.bg.src=cool1.src;document.bg1.src=cool2.src;document.bg2.src=cool3.src; document.bg3.src=cool4.src">
<font size="2">Cool</font></a></b></td>
<!-- ___________________________________________________________-->
<td width="25%" align="center"><b><a href="image%20flip%20010.htm" onMouseover="document.bg.src=graf1.src;document.bg1.src=graf2.src;
document.bg2.src=graf3.src;document.bg3.src=graf4.src " onMouseout="document.bg.src=graf1.src;document.bg1.src=graf2.src;document.bg2.src=graf3.src; document.bg3.src=graf4.src">
<font size="2">Graffiti</font></a></b></td>
</tr>
<tr>
<td width="25%" align="center">&nbsp;</td>
<td width="25%" align="center">&nbsp;</td>
<td width="25%" align="center">&nbsp;</td>
</tr>
</table>
</center>
</div>
<div align="center">
<center>
<table border="1" cellpadding="5" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="90%">
<tr>
<td width="25%" align="center">
<img border="0" src="images/wht.jpg" width="200" height="128" name="bg" ></td>
<td width="25%" align="center">
<img border="0" src="images/blu.jpg" width="200" height="128" name="bg1"></td>
<td width="25%" align="center">
<img border="0" src="images/grn.jpg" width="200" height="128" name="bg2"> </td>
<td width="25%" align="center">
<img border="0" src="images/red.jpg" width="200" height="128" name="bg3"></td>
</tr>
</table>
</center>
</div>

 

Paste script between the <HEAD></HEAD> tags.

Paste script where needed in the body of the HTML Document.


� Copyright 2009 ashesh.com.np