I'm using FireFox. I want to split a picture into 3 parts and then display only middle part using greasemonkey. Can someone please help me out... Thank You
+3
A:
You could do it by setting the image as a background image and manipulating the size and background-position.
Here's how to do it using jQuery:
var img = /* get the image */
var width = Math.round(img.width() / 3.0);
var split = $('<div></div>')
.css('background-image', 'url(' + img.attr('src') + ')')
.css('background-position', '-' + width + 'px 0')
.css('width', width + 'px')
.css('height', img.height());
img.before(split)
.hide();
I assume you want to split it horizontally, but it should be straightforward to convert this to split vertically.
See this question for how to use jQuery in GreaseMonkey.
David Fullerton
2010-05-03 01:33:07