turn links into thumbnails

[Rob]

No idea if this is possible, anyone know of a script that will help out? I frequent a site comic site that has a clickable link beside each issue, that link opens  a popup image of the cover. is there a way to modify the site to show thumbnails of those covers, instead of the link? That way, all the images are viewable immediately, albeit as a thumbnail, without need for clicking?

[LWChris]

It should be easy:

1. Add a new script from the Greasemonkey menu.
2. Give it a namespace and a name. The name is what you'll see as visible name. The combination of namespace+name has to be unique for all installed scripts, so the namespace should be something that's likely going to be exclusively used by you.
3. Narrow down the matching url pattern in the "@include" rule as close as possible to the pattern the comic pages use, so if the comics are for example http://www.example.org/show/?p=3512, use http://www.example.org/show/?p=* as pattern.
4. Add the "framework": define a (so far empty) "modify" function, and execute it as soon as the page is loaded through the window.addEventListener functionality below it:
   
   
   function modify() {
   }
   window.addEventListener("load", modify, false);
   
   This way your code inside the "modify" function will run when the page is done loading, at which point the link should actually be present.
5. Inside the "modify" function, do the actual manipulation of the HTML source code in 5 easy steps:
   
   1. Find the link element using the functions getElementByID, getElementsByTagName, getElementsByName. Use MDN or any source you like for a reference how these functions work.
   2. Get the image's URL from the link's href attribute
   3. Create an img tag using the document.createElement function. Again, use MDN to see how this function works.
   4. Assign the src attribute of the img node to the link (which should be an image file already), define a suitable thumbnail width and height, and add a style attribute with "border: 1px solid black" (optional).
   5. Remove the link's original child nodes (i. e. the text) and append the newly created img node as a child. This way you get a clickable thumbnail.

You can do it. :)

Chris

[LWChris]

As a quick update regarding step 5.1: I totally forgot about "document.querySelector"; it allows you to select an element using the selector syntax from CSS. That is actually much easier than messing around with the clumsy getElement[s]ByX functions.

Chris

--
You received this message because you are subscribed to the Google Groups "greasemonkey-users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to greasemonkey-us...@googlegroups.com.
To post to this group, send email to greasemon...@googlegroups.com.
Visit this group at https://groups.google.com/group/greasemonkey-users.
For more options, visit https://groups.google.com/d/optout.