Using Greasemonkey to Change Text to Images?

Using Greasemonkey to Change Text to Images?

Is it possible to use Greasemonkey to change text links on a page to
actual images, and also to modify those links?
Let's say there's a table on a page that is displaying a bunch of
filenames in the second column like this: <tr><td></td><td><a
href="wwwlala001.html">wwwlala001.jpg</a></td>...</tr>). Is it possible to
have it so that when the page loads, all of the filenames (not the links)
in the second column like wwwlala001.jpg change to this?:
<img src="http://domain.com/images/wwwlala001.jpg" width="200"
height="200" />
I tried modifying the code here, but I had no luck:
// ==UserScript==
// @name _Image delinker
// @include http://dotup.org
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js
// @require https://gist.github.com/raw/2625891/waitForKeyElements.js
// @grant GM_addStyle
// ==/UserScript==
var imageExtensions = ["gif", "png", "jpg", "jpeg"];
var imgExtRegex = new RegExp(
'\\.(' + imageExtensions.join ('|') + ')$', 'i'
);
/*-- Tune the CSS path, for each site, to only find links that can be
the image links you care about.
*/
//-- For forums.hardwarezone.com.sg
waitForKeyElements ("page div > a", delinkImage);
function delinkImage (jNode) {
var imgUrl = jNode.attr ("href");
if (imgExtRegex.test (imgUrl) ) {
//-- Found an image link. Replace contents.
jNode.html (
'<img src="http://domain.com/images/' + imgUrl
+ '" width="200" height="200" class="gmDeLinked" alt="GM
replaced image">'
);
}
}
GM_addStyle ( " \
img.gmDeLinked { \
border: 1px solid lime; \
max-width: 90vw; \
} \
" );
/*
Exception: waitForKeyElements is not defined
@Scratchpad/2:18
*/
Thank you!