画像を1つの列に移動して別の列にテキストを表示させる

Question

私はこの質問をさまざまな形で求めていますが、私の正確な問題に対する答えは見つけられません。わかりました！

私は非常にプログラミングに新人で、自分のウェディングケーキ事業のウェブページを自分自身で構築して、HTML、CSS、JavaScriptとJQueryに慣れさせようとしています。私は1つの列にサムネイル画像のリストを持っています。これは、 "onmouseover"を追加したものです。つまり、CSSの切り替えに加えて、上に置かれたときに中央の列に大きなバージョンのものが表示されます。私はまた、メインの画像の右側に3列目の各ケーキについての情報を表示したいと思いますが、これについてどうやって行くのか分かりません。

<div class="col-md-3"> 
<ul class="cake-thumbs"> 
    <li> 
     <figure class="cake-img"> 
      <img onmouseover="getElementById('preview').src=this.src" id="img10" src="Resources/img/10.jpg" alt="Pastel Pink Placard and Pearls"> 
     </figure> 
    </li> 
    <li> 
     <figure class="cake-img"> 
      <img onmouseover="getElementById('preview').src=this.src" id="img11" src="Resources/img/11.jpg" alt="Naked Wedding Cake with fresh fruit"> 
     </figure> 
    </li> 
    <li> 
     <figure class="cake-img"> 
      <img onmouseover="getElementById('preview').src=this.src" id="img12" src="Resources/img/12.jpg" alt="Gold Damask and Pearls"> 
     </figure> 
    </li> 
</ul> 
</div> 
<div class="col-md-6"> 
     <img id="preview" src="Resources/img/1.jpg" alt=""> 
</div> 
<div class="col-md-3"> 
    <p id="info">Price and servings here</p> 
</div> 

Answer 1

でdocument.が欠落しています情報 "は、ホバリングされたときに第3列にコピーされます。プレビューカラムに配置するフルサイズの画像を含む各imgに属性「データプレビュー」を添付しました。

また、モバイルユーザーがあなたのサイトにアクセスしたときに、画像をクリックすることができるように（マウスイベントをサポートする携帯電話はほとんどありません）、マウスセンターに加えてイベントをクリックします。ここで

$(document).on('mouseenter click','.cake-img',function(){ 
 
    $('#preview').attr('src',$('img',this).data('preview')); // Copy source to preview 
 
    $('#info').html($('.info',this).html()); // Copy text 
 
});

body{padding-top: 75px} /* Look pretty in stack overflow full screen */ 
 
.cake-thumbs figure { display: inline-block }

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="col-md-3"> 
 
<ul class="cake-thumbs"> 
 
    <li> 
 
     <figure class="cake-img"> 
 
      <img id="img10" src="http://via.placeholder.com/100/00ffff?text=Thumbnail" alt="Pastel Pink Placard and Pearls" data-preview="http://via.placeholder.com/250/00ffff&text=Full Image 1"> 
 
      <div class="info hide"> 
 
       Price and servings 1 
 
      </div> 
 
     </figure> 
 
    </li> 
 
    <li> 
 
     <figure class="cake-img"> 
 
      <img d="img11" src="http://via.placeholder.com/100/0000ff?text=Thumbnail" alt="Naked Wedding Cake with fresh fruit" data-preview="http://via.placeholder.com/250/0000ff&text=Full Image 2"> 
 
      <div class="info hide"> 
 
       Price and servings 2 
 
      </div> 
 
     </figure> 
 
    </li> 
 
    <li> 
 
     <figure class="cake-img"> 
 
      <img id="img12" src="http://via.placeholder.com/100/00ff00?text=Thumbnail" alt="Gold Damask and Pearls" data-preview="http://via.placeholder.com/250/00ff00&text=Full Image 3"> 
 
      <div class="info hide"> 
 
       <h3>More complicated info</h3> 
 
       <ul> 
 
       <li>Unbox</li> 
 
       <li>Eat</li> 
 
       <li>Watch waistline grow</li> 
 
       </ul> 
 
      </div> 
 
     </figure> 
 
    </li> 
 
</ul> 
 
</div> 
 
<div class="col-md-6"> 
 
     <img id="preview" src="Resources/img/1.jpg" alt=""> 
 
</div> 
 
<div class="col-md-3"> 
 
    <p id="info">Price and servings here</p> 
 
</div>

Answer 2

ここではこれを行う簡単なjquery式を示します。

注：これは広義の質問ですが、これは間違いなくあなたが右方向に

$(document).on('hover', '.cake-img', function(event) { 
    $('.col-md-3').text('sample text here'); 
}); 

Answer 3

を指されますjQueryのは、この（それを待つ...）ケーキのようになります。）

$('.cake-img img').mouseover(function(){ 
    $('#preview').attr('src', this.src) 
}) 

これは、ページの末尾または頭に入れて、document.ready callで囲んで、インラインJavaScriptを削除することができます。

Answer 4

