ALT文本顯示在上面的圖像onclick

Question

對於普通桌面用戶，圖像的alt/title顯示：懸停，這樣很好，但對於移動用戶，他們看不到它，所以我想讓他們能夠看到ALT文本位於圖像上方的絕對位置。

這裏就是我的了：

<img class="prize" title="Best" src="/images/best.png" alt="Best" /> 

Answer 1

您可能需要使用figcaptions被設置爲僅通過媒體查詢或引導到行動視口。

它會用CSS獲得硬件只會導致IMG元素沒有內容添加到，你可以嘗試用一個div它得到一個標題來包裝IMG和使用類似div::before { content: attr(title) }：

div::before {content: attr(title) }

<div title="img title"><img src="http://www.w3schools.com/images/compatible_chrome.gif" alt="alt text" /></div>

Answer 2

這裏工作液：working solution at jsfiddle

$(document).ready(function() { 
 
    $('#imgId').click(function() { 
 
    console.log('image clicked, place your code here'); 
 
    $('#altDivId').addClass('imgAlt'); 
 
    $('#altDivId').html($('#imgId').attr('alt')); 
 
    //setting left 
 
    $('#altDivId').css('left', $('#imgId').position().left + \t ($('#imgId').width() - $('#altDivId').width())); 
 
    //setting top 
 
    $('#altDivId').css('top', $('#imgId').position().top); 
 

 
    
 

 
    }); 
 
});

div.imgAlt { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    width: 50%; 
 
    height: 50px; 
 
    background: red; 
 
    text-align: center; 
 
    font-size: 40px; 
 
    color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<img id='imgId' src="http://placehold.it/350x150" alt='alternate txt'> 
 
<div id='altDivId'>