0

ここに画像の説明を入力

上記の画像があります。私の仕事は、L、A、B が現れる値を動的に変更することです。L、A、B を削除/非表示にして、数値を使用して置き換える必要があります。L、A、B が配置されている領域のスライスを花火で作成し、HTML ファイルとしてエクスポートしました。私のアイデアは、3 つのスライス/リージョンすべてに ID を定義し、jquery を使用して ID を取得し、リージョンを非表示にしてから、既存のリージョンに必要な値を表示することでした。L、A、B の値を非表示にすることはできますが、これらの定義された領域 (各領域はテーブル) に値を表示することはできません。私は Web 開発者ではないので、回り道をしているのかどうかはわかりません。もっと簡単な方法があれば、教えていただけると幸いです。

4

2 に答える 2

0

すべての領域がテーブル セルの場合、コンテンツを変更したいポイントに空のセルを作成し、このセル (セル) の ID を宣言し、純粋な JS または jquery を使用します (より簡単です)。 )、その内容を変更します。お気に入り：

<td id="was_L">

...

$("#was_L").val('15')

....

テーブルの見栄えを良くするために、スタイルを使用してこのセルのサイズを設定する必要があるかもしれません。お気に入り：

<td id="was_L" style="width:100px; height:100px">
于 2012-05-17T00:23:47.530 に答える
0

JavaScript で画像を簡単に変更することはできません。ただし、画像を複数の画像に分割し、1 つを除くすべてをベース画像の上に透過的に配置することで問題を解決できます。その後、上部の画像を変更/非表示/表示して、目的を達成できます。

個々のスライスを置き換えるよりも、透明なオーバーレイ PNG 画像を使用する方がよいでしょう。また、ベース イメージは 1 つのイメージにのみ存在する必要があり、他のイメージにはそれらが表すもののみを含めることができるため、はるかに柔軟です。

オーバーレイされた画像またはオーバーレイされたテキスト オブジェクトを配置するには、相対コンテナー内で絶対配置を使用します。

たとえば、これは、オーバーレイされた 1 つのテキストに 2 つの画像がオーバーレイされた背景を作成します。

<div id="container>
    <img id="overlay1" src="xxx.png">
    <img id="overlay2" src="yyy.png">
    <div id="text1">Some Text</div>
</div>

そして、次のような CSS があります。

#container {
    position: relative;
    height: 400px;
    width: 300px;
    background-image: url(bbb.jpg);
}

#overlay1 {
    position: absolute;
    top: 20px;
    left: 50px;
    z-index: 1;
}

#overlay2 {
    position: absolute;
    top: 150px;
    left: 150px;
    z-index: 1;
}

#text1 {
    position: absolute;
    top: 300px;
    left: 150px;
    z-index: 2;
}

いつでも、個々のコンポーネントを非表示または表示したり、テキストを変更したりできます。たとえば、テキスト要素を非表示にするには、次を使用します。

$("#text1").hide();

テキストを変更するには、次を使用する必要があります。

$("#text1").html("Different Text");
于 2012-05-17T00:23:55.883 に答える