(Site Identification)

'Eye' Focus: Web Support Tutorials

JavaScript: View Bookmarklet Source for AnalyzePic

Remote Bookmarklet Script Call

The bookmarklets we use on our site is actually a two part JavaScript. The JavaScript for the first part is actually a script that calls a remote file. This helps to keep the actual bookmark on your computer at a limited size, while it allows the actual script to be of any necessary size.

Another benefit for loading a remote file is that the bookmarklet can easily be maintained and updated, regardless of when it was bookmarked. The technique allows me to improve my bookmarklets and always have the current version when I use my bookmarks from any browser.

The drawback in using this technique is that Opera browsers do not support the remote file JavaScript loader. This means the script must be written all on one line, must be a limited maximum length, and will not be automatically updated when the script on the server is updated. We hope that Opera will soon support remote file loading with their JavaScripts.

The remote file loader for: AnalyzePic.js (skip code)

javascript:(function(){var s=document.createElement('script');s.setAttribute('src','http://www.melvinwallerjr.com/tutorial/scripts/bookmarklet/files/AnalyzePic.js');s.setAttribute('type','text/javascript');document.getElementsByTagName('head')[0].appendChild(s);})();

Please keep in mind that the above Javascript call MUST be remain as one continuous line, and not contain any carriage returns. If you do not do this the bookmarklet will break and not be functional.

(to Top) The Remote Bookmarklet

Below is the source file that is loaded for this Bookmarklet. This file only exists within this web site and called by the above remote file loader. (skip code)

//  Title: Analyze Pictures (list)
// Origin: MyIE2 Web site, often called 'PicList'
// Author: (ho99)
// Tweaks: www.melvinwallerjr.com (JoeFlash)
(function() {
  window.onerror = null;
  var c = 0,n = 1;
  var t = "</td><td>";
  var x = "<html><head>\n<title>Analyze Pictures</title>";
  x += "\n<style title=\"css\" language=\"StyleSheet\" type=\"text/css\">\<!--";
  x += "\nbody {font-family:arial,sans-serif;font-size:80%;margin:2px;}";
  x += "\nth {font-family:arial,sans-serif;font-size:75%;border:1px solid #000000;}";
  x += "\ntd {font-family:arial,sans-serif;font-size:85%;border:1px solid #000000;}";
  x += "\n--></style>\n</head><body bgcolor=\"#ffffff\" text=\"#000000\">";
  x += "\n\n<h3 align=\"center\" style=\"margin:0px\">Analyze Pictures";
  x += " <small><sup><a href=\"#note\" title=\"See Note\">*</a></sup></small><br>";
  x += "\n<small style=\"font-size:12px\"><a href=\"javascript:window.close();\">";
  x += "[close window]</a></small></h3>\n<div align=\"center\">";
  x += "<table border=\"0\" cellspacing=\"2\" cellpadding=\"3\">";
  x += "\n<colgroup><col align=\"right\" valign=\"top\">";
  x += "<col align=\"left\" valign=\"top\"><col align=\"center\" valign=\"top\">";
  x += "\n<col align=\"right\" valign=\"top\"><col align=\"right\" valign=\"top\">";
  x += "</colgroup>\n<tr bgcolor=\"#ffcc99\">\n<th>#</th>";
  x += "\n<th>'ALT' Name</th>\n<th>Image and Source</th>";
  x += "\n<th>Width</th>\n<th>Height</th>\n</tr>";
  if (window.document.images.length > 0) {
    for (i=0; i < window.document.images.length; i++) {
      var y = "<a href=\"" + window.document.images[i].src + "\"><img src=\"";
      y += window.document.images[i].src + "\" border=\"1\" /><br />";
      y += "\n<small>" + window.document.images[i].src + "</small></a>";
      x += "<tr";
      if (c == 0) {c = 1;} else {x += " style=\"background-color:#ffeecc;\"";c = 0;}
      x += ">\n<td>" + n++ + "</td>\n<td>";
      x += (
        (window.document.images[i].alt.length > 0 && window.document.images[i].alt != " ")?
        window.document.images[i].alt :
        "<kbd style=\"background:#ccc\">&nbsp;(NULL)&nbsp;</kbd>"
      x += t + y;
      if (window.document.images[i].width < 1 || window.document.images[i].height < 1) {
        x += "</td><td colspan=\"2\"><kbd style=\"background:#ccc\">&nbsp;(HIDDEN)&nbsp;</kbd>";
      } else {
        x += t + window.document.images[i].width + t + window.document.images[i].height
      x += "</td>\n</tr>";
  x += "\n</table>";
  x += "\n<p><strong><a name=\"note\">Note:</a></strong>";
  x += "\nImage list does not include those used as backgrounds.<br>";
  x += "\nHeight and width values are those used in the original document.<br>";
  x += "\nImages displayed here are actual size, without dimensions specified.</p>";
  x += "\n</div>\n</body></html>\n";
  var w = window.open("","Analyzepic");

For more information on browser bookmarklets, please have a look at our Bookmarklets Tutorial.

[Updated: Sunday, November 18, 2007]