onmouseover="nightmare"

April 19, 2010 12:20 AM

Help me print the unprintable.

I'm interested in having a printed version of the Periodic Table of Visualization Methods. However, since there doesn't seem to be an option to purchase a printed version of it, I decided to print one myself.

I'd like to include some or all of the visualization examples that appear when you hover your mouse over one of the elements in the table. The problem is that I can't save any of them. I've also tried DownThemAll but to no avail.

How can I download the damn things so that I can print them?

posted by howiamdifferent to computers & internet (7 answers total)

Screenshot.
posted by LudgerLassen at 12:39 AM on April 19, 2010

They're all named "/periodic_table/pix/[filename]" . for example. In the source they're embedded in javascript that looks like this:

overlib('<div align=\'center\'><img src=&quot;pix/concept-skeleton.png&quot;> </div>'

So you could write a regex to process the file using something like ""(pix/.+)"" where the part inside the parentheses is a capturing group could work.

Actually just tried that using this online regex tester. I pasted the HTML source into the main textarea, then pasted my regex into the the top one and it highlighted the image URLs. Unfortunately I don't see any way to copy out the highlighted entries. And it's also lacking a scrollbar (so you have to scroll with the keyboard).

The problem there is that you lose which images go with which squares.
posted by delmoi at 12:48 AM on April 19, 2010

Actually, I a real unix hacker could do this from the command line with something like

wget page URL | grep regex | some command to prepend the base URL - sed or something | xargs wget

that gives you a basic idea of how the workflow would go

Screenshot.

Won't work because he wants to print the hovers.
posted by delmoi at 12:55 AM on April 19, 2010

Here you go!

For your reference, this is the result of quite possibly one of the ugliest things ever posted in a MeFi comment before:

curl http://www.visual-literacy.org/periodic_table/periodic_table.html | grep 'overlib(' | sed -E "s/\\\'/'/g" | sed -E "s/.*status='([^;]+)';.*"(.*)".*/<a href=\"http:\/\/www.visual-literacy.org\/periodic_table\/\2\"><b>\1<\/b><\/a><br>/" | sed -E "s/.*status='([^;]+)';[^<]+(\<[^\/]+\>)+([^<]+)\<.*/<b>\1<\/b> \3<br>/"

There is probably a more elegant way of doing the same thing, but I am merely an amateur regular expressionist.

Enjoy.
posted by caaaaaam at 2:23 AM on April 19, 2010 [3 favorites]

OMG thank you!

You MeFites are something else, honestly. <3
posted by howiamdifferent at 2:26 AM on April 19, 2010

If you look at the page source, all of the popovers are specifically named. Cut/paste the name paths into your browser and they come up. It's manual work, true, but pretty simple.
posted by Thorzdad at 5:22 AM on April 19, 2010

(The owner actually gives links to people who have provided all this before.)
posted by Houstonian at 6:06 AM on April 19, 2010