I'm new to Greasemonkey and I would like to replace the links to images, with just an <img> tag instead.

For example, this forums page has a bunch of links like:

<a target="_blank" href=".gif">.gif</a>

I want to replace these links with images like:

<img src=".gif">

I searched the net and managed to find something like this Greasemonkey user's group.
But, my edited code:

var i, x = document.evaluate (
    '//*[@target="_blank"][@href="="]',
    document,
    null,
    XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
    null
);
for (i = 0; i < x.snapshotLength; i++)
    x.snapshotItem(i).setAttribute("href", "img src");

does not seem to work.

Please advise how should I go about creating this script.

I'm new to Greasemonkey and I would like to replace the links to images, with just an <img> tag instead.

For example, this forums page has a bunch of links like:

<a target="_blank" href="http://url./pic.gif">http://url./pic.gif</a>

I want to replace these links with images like:

<img src="http://url./pic.gif">

I searched the net and managed to find something like this Greasemonkey user's group.
But, my edited code:

var i, x = document.evaluate (
    '//*[@target="_blank"][@href="="]',
    document,
    null,
    XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
    null
);
for (i = 0; i < x.snapshotLength; i++)
    x.snapshotItem(i).setAttribute("href", "img src");

does not seem to work.

Please advise how should I go about creating this script.

• javascript
• html
• firefox
• hyperlink
• greasemonkey

• 1 You can do it exactly the way you would do with your regular html and javascript. – specialscope Commented May 22, 2013 at 12:21
• i'm not sure how to change it. – Withhelds Commented May 22, 2013 at 12:50
• You need to show a little more effort. At least give us the current HTML snippet and the desired HTML snippet. A link to the target page would be super-helpful too. – Brock Adams Commented May 22, 2013 at 13:03
• for example this page forums.hardwarezone..sg/eat-drink-man-woman-16/… , it shows all hyperlink with images, i checked the source it is using e.g. <a target="_blank" href="url./pic.gif">http://www.url./pic.gif</a> . I would like to replace it to use img src instead. – Withhelds Commented May 22, 2013 at 15:56
• i tried research from the net and manage to find something like groups.google./forum/?fromgroups#!topic/greasemonkey-users/… . my edited code is below which does not seems to work: var i, x = document.evaluate('//*[@target="_blank"][@href="="]', document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null); for ( i=0 ; i < x.snapshotLength; i++ ) x.snapshotItem(i).setAttribute("href", "img src"); – Withhelds Commented May 22, 2013 at 15:58

1 Answer 1

Replacing links to images is not too hard to do. However, I remend that you keep the link but display the picture inside it. This is so you can click through if something goes wrong. For example, that sample page you gave has most of the linked images on a dead site.

Other linked images only look like they point to images or might be blocked for "hot linking".

To make the code robust and easy, we use jQuery and waitForKeyElements.

Here is a plete working script that delinks the payload image-links on that sample site:

// ==UserScript==
// @name    _Image delinker
// @include http://forums.hardwarezone..sg/*
// @require http://ajax.googleapis./ajax/libs/jquery/1.8.3/jquery.min.js
// @require https://gist.github./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..sg
waitForKeyElements ("td.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="' + imgUrl
            + '" class="gmDeLinked" alt="GM replaced image">'
        );
    }
}

GM_addStyle ( "                                 \
    img.gmDeLinked {                            \
        border:             1px solid lime;     \
        max-width:          90vw;               \
    }                                           \
" );