Skip Navigation | Groups

This site uses cookies- for more information see the Cookie Policy | Continue

 

Swap background Interactive Buttons with CSS

How to use background Interactive Buttons as links


One way to use interactive buttons supplied with Expression Web and FrontPage is to use them as background images, swapped using CSS. The method described below does not use any javascript, and will function in all browsers that use CSS. There are, however, accessibility problems.

Construction

This page shows the construction of a vertical navigation bar, detailing the construction of one button.

Use the method described in generate to build the individual buttons. One of these is  depicted below.

In code view, the code for the button resembles:

<a href="Default.aspx"><img id="img1" alt="Test Button" height="24" onmousedown="FP_swapImg(0,0,/*id*/'img1',/*url*/'images/test-buttonA.gif')" onmouseout="FP_swapImg(0,0,/*id*/'img1',/*url*/'images/test-buttonL.gif')" onmouseover="FP_swapImg(0,0,/*id*/'img1',/*url*/'images/test-buttonH.gif')" onmouseup="FP_swapImg(0,0,/*id*/'img1',/*url*/'images/test-buttonH.gif')" src="images/test-buttonL.gif" style="border: 0" width="122" /><!-- MSComment="ibutton" fp-style="fp-btn: Chain Column 3; fp-font-style: Bold; fp-font-color-hover: #CFA800; fp-font-color-press: #CC0000; fp-justify-horiz: 0; fp-preload: 0; fp-transparent: 1" fp-title="Test Button" --></a>

One more file is required: a transparent .gif. This can be a 1x1px image created in an image editor. In this site the image is named tp.gif

Each button is given an id, and all should be wrapped in a container, such as a <div> with an id to enable simple CSS coding. The code for the button above becomes:

<div id="lftnav">
 <a id="tbh" href="default.aspx">
 <img alt="Test Button" src="/images/tp.gif"width="122" height="24" /></a>
 <!-- Other buttons go here, each with unique id -->
</div>

Check this in the Design pane and the link has apparently disappeared.

Now add some CSS - this should be in an external .css file for sharing with all the other pages on the site using the buttons:

/* This line makes the background for the buttons pretty */
#lftnav {
text-align:center;
background-color: azure;
border-radius:5px;
}
#lftnav a {
background-position: center center;
background-repeat: no-repeat;
display:block;
}
#lftnav a:focus {outline:none; }
#lftnav a img {vertical-align: bottom; }
/* for each button - change the button id and the links */
a#tbh {background-image:url(images/button-testL.gif); }
a#tbh:hover {background-image:url(images/button-testH.gif);}
/*a#tbh:active {background-image:url(images/button-testA.gif); }*/
/* CSS for other buttons based on above goes here */

There is also a large amount of javascript in the <head> section of the page. It may be possible to remove most of this. If no other FrontPage/Expression Web behaviours are used in the page then delete the following from the <head> section:

<script type="text/javascript">
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>

Finally, a style is added to denote the current page - this ensures a different background image (the "pressed" button created from the Interactive Buttons dialogue) is used. This style must be in a style block in the page itself - it cannot go into an external style sheet used by other pages.

a#tbh {
background-image:url(images/button-testA.gif); 
}

The finished link bar resembles:

IB Problems Alternative IB Swap Buttons