How to split a loaded picture using greasemonkey?

Question

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

Answer 1

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.