2

以下に示すのは、通常の html ファイルで表示されるフロア プランです。スタイルを適用する前に、番号付きの要素ブロック ピクセルを完全に配置する必要がある 1 つの大きな画像です。

番号付きのボックスには、背景色がオレンジ色になり、番号が白くなるホバー ステータスが必要です。

フラッシュに頼らずにこれを達成できるかどうか知りたいです。それは...ですか？

フロアプラン

4

4 に答える 4

4

それは完全に可能です。通常、HTML の要素は「フロー」に配置されますが、配置を使用してそれらを取り出すことができますabsolute。これにより、top、left、 bottom、プロパティのいずれかにパーセンテージ ベースまたはピクセル ベースの値を指定できます。要素は、位置が、またはrightに設定された最も近い祖先要素からオフセットされた位置に配置されます。relativeabsolutefixed

これは、画像からいくつかの部屋を含む縮小された例です。#roomXXXXコピーして貼り付けて新しい部屋をマークアップに追加し、CSS で新しい ID ベースのルールを指定して形状と位置を変更することで拡張できるはずです。

http://jsfiddle.net/barney/kBvsr/

編集: @Marcio が指摘したように、IE6 でホバーできるように例を修正しました。

于 2012-10-02T13:20:32.140 に答える
0

私はそれを行うためのいくつかの方法を考えることができます。しかし、それらはすべてhtml5に依存しています。画像の前に透明なキャンバスを配置します。私の自然な傾向は、画像を色付きの長方形でオーバーレイすることですが、画像内のピクセルに直接アクセスして、ホバーされた領域の正確な「ネガ」を作成するのはそれほど問題ではありません。

ホバーでimgmapエリアタグを強調表示することについて尋ねられた質問に続いて、私は次の解決策を思いつきました。クリックして右側の画像に点を定義し（便利な形状の場合は最小3）、[ポリゴンを追加]をクリックして、左側の画像の同じ領域にカーソルを合わせます。

画像マップ領域を定義するツールを作成する方法ではなく、画像の一部を強調表示する方法の例として考えてください。.:)

ああ、忘れる前に-開発者モードでページを見て、作成された領域タグをコピーできます-簡単にコピーして貼り付けるために、実際にはそれらをテキスト領域にコピーする必要がありました。

コードはChromeでテストされています。

<!DOCTYPE html>
<html>
<head>
<script>
var canvas, hdc, markerImg;
var curPoints;

function byId(e){return document.getElementById(e);}

function canvasClick2(e)
{
    e = e || event;

    var x, y;

    x = e.offsetX;
    y = e.offsetY;

    curPoints.push(x);
    curPoints.push(y);

    hdc.drawImage(markerImg, x- markerImg.width/2, y-markerImg.height/2);

    n = curPoints.length;
    var str = ''
    for (i=0; i<n; i++)
    {
        if (i != 0)
            str += ', ';
        str += curPoints[i];
    }
    byId('coords').innerHTML = str;
}

function myInit()
{
    curPoints = new Array();
    canvas = byId('canvas1');
    hdc = canvas.getContext('2d');
    markerImg = new Image();

    // just a 5x5 pixel +
    markerImg.src = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHklEQVQIW2NkQID/QCYjiAsmoABFEMRBAThVYmgHAAhoBQWHhfyYAAAAAElFTkSuQmCC";

    canvas.addEventListener('click', canvasClick2, false);

    var img = byId('img1');
    canvas.setAttribute('width', img.width);
    canvas.setAttribute('height', img.height);
//  canvas.style.backgroundImage = 'url(img/gladiators.png)';
    canvas.style.backgroundImage = 'url(http://i.stack.imgur.com/Rw5pL.png)';


    var x,y, w,h;

    // get it's position and width+height
    x = img.offsetLeft;
    y = img.offsetTop;
    w = img.clientWidth;
    h = img.clientHeight;

    // move the canvas, so it's contained by the same parent as the image
    var imgParent = img.parentNode;
    var can = byId('canvas2');
    imgParent.appendChild(can);

    // place the canvas in front of the image
    can.style.zIndex = 1;

    // position it over the image
    can.style.left = x+'px';
    can.style.top = y+'px';

    // make same size as the image
    can.setAttribute('width', w+'px');
    can.setAttribute('height', h+'px');

    var ctx = can.getContext('2d');
    ctx.lineWidth = 3;
    ctx.strokeStyle = 'red';
}

