Malkovich Malkovich Malkovich

Malkovich Malkovich Malkovich
In the film Being John Malkovich, John Cusack plays a puppeteer who finds a portal to inside John Malkovich’s head. Eventually John Malkovich himself goes through this portal, and the ensuing paradox means that every word he hears is “Malkovich”, and every face he sees is his own.

Re-watching this film lately gave me an idea for the latest trivial entry in my ongoing bookmarklets collection, where every image on a website is changed to show the same one. So read below the jump to find out how to Malkovich a website – or customise the effect to use an image of your choosing!

How it works

Being a very simple and silly bookmarklet, the idea behind it is pretty simple:
– loop through each image on a website
– change the image on the site to a new image (John Malkovich, in this case)
– ensure the new image has the same height and width of the previous image, to keep the page layout the same

Step 1: Pick an image

var newImg = '';

Step 2: Loop through each image on the page

for(i=0; i<document.getElementsByTagName('img').length; i++)

Step 3: Get the height and width of the existing image
We need to get the current height and width of the current image on the page. We do this as if the image dimensions haven’t been explicitly specified in the target’s site html and differ from our “Malkovich” image, the target site’s layout can get quite borked.

var swapH = document.getElementsByTagName('img')[i].height;
var swapW = document.getElementsByTagName('img')[i].width;

Step 4: Enter Malkovich

// Ensure height & width kept consistent
document.getElementsByTagName('img')[i].height = swapH;
document.getElementsByTagName('img')[i].width = swapW;

Step 5: Wrap it all up in a bookmarklet
A void(0) is required at the end of the bookmarklet to stop the browser from trying to open a new page.

javascript: var newImg = '';for(i=0; i<document.getElementsByTagName('img').length; i++){var swapH = document.getElementsByTagName('img')[i].height; var swapW = document.getElementsByTagName('img')[i].width; document.getElementsByTagName('img')[i].src=newImg;document.getElementsByTagName('img')[i].height = swapH; document.getElementsByTagName('img')[i].width = swapW;};void(0);

You can also drag the Malkovich Malkovich Malkovich bookmarklet to your browser’s bookmarks bar, click it on any website, and behold the Malkovication of that site.


Make your own

The novelty of seeing John Malkovich all over the place is nice, but it would be better if you could customise the effect a little more.

Enter the address of any image you wish in the box above. Then drag your very own custom Malkovich bookmarklet to your bookmarks bar, and you’re done! The bookmarklet updates in real time as you type in the box above.


But why…

Why not just use jQuery?
JQuery isn’t loaded on all websites by default. Loading jQuery is possible in a bookmarklet, but adds far more overhead than using the more-verbose JS above.

Why didn’t all images on the site I tried change?
This bookmarklet works only on images loaded in an img tag. If an image is a background image on a div, then the bookmarklet won’t catch it.

Wait, a bookmarklet? What is that?
A bookmarklet is a small chunk of javascript that allows us to extend the functionality of a given page. See this explanation for a bit more detail.

This is ridiculous. What’s the point?
There is absolutely no point or useful function to this whatsoever. Any potential amusement you may derive from using it is linked directly to your imagination when selecting an image and website.

And that’s it. If you’ve any thoughts on improving the implementation above, or have an hilarious screenshot resulting from use of the bookmarklet, let me know in the comments below!

Leave a Reply