HTML / CSS懸停在圖像上以關閉圖像/測試/超鏈接

Question

我正在為我工​​作的設施建立資源網站，並且需要有關腳本的幫助。

我有多種葯物的圖像，我想將其懸停以顯示更多信息。 以下鏈接是我在網上找到的示例。

圖片鏈接

我希望能夠懸停每種葯物，以便在其旁邊彈出一個窗口，其中包含特寫圖像，葯物名稱以及指向外部站點的超鏈接。 最簡單的方法來實現這一目標。

非常感謝！

Answer 1

如果不查看您希望顯示的實際數據，很難給出“好”答案。 但是，從您提供的內容來看，最可訪問的方法是使用HTML圖像映射。

以下是您需要使用的HTML元素的MDN文檔：

地圖鏈接

區域鏈接

本質上，您定義了“重疊”關聯圖像的矩形，圓形或多邊形（使用坐標）。 每個區域都可以具有一個alt屬性，屏幕閱讀器可以將這些屬性用於視力障礙查看您網站的用戶。 href屬性將為您提供到外部站點的鏈接。

現在有幾種離線工具可以幫助您創建圖像地圖，這是一種在線工具 ...我不一定比其他工具都推薦它，但是它將為您提供它們的工作原理。

有了可訪問版本后，就可以使用JavaScript在此之上提供額外的功能。 您的實際操作方式完全取決於您自己，並且將再次由要顯示的確切內容來定義，並且為此目的有一些預制的腳本，但是，如果您只是想顯示alt / href在基本的工具提示中，那么它不需要幾行定制的HTML / JavaScript。

同樣，在不推薦它們的情況下，以下是兩個常見的解決方案：

解決方案1和解決方案2

即使這不是您真正想要的，它也應該為您確定最終解決方案提供一些幫助。

Answer 2

使用圖像映射和一些javascript鼠標事件操作。 主圖像是具有矩形/圓形“區域”區域的圖像圖。 將信息放入“ div”塊中，這些樣式在將樣式屬性“ display”設置為“ block”或“ none”的情況下可見/不可見。 init（）函數使所有“ div”塊在啟動時都不可見。

HTML：

<img src="XYZ" alt="medications" usemap="#medsMap">
<map name="medsMap">
<area shape="rect" coords="x,y,w,h" onmouseover="showInfo('med1')" onmouseout="hideInfo('med1')" >
<area shape="circle" coords="x,y,r" onmouseover="showInfo('med2')" onmouseout="hideInfo('med2')" >
</map>

<div class="medInfo" id="med1">
// All your html about medication 1
</div>
<div class="medInfo" id="med2">
// All your html about medication 2
</div>

Javascript：

window.onload = init;

function init(){
    var infos = document.getElementsByClassName('medInfo');
    for (var i=0, i<infos.length, i++){
        infos[i].style.display = 'none';
    }
}

function showInfo(divId){
    document.getElementById('med1').style.display = 'block'
}

function hideInfo(divId){
    document.getElementById('med1').style.display = 'none'
}

Answer 3

在這種情況下，最簡單的方法可能並不是最好的方法……但是，一種簡單的解決方案是將絕對位置的div放在相對放置的容器div中，並將圖像設置為背景。 您可以為每個對象分配一個單擊處理程序，以從一個對象中獲取數據並填充目標...數據可能看起來像這樣

var myItems = {
    item1: {
        img: 'http://www.photo-dictionary.com/photofiles/list/6666/8841blue_pill.jpg',
        headline: 'the blue pill',
        body: 'this pill is blue and comes in a purple box'
    },
    item2: {
        img: 'http://www.photo-dictionary.com/photofiles/list/6679/8857red_pill.jpg',
        headline: 'the red pill',
        body: 'this pill is red and comes in a red box'
    }
};

這是小提琴中這個概念的示例http://jsfiddle.net/pixelchemist/3fL8P/