Skip Navigation | Groups

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

 

Overlaying Graphics code comparison

Code for jQuery and FrontPage/Expression behaviours compared


This page compares the code used by FrontPage/Expression Web behaviours against jQuery for the Overlaying Graphics set of pages. The CSS used for each method is about the same, but the HTML and JavaScript are not.

jQuery

HTML

<p>If you hover the mouse <span class="sp1">here
<img id="arrow" src="~/fp/articles/images/arrow1.gif" 
alt="arrow" /></span> an arrow appears pointing to 
Image-3&nbsp; below.</p>

JavaScript

Note that jquery.min.js is a large file (26KB). But since it is used on every page in this site, and also by many other sites, the file will most likely loaded from the browser cache. From a hosts point of view, the file is actually hosted by Google (in this case) or by Microsoft or jQuery.com, so there are no bandwidth issues.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
$('document').ready(function() {
$('#arrow').hide();
$('.sp1').hover(function() {
$('#arrow').toggle();
});
});

FrontPage and Expression Web Behaviours

Note that these Behaviours were designed to work with older browsers - up to IE 6 but including Netscape 4 which uses the (now obsolete) <layer> tag. They may work with present day browsers, but some code used is bloated, some is deprecated in today's browsers, and may fail completely in tomorrow's.

HTML

<p>If you hover the mouse <span style="position: relative;">
<a id="id1" href="javascript:;" 
onmouseout="FP_changePropRestore()" 
onmouseover="FP_changeProp(/*id*/'arrow',1,
'style.visibility','visible')"><em>here</em></a>
<img id="arrow" src="~/fp/articles/images/arrow1.gif" 
alt="arrow" /></span> an arrow appears pointing to 
Image-3&nbsp; below.</p>

JavaScript

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;
}
function FP_changeProp() {//v1.0
var args=arguments,d=document,i,j,id=args[0],o=FP_getObjectByID(id),s,ao,v,x;
d.$cpe=new Array(); if(o) for(i=2; i<args.length; i+=2) { v=args[i+1]; s="o"; 
ao=args[i].split("."); for(j=0; j<ao.length; j++) { s+="."+ao[j]; if(null==eval(s)) { 
s=null; break; } } x=new Object; x.o=o; x.n=new Array(); x.v=new Array();
x.n[x.n.length]=s; eval("x.v[x.v.length]="+s); d.$cpe[d.$cpe.length]=x;
if(s) eval(s+"=v"); }
}
function FP_changePropRestore() {//v1.0
var d=document,x; if(d.$cpe) { for(i=0; i<d.$cpe.length; i++) { x=d.$cpe[i];
if(x.v=="") x.v=""; eval("x."+x.n+"=String(x.v)"); } d.$cpe=null; }
}