HTML、CSS、および/またはJavaScriptとのリンクから画像ソース（src = ""）のスナップショットを自動的に作成します

Question

HTML文書では、画像のプレースホルダを作成しますが、私が画像にリンクをつけると、ターゲットのウェブサイトからスナップショットを取得して画像ソースとして使用するように言います。あなたは非常に私は次のようにそれが言っているのか理解していない場合：

を私はリンクされた画像

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

を作成したいと私は「ソース」とを交換するためにJavaScriptを使用したいです'＃'ページのスナップショット。

私は自分のウェブサイトで、埋め込みコードのリンクを使用してYouTube動画にリンクし、リンク/ URLを入力する以上の作業をせずに自動的にリンクのサムネイルを取得できるようにしたいと考えています。

私はあまりjavascript savyではないので、可能であれば非常に最小限のJavascriptでこれをやろうとしていますが、その部分の助けに感謝します。すべての答えが高く評価され、さらに情報が必要な場合はただ聞いてください。

Answer 1

Imageオブジェクトを受け取ります。あなたが行うことができ、子供と同じくらいの画像とのすべてのリンク、のためにこれを行うにしたいと仮定すると、

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

Answer 2

：

$('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); 

    } 
}); 

上記は、プロジェクトでのjQueryを使用したとOKです前提としています。

Answer 3

あなたがYouTubeのスクリーンショットを配置する場合、私は私がそれを一緒に入れてどのようにここにjYouTubeでのjQueryを使用することをお勧めして：

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> 

はまた、私はそれを置きます簡単なデモのためのjsfiddleで：http://jsfiddle.net/snyew/

私はこれが助けてくれることを願っています:-)