[req] Image links show on hover

[bugger]

I want to add this. How do I go about doing it. Its a javascript that shows images when your mouse over(hover) thumbnails or links. I also want the image to have the highest precedence.

Code:

// ==UserScript==
// @name          Image links inline viewer
// @namespace     http://www.grauw.nl/projects/pc/greasemonkey/
// @description   Allow the user to view linked images directly inside the page.
// @include       *
// ==/UserScript==
//
// Linked images can be recognised by their links having a red dotted outline.
//
// This script is pretty much the equivalent of the following CSS. Unfortunately Firefox
// does not support the attr(href,url) functionality, but you might get it to work in
// other browsers, e.g. Opera.
//
// a[href$='.png'], a[href$='.gif'],
// a[href$='.jpg'], a[href$='.jpeg'] {
//     outline: 1px dotted red; padding: 1px;
// }
// a[href$='.png']::after, a[href$='.gif']::after,
// a[href$='.jpg']::after, a[href$='.jpeg']::after {
//     content: attr(href,url);
//     display: none;
//     position: absolute;
//     left: 0;
//     max-width: 100%;
// }
// a[href$='.png']:hover::after, a[href$='.gif']:hover::after,
// a[href$='.jpg']:hover::after, a[href$='.jpeg']:hover::after {
//     display: block;
// }
//
// ~Grauw
//

var oStyle = document.createElement('style');
oStyle.setAttribute('type','text/css');
var css = 'a.grauw-imageview { -moz-outline: 1px dotted red; padding: 1px; }';
css += 'a.grauw-imageview img.grauw-imageview { display: none; position: absolute; left: 0; max-width: 100%; margin: 0; border: none; }';
css += 'a.grauw-imageview:hover img.grauw-imageview { display: block; }';
oStyle.innerHTML = css;
document.getElementsByTagName('head')[0].appendChild(oStyle);

var aElm = document.getElementsByTagName('a');
for (i=0; i<aElm.length; i++) {
    if (aElm[i].href.match(/\.(jpg|jpeg|gif|png)$/)) {
        var oImg = document.createElement('img');
        oImg.setAttribute('src',aElm[i].href);
        oImg.setAttribute('class','grauw-imageview');
        aElm[i].appendChild(oImg);
        aElm[i].setAttribute('class','grauw-imageview');
    }
}

[Kye-U]

Take a look at this thread and filter:

http://prxbx.com/forums/showthread.php?tid=957

Let me know if it suits your needs

[bugger]

Not what I looking for

1. I do not work the any images to convert to text.
2. I want full image or resize to fit to my screen.

[Kye-U]

Import these two filters to be above Bottom Add: Final JS Code 7.09.06 (ccw! !mos) [...] (d.r):

Code:

[Patterns]
Name = "Bottom Inject: User CSS {z12 ku} [add]"
Active = TRUE
URL = "$TYPE(htm)"
Limit = 16
Match = "(^(^<ProxBottom>))$STOP()"
Replace = "\t<link rel="stylesheet" title="CustomUser" type="text/css" href="http://local.ptron/user.css" />\r\n"

Name = "Bottom Add: User JS Code {z12 ku} [add]"
Active = TRUE
URL = "$TYPE(htm)"
Limit = 16
Match = "(^(^<ProxBottom>))$STOP()"
Replace = "\t<script type="text/javascript" src="http://local.ptron/user.js"></script>\r\n"

Download the attached files and place them in the HTML folder in your Proxomitron folder.

Enjoy!

I accommodated for the fact that some images might go off the right of the screen if the link is located close to the right side of the screen, in which case the image will be positioned to roughly the centre of the page.

[ProxRocks]

fyi, seems to be a Firefox-ONLY filter...