Kye-U's Image Thumber on Select Sites

[Kye-U]

Description:

Quote:Using the Cool DHTML Tooltip script from DynamicDrive.com, this filter enables you to save up a bit of bandwidth and "surprises". What this filter basically does is:

• convert the image to a harmless link
• this link contains an "onmouseover" function where the image is resized to have a width of 100 pixels and this thumbnail is shown in a tooltip
• click on the link to view the full image
  

Example:


  example.jpg (Size: 83.01 KB / Downloads: 1088)
In the above image, which is an image of Google.ca, with the filter active, the logo is shown in a box when the mouse cursor is placed over the yellow-background-red-bolded-text image filename.

You'll need to create two "Block Lists" named thumbnail and thumbnailexclude.

The "thumbnail" Blocklist:

Quote:This blocklist serves as a "blacklist" where the filter is designed to only be active on any listed sites in the thumbnail blocklist. Any site that is not in this list will not have its image files "thumbed".

The "thumbnailexclude" Blocklist:

Quote:In this blocklist, you can place filenames of images that are on sites in the above blocklist which you don't want to be "thumbed".

The Proxomitron Filter:

Code:

[Patterns]
Name = "Kye-U's Image Thumber on Select Sites"
Active = TRUE
URL = "$LST(thumbnail)"
Limit = 256
Match = "<body\9>$SET(1=<style type="text/css">\r\n\r\n#kyeuthumbnailbox{\r\nposition: absolute;\r\ntext-align:center;\r\nheight: 100px;\r\nborder: 2px solid black;\r\npadding: 2px;\r\nbackground-color: lightyellow;\r\nvisibility: hidden;\r\nz-index: 100;\r\n/*Remove below line to remove shadow. Below line should always appear last within this CSS*/\r\nfilter: progid:DXImageTransform.Microsoft.Shadow(color=gray,direction=135);\r\n}\r\n\r\n</style>\r\n<body\9>\r\n<div id="kyeuthumbnailbox"></div>\r\n\r\n<script type="text/javascript">\r\n\r\n/***********************************************\r\n* Cool DHTML tooltip script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)\r\n* This notice MUST stay intact for legal use\r\n* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code\r\n***********************************************/\r\nvar offsetxpoint=-60 //Customize x offset of tooltip\r\nvar offsetypoint=20 //Customize y offset of tooltip\r\nvar ie=document.all\r\nvar ns6=document.getElementById && !document.all\r\nvar enabletip=false\r\nif (ie||ns6)\r\nvar tipobj=document.all? document.all["kyeuthumbnailbox"] : document.getElementById? document.getElementById("kyeuthumbnailbox") : ""\r\n\r\nfunction ietruebody(){\r\nreturn (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body\r\n}\r\n\r\nfunction kyeuthumbnail(thetext, thecolor, thewidth){\r\nif (ns6||ie){\r\nif (typeof thewidth!="undefined") tipobj.style.width=thewidth+"px"\r\nif (typeof thecolor!="undefined" && thecolor!="") tipobj.style.backgroundColor=thecolor\r\ntipobj.innerHTML=thetext\r\nenabletip=true\r\nreturn false\r\n}\r\n}\r\n\r\nfunction positiontip(e){\r\nif (enabletip){\r\nvar curX=(ns6)?e.pageX : event.clientX+ietruebody().scrollLeft;\r\nvar curY=(ns6)?e.pageY : event.clientY+ietruebody().scrollTop;\r\n//Find out how close the mouse is to the corner of the window\r\nvar rightedge=ie&&!window.opera? ietruebody().clientWidth-event.clientX-offsetxpoint : window.innerWidth-e.clientX-offsetx"
        "point-20\r\nvar bottomedge=ie&&!window.opera? ietruebody().clientHeight-event.clientY-offsetypoint : window.innerHeight-e.clientY-offsetypoint-20\r\n\r\nvar leftedge=(offsetxpoint<0)? offsetxpoint*(-1) : -1000\r\n\r\n//if the horizontal distance isn't enough to accomodate the width of the context menu\r\nif (rightedge<tipobj.offsetWidth)\r\n//move the horizontal position of the menu to the left by it's width\r\ntipobj.style.left=ie? ietruebody().scrollLeft+event.clientX-tipobj.offsetWidth+"px" : window.pageXOffset+e.clientX-tipobj.offsetWidth+"px"\r\nelse if (curX<leftedge)\r\ntipobj.style.left="5px"\r\nelse\r\n//position the horizontal position of the menu where the mouse is positioned\r\ntipobj.style.left=curX+offsetxpoint+"px"\r\n\r\n//same concept with the vertical position\r\nif (bottomedge<tipobj.offsetHeight)\r\ntipobj.style.top=ie? ietruebody().scrollTop+event.clientY-tipobj.offsetHeight-offsetypoint+"px" : window.pageYOffset+e.clientY-tipobj.offsetHeight-offsetypoint+"px"\r\nelse\r\ntipobj.style.top=curY+offsetypoint+"px"\r\ntipobj.style.visibility="visible"\r\n}\r\n}\r\n\r\nfunction hidekyeuthumbnail(){\r\nif (ns6||ie){\r\nenabletip=false\r\ntipobj.style.visibility="hidden"\r\ntip=obj.style.left="-1000px"\r\ntipobj.style.backgroundColor=''\r\ntipobj.style.width=''\r\n}\r\n}\r\n\r\ndocument.onmousemove=positiontip\r\n\r\n</script>\r\n)(^$TST(match=yes))$SET(match=yes)"
        "|<img\8\ssrc=$AV(((([^/]+/)+)\2\3))\7>$SET(fullpath=\2\3)$SET(1=<a href="\2\3" onMouseover="kyeuthumbnail('<img src=\\'$ESC(\2\3)\\' height=\\'100\\'>')"; onMouseout="hidekyeuthumbnail()" style="background-color: yellow; color: red; font-weight: bold;" title="\2\3">\3</a>)(^$TST(fullpath=$LST(thumbnailexclude)))"
Replace = "\1"