MySpace Image Rollover
Displays the large version of myspace photos when you place your mouse over them.
This script displays the full size image of any thumbnails when you put your mouse over it. This is based on a script by Justin Rosenthal.
Update: Images now display in the top left corner to prevent them from going off the screen.
You could comment on this script if you were logged in.
login to vote
Anyone know how to enable this script on the friend updates? For some reason it doesn't work for me... anyone else having this problem?
login to vote
Hey, I'm kinda new to this scipts thing, but I am catchin on.
Is there anyway you could make the image rollover for all pictures on myspace? Because on mine it only does certain pics.
I use the Home Auto-Update script and the Home skin switchup script and it wont show the picture when I rollover my friends pics on the Bulletins screen and the online friends screen it won't let me view them.
Is there a way you can make that possible?
login to vote
that would be incredible if they could.... But I don't think so. maybe put a delay to run that part of the script after the unpaged photos script runs.
login to vote
It works great, but if I use it along with Myspace - Unpaged Photos..... http://userscripts.org/scripts/show/13030 it will only work on the first page of images. Anyway to fix this?
login to vote
update..... it's not working...
login to vote
Great script ...thanks :D
login to vote
I love this script and I've been using it for a long time. Is there any chance of getting a version that works on flickr?
login to vote
Great work!!! High five!! lol thanks.
login to vote
Great script. thanks Mark, and thank you Graig for the modification to move the image to the right if it's covered by mouse. here's the full script including Craig's changes in case any of you need it:
// ==UserScript==
// @name MySpace Image Rollover
// @namespace http://www.lessel.us/
// @include http://*.myspace.com/*
// ==/UserScript==
// By: Mark Lessel
// Email: mark@lessel.us
// Based on a script from Justin Rosenthal
var allImages, thisImage;
var globalTimer;
allImages = document.evaluate(
'//img[contains(@src, "ac-images")]',
document,
null,
XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE,
null);
// Holds paths of all the enlarged images
imgArray = new Array( allImages.snapshotLength * 2);
i=0;
while (i < allImages.snapshotLength) {
thisImage = allImages.snapshotItem(i);
// Example of photo src --> 03/31/2006
// http://photos-420.facebook.com/images/profile/628/72/t9999999_99999.jpg
// want to change the 't' to an 'n' for large image
var src = thisImage.src;
//var path = src.substring( 0, src.lastIndexOf('/') + 1 );
//var fileName = 'n' + src.substring( src.lastIndexOf('/') + 2, src.length);
var fileName = src.replace("_m.jpg","_l.jpg");
fileName = fileName.replace("/m_","/l_");
fileName = fileName.replace("_s.jpg","_l.jpg");
fileName = fileName.replace("/s_","/l_");
thisImage.alt = i;
imgArray[i] = fileName;
imgArray[i + allImages.snapshotLength] = src;
var newDiv = document.createElement('div');
var html = "
newDiv.innerHTML = html;
document.body.appendChild(newDiv);
thisImage.addEventListener(
'mouseover',
function(event) {
var x = event.pageX;
var y = event.pageY;
var z = 't' + this.alt;
var screeny = event.screenY;
globalTimer = window.setTimeout(
function() { popUp(x,y,screeny,z); }, 500);
},
true);
thisImage.addEventListener(
'mouseout',
function(event) {
window.clearTimeout(globalTimer);
document.getElementById('t' + this.alt).style.visibility = "hidden";
},
true);
i++;
}
function addGlobalStyle(css) {
var head, style;
head = document.getElementsByTagName('head')[0];
if (!head) { return; }
style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = css;
head.appendChild(style);
}
addGlobalStyle('.tip {font:10px/12px Arial,Helvetica,sans-serif;border:0;padding:3px 3px 3px 3px;visibility:hidden;position:absolute;z-index:100;color:#333333;top:20px;left:90px;background-color:#3B5998;}');
addGlobalStyle('.tip img {border:2px solid white;}');
function popUp(pgX,pgY,screeny,oi){
var winWidth = window.innerWidth;
var winHeight = window.innerHeight;
objStyle = document.getElementById(oi).style;
obj = document.getElementById(oi);
objWidth = obj.offsetWidth;
if (objStyle.visibility == "visible") {
objStyle.visibility = "hidden";
}
else {
//if ( (pgY + obj.offsetHeight) > winHeight )
// var top = pgY - obj.offsetHeight - 20;
//else
var top;
var left;
if ( ( pgX - 40 ) < obj.offsetWidth )
{
if ( ( screeny - 200 ) < obj.offsetHeight )
left = (winWidth - obj.offsetWidth - 20)
else
left = 10;
}
else
left = 10;
top = pgY - screeny + 170;
objStyle.left = left;
objStyle.top = top;
objStyle.visibility = "visible";
}
}
login to vote
Perfect :-D
login to vote
I think that happens when you roll over an image that is then covered up by the large version. I'll see if I can find a fix.
login to vote
I noticed that with the new script, that sometimes images just tend to flicker. I think it happens when click on a image, but I'm not sure yet.
login to vote
I like this script alot, but I prefer the older method of the image popping right above or below the cursor, and to fix the problem with it going off the screen (up or down anyway) I changed the IMG's CSS to:
addGlobalStyle('.tip img {border:2px solid white; max-height: 600px; width: auto;}');The only thing I'd like to suggest (this applies to the older version though) is to figure out a way to keep it from going off the screen to the sides
login to vote
Thanks for the suggestions! Check out the new version of the script and let me know what you think.
login to vote
Hey i really like this script, however the images show up off the scrfeen, wondering if its gonna be updated to work correctly like the one on facebook
login to vote
I'd like to get the results you got Graig, but your info was way over my head considering I don't know enough about JS.
login to vote
I modified the script so that it always loads the image in the upper left-hand corner of the screen unless that would put it under the mouse-cursor. In that case it loads in the upper right (if the image is big enough this could still put it under the cursor).
First, I made a variable called screeny and passed it to the popup function:
var screeny = event.screenY;
globalTimer = window.setTimeout(
function() { popUp(x,y,screeny,z); }, 500);
Then the declaration of popUp needs the screeny addition:
function popUp(pgX,pgY,screeny,oi)
Last, I modified the popup function so that top and left are calculated like this:
var top;
var left;
if ( ( pgX - 40 ) < obj.offsetWidth )
{
if ( ( screeny - 200 ) < obj.offsetHeight )
left = (winWidth - obj.offsetWidth - 20)
else
left = 10;
}
else
left = 10;
top = pgY - screeny + 170;
The 170 in the top calculation puts it 170 pixels from the top of the screen. Depending on how many toolbars you have in Firefox, you may need to adjust this value.
Enjoy!
login to vote
This script is great, but it could use one change. Since a lot of myspace images are big and can run off the screen, is it possible to set a screen position where all images will appear, rather than popping up next to the mouse? (For instance, as it does in the "inYOfac3Book" script.)
You could comment on this script if you were logged in.