automatically make an image source (src=" ") a snapshot from its link with HTML, CSS, and/or javascript

Question

In my HTML document I want to create a placeholder for an image but leave the source 'To be determined' so to speak so that when I put a link on the image it will acquire a snapshot from the target website to use as the image source. If you don't quite understand what I'm saying it is as follows:

I want to create a linked Image

<a href="#"><img src="source"></a>

and I want to use javascript to replace the 'source' with a snapshot of the '#' page.

I would like to use this so that on my website I can link to Youtube videos (using the link in the embed codes) and automatically acquire a thumbnail for the link without any work more than inputting the link/URL.

I am not very javascript savy so any help with that portion will be much appreciated, although I am trying to do this with very minimal Javascript if possible. All answers are much appreciated and if any more information is needed just ask.

score 1 · Answer 1 · answered Jan 05 '12 at 05:28

If you want to put YouTube screenshot I recommend using jQuery with jYouTube and here how I put it together:

JAVASCRIPT:

// Run when page is load
$(function(){

    // Find all <a> inside element with youTube class name
    $(".youTube a").each(function(){

        // Get reference to found <a> link
        var lnk = $(this);

        // Get YouTube thumb image for <a>'s href attribute
        var url = $.jYoutube(lnk.attr("href"));

        // Now update inside image's src attribute with thumbs image
        lnk.children('img').attr("src", url);
    });
});

HTML

<div class="youTube">
<a href="http://www.youtube.com/watch?v=jZxRWTz8qiY"><img src="#" /></a><br />
<a href="http://www.youtube.com/watch?v=jZxRWTz8qiY"><img src="#" /></a><br />
<a href="http://www.youtube.com/watch?v=jZxRWTz8qiY"><img src="#" /></a><br />
</div>

Also I put it in jsfiddle for easy demo: http://jsfiddle.net/snyew/

I hope this helps :-)

Also if you want Vimeo support I recommend you take a look at this thread as well: http://stackoverflow.com/questions/5201534/get-youtube-or-vimeo-thumbnails-in-one-shot-with-jquery — Qorbani, Jan 05 '12 at 05:41
Thanks a ton, this is exactly the effect I was looking for and thank you for adding the comments in the code to make it easy for me to read. — Austin Fish, Jan 06 '12 at 02:17
You're more than welcome Austin! Also it was nice to see that this thread was your first question in StackOverflow :-) — Qorbani, Jan 06 '12 at 02:45

score 0 · Answer 2 · answered Jan 05 '12 at 05:07

0

It takes an Image object.

yourImg = document.getElementById("image_id");
var newImg = new Image();
newImg.src = //URL of the image to be acquired
yourImg.src = newImg.src;

answered Jan 05 '12 at 05:07

Golmaal

669
5
8

score 0 · Answer 3 · answered Jan 05 '12 at 05:11

Assuming you want to do this for every link with just an image as child, you can do:

$('a').each(function() {
  if($(this).children('img').length == 1 && $(this).children().length == 1) {

    // get snapshot
    var snapshotImgURL = getSnapShotOf($(this).attr('href')); // replace this with your AJAX call to get the snapshot

    // set it to the image
    $(this).children('img').attr('src', snapshotImgURL);

  }
});

The above assumes you are ok with using jQuery on the project.

automatically make an image source (src=" ") a snapshot from its link with HTML, CSS, and/or javascript

3 Answers3