this is the HTML on everypost
<div class="post-body">
<a href="http://www.google.com">google</a>
<a href="http://www.youtube.com">youtube</a>
<a href="http://www.facebook.com">facebook</a>
</div>
for each link for eg <a href="http://www.google.com">google</a> add an image with the same hyperlink in this case <a href="http://www.google.com">google</a> and within the image src
add the hyperlink after http://open.thumbshots.org/image.aspx?url= so the outcome will be <img src="http://open.thumbshots.org/image.aspx?url=http://www.google.com" width="120px" />
the code below is the outcome for the html in every post.
<div class="post-body">
<a href="http://www.google.com">google</a>
<a href="http://www.google.com"><img src="http://open.thumbshots.org/image.aspx?url=http://www.google.com" width="120px" /></a>
<a href="http://www.youtube.com">youtube</a>
<a href="http://www.youtube.com"><img src="http://open.thumbshots.org/image.aspx?url=http://www.youtube.com" width="120px" /></a>
<a href="http://www.facebook.com">facebook</a>
<a href="http://www.facebook.com"><img src="http://open.thumbshots.org/image.aspx?url=http://www.facebook.com" width="120px" /></a>
</div>
This is relatively simple:
JS Fiddle demo.
Though it might be wise to run the website URLs through
encodeURIComponent(), just to be on the safe side:JS Fiddle demo.
Also, and just for the sake of demonstration, if not thoroughness, this doesn’t really require jQuery; the same could be achieved using plain JavaScript (albeit in a rather less concise manner):
JS Fiddle demo.
With regards to Floyd Pink’s comment, I must confess that I missed the need for the image to be a link also. The following is a somewhat messy way of taking care of that, though I feel there must be a far tidier way:
JS Fiddle demo.