Microsoft® FrontPage®
FrontPage 2000, FrontPage 2002 - FrontPage 2003, Find: help, templates, tutorials, DWT, DRW, DIW @ www.FrontPageWiz.com
 
FrontPage & Expression Hosting - "FREE 3 MONTHS"
Plus Free Web Site Repairs "Site Doctor" Click Here.

 
 

New!!
FrontPage Forums
FrontPage 2003
FrontPage 2002
FrontPage 2000
FrontPage 97/98

Microsoft Excel Tools

 

 

 

 

 

FrontPage Ready Free: Buttons, Icons, Mouse-Overs, Animations and Images.


1000's of Buttons/Templates to choose from!
Please wait, images may take a while to load.


FrontPage 2003 Behaviors are a very powerful feature for creating quick, dynamic mouseover effects.
(mouseover, mouse-over, mouse over).

For this demo you need 2 images that are the same size. I am going to use 4, so I can include this piece in customizing the Photo Gallery arrows at a later date.

Here are my images:

   

   

  1. Insert the image on a page:
    >Insert >Image >From File
    Use the expand arrow if you can't see the "From File"

  2. Now left click the image once:

     
  3. With the image clicked choose:
    >Format >Behaviors
     
  4. On the Behaviors panel select:
    >Insert >Swap Image

Check Preload Images and Restore on mouseout event.

You can now ad a link as normal. The "Next" button below has a hyperlink.

Here's are the finished images

   

 

Here's the code FrontPage writes automatically for you!
 

In The <head> section

<script language="JavaScript">
<!--
function FP_swapImgRestore() {//v1.0
var doc=document,i; if(doc.$imgSwaps) { for(i=0;i<doc.$imgSwaps.length;i++) {
var elm=doc.$imgSwaps[i]; if(elm) { elm.src=elm.$src; elm.$src=null; } }
doc.$imgSwaps=null; }
}

function FP_swapImg() {//v1.0
var doc=document,args=arguments,elm,n; doc.$imgSwaps=new Array(); for(n=2; n<args.length;
n+=2) { elm=FP_getObjectByID(args[n]); if(elm) { doc.$imgSwaps[doc.$imgSwaps.length]=elm;
elm.$src=elm.src; elm.src=args[n+1]; } }
}

function FP_preloadImgs() {//v1.0
var d=document,a=arguments; if(!d.FP_imgs) d.FP_imgs=new Array();
for(var i=0; i<a.length; i++) { d.FP_imgs[i]=new Image; d.FP_imgs[i].src=a[i]; }
}

function FP_getObjectByID(id,o) {//v1.0
var c,el,els,f,m,n; if(!o)o=document; if(o.getElementById) el=o.getElementById(id);
else if(o.layers) c=o.layers; else if(o.all) el=o.all[id]; if(el) return el;
if(o.id==id || o.name==id) return o; if(o.childNodes) c=o.childNodes; if(c)
for(n=0; n<c.length; n++) { el=FP_getObjectByID(id,c[n]); if(el) return el; }
f=o.forms; if(f) for(n=0; n<f.length; n++) { els=f[n].elements;
for(m=0; m<els.length; m++){ el=FP_getObjectByID(id,els[n]); if(el) return el; } }
return null;
}
// -->
</script>
 

In the <body> section.

<img border="0" src="images/redarrowback409.gif" width="87" height="73" id="img1" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img1',/*url*/'images/redarrowback409down.gif')">

<img border="0" src="images/redarrownext409.gif" width="87" height="73" id="img2" onmouseout="FP_swapImgRestore()" onmouseover="FP_swapImg(1,1,/*id*/'img2',/*url*/'images/redarrownext409down.gif')">

 

 

 

 

 
 

 

 

 

 

Home

© Copyright 2004 Frontpagewiz.com. All Rights Reserved.


www.frontpagewiz.com 

asp bugs Buttons dbarticles Whats_New frontpage_how_to Graphics hosting Folder Permissions IIS5
Time Links Asset Protection
microsoft_support  FrontPage Web rings tables Templates tools tutorials beginners behaviors
buttons
code_snippets components customizing ROI diw formatting forms press release headers Real Estatelogin_scripts navigation
Real Estate sharepoint
tables video web_dictionary webmaster articles domains tools web_design marconow.com webwizguide

 

 

 

FrontPage Resources     Privacy Statement     Disclaimers    TOC

 ©2003-2007, frontpagewiz.com All rights reserved.