htmlのイメージ名を選択して取得する

-5

最初にこれらのイメージの1つを選択する必要があります。次に、イメージが選択されていることを示します（おそらくバウンディングボックスで表示されます）。最後にページ内に印刷する必要があります）選択されたイメージの名前。htmlのイメージ名を選択して取得する

<!DOCTYPE html> 
    <html> 
    <head></head> 

    <body> 

    <div> 
    <img img src = "http://www.juventus.com/pics/layout/open-graph-fallback.jpg" onmouseover="" style="cursor: pointer;"> 
    <img img src = "http://okeskor.com/wp-content/uploads/2016/01/Prediksi-Skor-Real-Betis-vs-Real-Madrid-25-Januari-2016.jpg" onmouseover="" style="cursor: pointer;"> 
    </div> 

    </div> 
</body> 
</html>

出典

2017-05-30 Teor9300

あなたは試してみましたが、何が動作していないものを追加します。現在、これは問題ではありません。 –

クリックした画像にクラスを追加し、そのクラスにCSSを適用することで、選択した画像を強調表示できます。私はあなたが "選択された画像の名前"を意味するかどうかはわかりませんが、ファイル名を意味すると仮定すると、クリックされた画像のsrc属性を取得し、substring()とlastIndexOf()を使用して画像ソースからファイル名を取得できます。

$(function() { 
 
    $('img').click(function() { 
 
    var src = $(this).attr('src'), 
 
     filename = src.substring(src.lastIndexOf('/')+ 1); 
 
    $('img').removeClass('selected'); 
 
    $(this).addClass('selected'); 
 
    $('.selected-image span').text(filename); 
 
    }); 
 
});

img { 
 
    cursor:pointer; 
 
} 
 
    img.selected { 
 
    border:5px solid red; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 
    <img img src = "http://www.juventus.com/pics/layout/open-graph-fallback.jpg" /> 
 
    <img img src = "http://okeskor.com/wp-content/uploads/2016/01/Prediksi-Skor-Real-Betis-vs-Real-Madrid-25-Januari-2016.jpg" /> 
 
</div> 
 
<div class="selected-image">Selected: <span></span></div>

出典

2017-05-30 22:04:32 APAD1

htmlのイメージ名を選択して取得する

答えて

関連する問題