0

ユーザーに見てもらいたい画像があります。ユーザーがこの画像をクリックすると、画像が消えて、その場所にビデオが表示されます。誰かがこれを行う方法を教えてもらえますか?

ここに私がこれまでに持っているコードがあります。

<div id="homeflash" style="height:413px; background-image:url(../../../upload/1/img/homeFlashBG.jpg);">
    <a href="#">
         <img src="../../../upload/1/img/video.jpg" style="display:none" />
    </a>

    <div id="video" style="display:inline">
        <iframe allowfullscreen="" frameborder="0" height="395" src="//www.youtube.com/embed/X8mLel_werQ?rel=0" width="691"></iframe>
    </div>
</div>

誰かが私の投稿を編集してコードをクリーンアップできれば、それは素晴らしいことです。私はそれを理解することはできません。

コードを少し説明すると、画像をクリックした後のコードは次のようになります。最初にページを表示すると、2 つの表示スタイルが逆になります。

どんな助けも素晴らしいでしょう。

ありがとう

4

2 に答える 2

0

最初はビデオを非表示にするため、スタイルを指定しdisplay:noneます。idまた、jQuery で参照できるように、サムネイル画像に を付けたいと考えています。画像の周囲からタグを削除することもできます<a>(不要です)。

HTML

<div id="homeflash" style="height:413px; background-image:url(../../../upload/1/img/homeFlashBG.jpg);">
    <img id="thumbnail" src="../../../upload/1/img/video.jpg" />

    <div id="video" style="display:none">
        <iframe allowfullscreen="" frameborder="0" height="395" src="//www.youtube.com/embed/X8mLel_werQ?rel=0" width="691"></iframe>
    </div>
</div>

JavaScript

$(document).ready(function(){
    $("#thumbnail").click(function(){
        $(this).hide()
        $("#video").show()
    })
})

可能であれば、CSS スタイルをインラインで追加しないようにします。

于 2013-07-18T15:31:21.193 に答える
0

一般的なアイデアは次のようになります。

$(function() {
  $("img").click(function() {
   $(this).css("display","none");  // will hide your image
   $("body").append("<div id='video'></div>");   // will append div with id video, this div should have video code inside this.
});
});
于 2013-07-18T15:08:53.920 に答える