Overlaying Graphics Code Comparison

Tags: Expression Web | FrontPage | General HTML | Graphics File Author Send email Website 2011012603 Ronx to Ronx www.rxs-enterprises.org

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

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; }
}