問題は、私が "直接要素にアタッチされたイベントの上にマウスを除去し、クラスと子のdivを作成しましたgetElementById()ここ

<div class="col-md-3"> 
 
<ul class="cake-thumbs"> 
 
    <li> 
 
     <figure class="cake-img"> 
 
      <img onmouseover="document.getElementById('preview').src=this.src" id="img10" src="http://lorempixel.com/50/50/city" alt="Pastel Pink Placard and Pearls"> 
 
     </figure> 
 
    </li> 
 
    <li> 
 
     <figure class="cake-img"> 
 
      <img onmouseover="document.getElementById('preview').src=this.src" id="img11" src="http://lorempixel.com/50/50/sports" alt="Naked Wedding Cake with fresh fruit"> 
 
     </figure> 
 
    </li> 
 
    <li> 
 
     <figure class="cake-img"> 
 
      <img onmouseover="document.getElementById('preview').src=this.src" id="img12" src="http://lorempixel.com/50/50/cats" alt="Gold Damask and Pearls"> 
 
     </figure> 
 
    </li> 
 
</ul> 
 
</div> 
 
<div class="col-md-6"> 
 
     <img id="preview" src="http://lorempixel.com/50/50/nature" alt=""> 
 
</div> 
 
<div class="col-md-3"> 
 
    <p id="info">Price and servings here</p> 
 
</div>

Answer 5

私はあなたが望むものを達成することを方法です。あなたは通常、小さなサムネイルと大きな画像の2つの画像を持っています。 imgのsrcにサムネイルの場所を.cake-imageの中に入れることができます。次に、hrefのa.image-previewにあるフルサイズの画像へのリンクがあります。もともとはサムネイルだけを読み込み、必要なときにのみフルイメージを読み込むため、ページの読み込み速度が向上します。

テキスト部分には、data-descriptionのようなデータ属性を追加します。ここでは、説明や必要な値を入力します。これは、$("element_selector").data("wha-is-after-hypen").の行に沿って何かを使用して抽出することができます。以下のコードを参照してください。

注：私はあなたがTwitterのブーストラップとjqueryを使用していると仮定しているため、コードの先頭にリンクがあります。`` getElementByIdを（） `でdocument.`がありません

(function($) { 
 
    $(document).ready(function() { //execute this when the document is ready 
 
    $(".image-preview").on("mouseover click", mouseoverHandler); //Bind actions to the mouseover and click events. Why click? because if someone clicks on your link you will be redirected to the image. 
 

 
    function mouseoverHandler(event) { 
 
     event.preventDefault(); //Prevent the default action, in this case click is the trouvlesome one 
 
     $("#preview").prop("src", $(this).attr('href')); // replace the previews src with the href of your link 
 
     $("#info").html($(this).data('description')); //Add the data description to your info element 
 
    }; 
 
    }); 
 
})(jQuery);

<!-- Latest compiled and minified CSS --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
 

 
<!-- Optional theme --> 
 
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"> 
 

 
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> 
 

 
<!-- Latest compiled and minified JavaScript --> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script> 
 

 

 
<div class="row"> 
 
    <div class="col-xs-3"> 
 
    <ul class="cake-thumbs"> 
 
     <li> 
 
     <a class="image-preview" href="https://s-media-cache-ak0.pinimg.com/736x/7a/18/07/7a18076909f51c90242c4d03e5be012f.jpg" data-description="5"> 
 
      <figure class="cake-img"> 
 
      <img id="img10" src="https://s-media-cache-ak0.pinimg.com/736x/7a/18/07/7a18076909f51c90242c4d03e5be012f.jpg" alt="Pastel Pink Placard and Pearls" width="100px"> 
 
      </figure> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a class="image-preview" href="https://s-media-cache-ak0.pinimg.com/736x/cb/e7/99/cbe79953ed564435600981aaffe5593c.jpg" data-description="8"> 
 
      <figure class="cake-img"> 
 
      <img id="img11" src="https://s-media-cache-ak0.pinimg.com/736x/cb/e7/99/cbe79953ed564435600981aaffe5593c.jpg" alt="Naked Wedding Cake with fresh fruit" width="100px"> 
 
      </figure> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a class="image-preview" href="https://apis.xogrp.com/media-api/images/b4adc5bb-71b3-f0de-edeb-25f42dc2cf91~sc_320.320" alt="Naked Wedding Cake with fresh fruit" data-description="3"> 
 
      <figure class="cake-img"> 
 
      <img id="img12" src="https://apis.xogrp.com/media-api/images/b4adc5bb-71b3-f0de-edeb-25f42dc2cf91~sc_320.320" alt="Gold Damask and Pearls" width="100px"> 
 
      </figure> 
 
     </a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    <div class="col-xs-6"> 
 
    <img id="preview" src="" alt="" width="200"> 
 
    </div> 
 
    <div class="col-xs-3"> 
 
    <p id="info">Price and servings here: </p> 
 
    </div> 
 
</div>