A few weeks ago I tinkered around with “zoomifying” a graphic upon mouseover. I quickly discovered that I needed to add a “mouseout” event, so with some more hobbling around I was able to write up something that works. I have the feeling that experts would have written it more simply — but hey, it works!

For this tutorial we’re going to assume that the natural width of the image is 300, and the magnified width of the image is 800px. Note that the jQuery library must be called before any of the jQuery can work.

Mouseover the image to see example:

Step 1:
Save the image in its original, high-quality size.
Step 2:
Upload the high-quality image into PicMonkey (or another photo editor) and find the heights for when the image is resized to width=300 and for when the image is resized to width=800</p>

Copy and paste the following script to the top of the WordPress post. Switch out the heights that you found from picmonkey.

Step 3:
Get rid of the tags in the image on the post. So

<pre class="syntax {CSS}> </pre>

becomes

<pre class="syntax {css}> </pre>

Step 4:
Change the class to be equal to “infographic1″, and edit out the title to whatever you desire.

<pre class="syntax {css}>> </pre>

becomes

<pre class="syntax {css}> </pre>

Step 5:
Click “preview” to check that the zoomification effect is working. Double check the other steps if it’s not.

</span>