16

次のようなものを作成する必要があります。

http://www.mrporter.com/journal/journal_issue71/2#2

大きな画像のすべての製品は、マウスホバーに表示されるツールチップに関連付けられています。しかし、フルスクリーン画像で動作するにはこれが必要です。

私が最初に考えたソリューション（上記の例のように）は、それぞれが私の製品の境界を正確に埋めるmaphtmlソリューションです。問題は、画像サイズがウィンドウ画面に依存するため、正確な値を指定できないことです。

最善の解決策は、私の領域のパーセンテージ値を設定する可能性です。これは可能ですか？他の提案はありますか？

4

7 に答える 7

24

リンクを使用した代替ソリューション:

CSS:

.image{
  position: relative;
}
.image a{
  display: block;      
  position: absolute;
}

HTML:

<div class="image">
  <img src="image.jpg" alt="image" />
  <a href="http://www.example.cz/1.html" style="top: 10%; left: 10%; width: 15%; height: 15%;"></a>
  <a href="http://www.example.cz/2.html" style="top: 20%; left: 50%; width: 15%; height: 15%;"></a>
  <a href="http://www.example.cz/3.html" style="top: 50%; left: 80%; width: 15%; height: 15%;"></a>
</div>

グラフィックエディタでパーセンテージディメンションを検出できます

于 2014-10-07T08:14:52.857 に答える
5
于 2012-11-06T10:26:16.033 に答える
3

これは単純な HTML/CSS 操作では実行できないため、JavaScript を使用して画像のサイズ変更に基づいて座標を効果的に再計算するしかありません。この目的のために、この目的を達成する関数をまとめました (ただし、2 つの関数が関係しています)。

function findSizes(el, src) {
    if (!el || !src) {
        return false;
    }
    else {
        var wGCS = window.getComputedStyle,
            pI = parseInt,
            dimensions = {};
        dimensions.actualWidth = pI(wGCS(el, null).width.replace('px', ''), 10);
        var newImg = document.createElement('img');
        newImg.src = src;
        newImg.style.position = 'absolute';
        newImg.style.left = '-10000px';
        document.body.appendChild(newImg);
        dimensions.originalWidth = newImg.width;
        document.body.removeChild(newImg);
        return dimensions;
    }
}

function remap(imgElem) {
    if (!imgElem) {
        return false;
    }
    else {
        var mapName = imgElem
            .getAttribute('usemap')
            .substring(1),
            map = document.getElementsByName(mapName)[0],
            areas = map.getElementsByTagName('area'),
            imgSrc = imgElem.src,
            sizes = findSizes(imgElem, imgSrc),
            currentWidth = sizes.actualWidth,
            originalWidth = sizes.originalWidth,
            multiplier = currentWidth / originalWidth,
            newCoords;

        for (var i = 0, len = areas.length; i < len; i++) {
            newCoords = areas[i]
                .getAttribute('coords')
                .replace(/(\d+)/g,function(a){
                    return Math.round(a * multiplier);
                });
            areas[i].setAttribute('coords',newCoords);
        }
    }
}

var imgElement = document.getElementsByTagName('img')[0];

remap(imgElement);​

JS フィドルのデモ。

ただし、これには を実装するブラウザーが必要であることに注意してくださいwindow.getComputedStyle()(ほとんどの最新のブラウザーですが、バージョン 9 以降の IE のみ)。また、必要な引数が関数に渡されることを確認する以外に、健全性チェックはありません。ただし、実験する場合は、これらを開始する必要があります。

参考文献:

于 2012-07-06T18:21:16.027 に答える
1

イメージ マップのパーセンテージはオプションではありません。画像のサイズ変更時に正確な位置を再計算するスクリプト (JS) を使用することをお勧めします。もちろん、そのスクリプトでは、必要に応じてパーセンテージを操作できます。

于 2012-07-06T13:45:11.243 に答える
0

Raphaël JavaScript Library を CSS とともに使用することを検討してください。http://raphaeljs.com/およびRaphael.js を使用した画像の描画 を参照してください。

于 2012-07-06T14:04:33.103 に答える