Setting borders in bookmarklets?

I’ve just created a bookmarklet for Firefox 8 (and possibly other browsers, but I tested it in Firefox) to aid in checking for appropriate alt attributes on images.

javascript:var%20imgs%20=%20document.getElementsByTagName(‘img’);for%20(i=0;i<imgs.length;i++)%7Bif%20(imgs.item(i).hasAttribute(‘alt’))%7Bif%20(imgs.item(i).getAttribute(‘alt’)==‘’)%7Bimgs.item(i).setAttribute(‘title’,‘%20empty%20alt%20attribute%20’);%7Delse%7Bimgs.item(i).setAttribute(‘title’,imgs.item(i).getAttribute(‘alt’));%7D%7Delse%7Bimgs.item(i).setAttribute(‘title’,‘%20no%20alt%20attribute%20’);%7D%7D//released%20under%20GPL%203.0

This copies information about the alt attribute on an image to a title attribute in order to allow cursoring over and seeing the contents or lack thereof as a tooltip.

Here’s where I hit the wall: I’d like to add a visual cue as well in the form of borders around each image. But when I try the following code:

javascript:var%20imgs%20=%20document.getElementsByTagName(‘img’);for%20(i=0;i<imgs.length;i++)%7Bif%20(imgs.item(i).hasAttribute(‘alt’))%7Bif%20(imgs.item(i).getAttribute(‘alt’)==‘’)%7Bimgs.item(i).setAttribute(‘title’,‘%20empty%20alt%20attribute%20’);imgs.item(i).style.border=‘2px%20dotted%20black’;%7Delse%7Bimgs.item(i).setAttribute(‘title’,imgs.item(i).getAttribute(‘alt’));imgs.item(i).style.border=‘2px%20dashed%20green’;%7D%7Delse%7Bimgs.item(i).setAttribute(‘title’,‘%20no%20alt%20attribute%20’);imgs.item(i).style.border=‘2px%20solid%20red’;%7D%7D//released%20under%20GPL%203.0

instead of drawing a border, it goes to a new page with the bookmarklet script in the location bar and “2px dotted black” as the page content. No JavaScript errors from this in the error console, either. Any ideas how to get it to set the border attributes on all images instead?

Try putting your bookmarklet in a self-executing function

(function() { /* Code here */ })();

That ought to do the trick.

You might also be interested in Eric Meyer’s “Diagnostic CSS” http://meyerweb.com/eric/tools/css/diagnostics/

Thanks. It’s working now. Here’s what I wound up with:

javascript:(function()%20{var%20imgs%20=%20document.getElementsByTagName(‘img’);for%20(i=0;i<imgs.length;i++){if%20(imgs.item(i).hasAttribute(‘alt’)){if%20(imgs.item(i).getAttribute(‘alt’)==‘’){imgs.item(i).setAttribute(‘title’,‘%20empty%20alt%20attribute%20’);imgs.item(i).style.border=‘2px%20dotted%20black’;}else%20if(imgs.item(i).getAttribute(‘alt’)==‘%20’){imgs.item(i).setAttribute(‘title’,‘%20space%20alt%20attribute%20’);imgs.item(i).style.border=‘2px%20dotted%20orange’;}else{imgs.item(i).setAttribute(‘title’,imgs.item(i).getAttribute(‘alt’));imgs.item(i).style.border=‘2px%20dashed%20green’;}}else{imgs.item(i).setAttribute(‘title’,‘%20no%20alt%20attribute%20’);imgs.item(i).style.border=‘2px%20solid%20red’;}}/released%20under%20GPL%203.0/})%20();

The tricky part was changing
//released%20under%20GPL%203.0
to
/released%20under%20GPL%203.0/
so that it would recognize that I closed the function in the bookmarklet.