Picsearch with Mouseover

By Bhabishya Kumar — Last update Aug 28, 2007 — Installed 275 times.
/*
    Its a modification of my own script at

    	http://userscripts.org/scripts/show/9524

    which was a mashup of the script at

    	http://patcavit.com/2005/03/06/more-monkey-business/

    and a CSS library at

    	http://www.dynamicdrive.com/style/csslibrary/item/css-popup-image-viewer/

    Instead of opening images in separate tabs, you can view it in a CSS Popup on Mouseover.

    Credits:

	Patrick Cavit, pcavit@gmail.com
	http://patcavit.com

	Eric Hamiter
	http://roachfiend.com/

	Dynamic Drive CSS Library
	http://www.dynamicdrive.com/style/


    Copy, use, modify, spread as you see fit.

    Author:

	Bhabishya Kumar
	http://bhabishyakumar.com

*/

// ==UserScript==
// @name          Picsearch with Mouseover
// @namespace     http://bhabishyakumar.com/scripts
// @description	  View Picsearch links in CSS Popup on Mouseover
// @include       http://www.picsearch.*/search.*
// ==/UserScript==

GM_addStyle(".thumbnail{position: relative;z-index: 0;}.thumbnail:hover{background-color: transparent;z-index: 50;}.thumbnail span{ position: absolute;padding: 5px;left: -1000px;visibility: hidden;color: black;text-decoration: none;}.thumbnail span img{ border-width: 0;padding: 2px;}.thumbnail:hover span{visibility: visible;top: 0;left: 60px;}");

window.addEventListener("load", alterLinks, false);

function selectNodes(doc, context, xpath)
{
   var nodes = doc.evaluate(xpath, context, null, XPathResult.ORDERED_NODE_SNAPSHOT_TYPE, null);
   var result = new Array( nodes.snapshotLength );

   for (var x=0; x<result.length; x++)
   {
	  result[x] = nodes.snapshotItem(x);
   }

   return result;
}

function handleMouseOver(event){

	var span = event.currentTarget.getElementsByTagName("span")[0];
	var img = span.getElementsByTagName("img")[0];
	var ex = event.clientX;
	var ey = event.clientY;
	var wx = window.innerWidth/2;
	var wy = window.innerHeight/2;

	document.styleSheets[1].deleteRule(document.styleSheets[1].cssRules.length - 1); //delete the last rule

	if(ex < wx && ey < wy){ // top left quarter
		document.styleSheets[1].insertRule('.thumbnail:hover span { visibility: visible; top: -15px; left: 15px; }',document.styleSheets[1].cssRules.length);
	}
	if(ex > wx && ey < wy){ // top right quarter
		document.styleSheets[1].insertRule('.thumbnail:hover span { visibility: visible; top: -15px; left: '+(-(img.width - 60))+'px; }',document.styleSheets[1].cssRules.length);
	}
	if(ex < wx && ey > wy){ // bottom left quarter
		document.styleSheets[1].insertRule('.thumbnail:hover span { visibility: visible; top: '+(-(img.height + 15))+'px; left: 15px; }',document.styleSheets[1].cssRules.length);
	}
	if(ex > wx && ey > wy){ // bottom right quarter
		document.styleSheets[1].insertRule('.thumbnail:hover span { visibility: visible; top: '+(-(img.height + 15))+'px; left: '+(-(img.width - 60))+'px; }',document.styleSheets[1].cssRules.length);
	}

	span.style.visibility = "visible";

}

function handleMouseOut(event){
	var span = event.currentTarget.getElementsByTagName("span")[0];
	span.style.visibility = "hidden";
}

function addIframeMagic(thumbnailLink)
{
	//make an ajax call to the original url. this is an extra step here as compared
	//to Google as Picsearch exposes actual url of image only after clicking the links

	var xmlHttpRequest = new XMLHttpRequest();
	xmlHttpRequest.onreadystatechange = function(){
		addCSSMagic(xmlHttpRequest, thumbnailLink)
	}
	xmlHttpRequest.open('GET',thumbnailLink.href, true)
	xmlHttpRequest.send(null);
}


function addCSSMagic(xmlHttpRequest, thumbnailLink)
{
	if(xmlHttpRequest.readyState == 4){

		var htmltext = xmlHttpRequest.responseText;
		var framesrc = htmltext.match( /<frame src=\"(.*?)\" scrolling/ );
		var googleLikeLink = framesrc[1];
		var imgmatch = googleLikeLink.match( /\&iurl\=(.*?)\&purl\=(.*?)/ );
		thumbnailLink.href = unescape(imgmatch[1]);

		// Add thumbnail class to each link
		thumbnailLink.className = "thumbnail";
		thumbnailLink.addEventListener("mouseover", handleMouseOver, false);
		thumbnailLink.addEventListener("mouseout", handleMouseOut, false);

		// Add a hidden span holding actual image for each link
		var span = document.createElement('span');
		thumbnailLink.appendChild(span);
		var image = document.createElement('img');
		image.src = thumbnailLink.href;
		span.appendChild(image);

		//CustomizeGoogle way
		thumbnailLink.parentNode.appendChild(document.createElement("BR"));

		var smallfont = document.createElement('font');
		smallfont.size = '2';
		smallfont.appendChild(document.createTextNode("["));

		var link1 = document.createElement("a");
		var pagematch = googleLikeLink.match( /\&purl\=(.*?)\&fs\=(.*?)/ );
		link1.setAttribute("href", unescape(imgmatch[1]));
		link1.appendChild(document.createTextNode("Origin Image"));
		smallfont.appendChild(link1);

		smallfont.appendChild(document.createTextNode("|"));

		var link2 = document.createElement("a");
		var pagematch = googleLikeLink.match( /\&purl\=(.*?)\&fs\=(.*?)/ );
		link2.setAttribute("href", unescape(pagematch[1]));
		link2.appendChild(document.createTextNode("Origin Page"));
		smallfont.appendChild(link2);

		smallfont.appendChild(document.createTextNode("]"));

		thumbnailLink.parentNode.appendChild(smallfont);
	}
}

function alterLinks(){

	doc = window.document;

	// Get a list of all A tags that have an href attribute containing the id of the image.
	var picsLinks = selectNodes(doc, doc.body, "//A[contains(@href,'/info.cgi?q=')]");

	if(picsLinks.length > 0){

		for (var x=0; x<picsLinks.length; x++)
		{
			addIframeMagic(picsLinks[x]);
		}
	}

}