function myClear()
{
    hdc.clearRect(0,0, canvas.width, canvas.height);
    curPoints.length = 0;
    byId('coords').innerHTML = '';
}

function myAddShapePoly()
{
    var src, tgt = byId('imgMap1'), coordStr;

    src = byId('coords');
    coordStr = src.innerHTML;

    var newArea = document.createElement('area');
    newArea.setAttribute('shape', 'polygon');
    newArea.setAttribute('coords', coordStr);
    newArea.setAttribute('title', 'polygon');

    newArea.setAttribute('onclick', 'alert("area clicked");');

    newArea.onmouseout = myLeave;
    newArea.onmouseover = function(){myHover2(this);};

    tgt.appendChild(newArea);
    myClear();
}


function myHover2(element)
{
    var hoveredElement = element;
    var coordStr = element.getAttribute('coords');
    var areaType = element.getAttribute('shape');

    switch (areaType)
    {
        case 'polygon':
        case 'poly':
            fillPoly(coordStr);
            break;

        case 'rect':
            fillRect(coordStr);
    }
//  byId('img1').style.cursor = 'pointer';
}


function myLeave()
{
    var canvas = byId('canvas2');
    var hdc = canvas.getContext('2d');
    hdc.clearRect(0, 0, canvas.width, canvas.height);
//  byId('img1').style.cursor = '';
}


function fillRect(coOrdStr)
{
    var canvas = byId('canvas2');
    var hdc = canvas.getContext('2d');

    var mCoords = coOrdStr.split(',');
    var top, left, bot, right;
    left = mCoords[0];
    top = mCoords[1];
    right = mCoords[2];
    bot = mCoords[3];
    var canvas = byId('myCanvas');
    var tmp = hdc.fillStyle;

    hdc.fillStyle = "rgba(255,0,0,0.3);";
    hdc.fillRect(left,top,right-left,bot-top);
    hdc.strokeRect(left,top,right-left,bot-top);
    hdc.fillStyle = tmp;
}
// takes a string that contains coords eg - "227,307,261,309, 339,354, 328,371, 240,331"
// draws a line from each co-ord pair to the next - assumes starting point needs to be repeated as ending point.
function fillPoly(coOrdStr)
{
    var mCoords = coOrdStr.split(',');
    var i, n;
    n = mCoords.length;
    var canvas = byId('canvas2');
    var hdc = canvas.getContext('2d');

    hdc.beginPath();
    hdc.moveTo(mCoords[0], mCoords[1]);
    for (i=2; i<n; i+=2)
    {
        hdc.lineTo(mCoords[i], mCoords[i+1]);
    }
    hdc.lineTo(mCoords[0], mCoords[1]);

    tmp=hdc.fillStyle;
    hdc.fillStyle = "rgba(255,0,0,0.3);";
    hdc.stroke();
    hdc.fill();
    hdc.fillStyle = tmp;
}

</script>
<style>
body
{
    background-color: gray;
}

#canvas1
{
    cursor: crosshair;
}
#canvas2
{
    pointer-events: none;       /* make the canvas transparent to the mouse - needed since canvas is position infront of image */
    position: absolute;
}
.heading
{
    font-weight: bold;
    font-size: 24px;
}
</style>
</head>
<body onload='myInit();'>
    <div align='center'>
        <img src='http://i.stack.imgur.com/Rw5pL.png' id='img1' usemap='#imgMap1'/>
            <map name='imgMap1' id='imgMap1'>
            </map>
        <canvas id='canvas2'></canvas>

        <canvas id='canvas1' width='200' height='200'></canvas>
        <br>
        <input type='button' onclick='myClear();' value='clear'/>
        <input type='button' onclick='myAddShapePoly();' value='addPolygon'/>
        <br>
        <span id='coords'></span>
    </div>
</body>
</html>
于 2012-10-02T18:18:24.383 に答える
0

ボックスと数字を含むすべてが画像である場合、ホバー属性を使用して色を変更しようとして、CSSで画像自体を変更することはできません。をオーバーレイして上に表示することも、各ボックスの別のバージョンに画像をオーバーレイすることもできます。Photoshop / Image Readyを使用すると、画像をスライスしてホバーオーバー効果を作成できます。すべてを使用可能なWebページとしてエクスポートします。

于 2012-10-02T17:30:20.117 に答える
0

すべてのボックスに数字でクラス名を定義し、次のように CSS 疑似クラスを使用します。

           .classname:hover
             {
            background-color:color;
              font-color:color;
               }
于 2012-10-02T12:22:54.343 に答える