2

HTML/CSS/JavaScript/jQuery を使用して .png ファイルのセクションを強調表示しようとしています。画像を表示することはできますが、特定のセクションを強調表示する方法がわかりません (画像全体を強調表示したくありません)。

現時点では、画像を表示するために必要な html コードは非常に単純です。

<img src="myImage.png" />

あまりにも贅沢なことは何もありません。

強調表示される部分がユーザーに表示されたままになっていることが不可欠です。理想的には、強調表示を、特定のメソッド/関数を呼び出すことでオン/オフできる一連のコントロールにしたいと考えています。これは可能ですか？ハイライトしたい領域の正確な座標 (x、y、長さ、幅など) を指定する必要がありますか? 私はこれで大丈夫です。私はウェブデザインの初心者であり、正直なところ、これを行う方法がわかりません.

4

1 に答える 1

2

You could do this vis something along these lines: jsFiddle example

HTML

<div id="container">
    <img src="http://www.placekitten.com/200/200" />
    <div id="highlight"></div>
</div>

CSS

#container {
    position:relative;
}
#highlight {
    position:absolute;
    width:75px;
    height:75px;
    top:75px;
    left:75px;
    background: rgba(255, 0, 0, 0.4);
}

This example positions a div above an image within a container, and sets the background to be partially transparent using rgba. You can set the position, colors, opacity, etc. via JavaScript.

于 2013-04-28T03:13:15.327 に答える