img 上の任意の座標範囲の色を変えたい

質問

img タグで読み込んだ画像上に、map/area 属性を付加した以下のような
HTMLがあります。coords で指定された座標範囲に対して透明度30% 程度の
オーバーレイを掛けたいと考えています。

CSSとJavascriptでこのような効果を与えることは可能でしょうか。

<map name="map">
<area shape="rect" coords="0,0,100,100" href="url1">
</map>
<img SRC="gif" BORDER=0 usemap="#map" height=100 width=200>

本当は、画像そのものに色をつけてしまうべきなのですが、
表示するたびにオーバーレイする座標が変わってしまうため、
画像を再作成する負荷を減らすためにCSS とJavascriptで対応したいです。

よろしくお願いします

回答No.3

ai10

あ…オーバーレイでしたね…。
まぁ、要は、あらかじめオーバーレイした画像を作って
gazou40.gifとして保存すればＯＫなわけで…。

お礼

画像上に、別画像をオーバレイできるとは、知りませんでした。

透過アイコンなどを重ねて、元の画像上にいろいろ情報を
付加することができそうです。現在いろいろ試行しています。

ありがとうございます。

回答No.2

ai10

ごめん、
**** css ****
div.main {... }
を
.main { ... }
のように、divをなくしたってください。

回答No.1

ai10

まず、mapタグのname属性は廃止予定なのでidも一緒に書いておくこと。

透明度は一定ならば、
だいたいのブラウザで表示できるようなものは作れるでしょう。

しかし、透明度が一定でない(表示するたびに変わるなど)場合は
IEはフィルタを利用して可能、
Gekko1.8(?)以上なら可能、
その他のブラウザでは無理だと思う。

---------------------------------------------------------
透明度が決まっている場合の案として、
まず、画像を3つ作成しておく。
透明度を40%と決めておく。
[1] 透明の1x1サイズのgif (toumei.gif)
[2] 元画像 (gazou.gif)
[3] 透明度40%の画像 (gazou40.gif)
申し訳ないが、動作確認は一切していないです。
**** css ****
div.main {
　　position : relative;
　　width : 100px; height : 200px;
}
.absolute {
　　position : absolute;
　　left : 0px; top : 0px;
}
.hidden {
　　width : 0px; height : 0px;
　　overflow : hidden;
}
**** html ****
<div class='main'>
　<img src='gazou.gif' width='100' height='200' class='main absolute>
　<div class='absolute hidden'>
　　<img src='gazou40.gif' width='100' height='200' class='absolute'>
　</div>
　<img src='toumei.gif' width='100' height='200' class='absolute' border='0' usemap='#map'>
　<map id='map' name="map">
　　<area shape="rect" coords="0,0,0,0" href="url1">
　</map>
</div>
**** javascript ****
// 以下の関数は、firefoxなど用
function getChildNode( parentNode, idx )
{
　　var obj = parentNode.childNodes[idx];
　　while( obj.nodeType==3 ) obj.nextSibling;
　　return obj;
}
function getNextNode( node )
{
　　var obj = node.nextSibling;
　　while( obj.nodeType==3 ) obj.nextSibling;
　　return obj;
}
function getPrevNode ( node )
{
　　var obj = node.previousSibling;
　　while( obj.nodeType==3 ) obj.previousSibling;
　　return obj;
}
// エリア(x,y,width,height)の部分を透明にする。
function setTransparentArea ( x, y, width, height )
{
　　var map, area, div, img;
　　map = document.getElementById( 'map' );
　　area = getChildNode( map, 0 );
　　area.setAttribute( 'coords', ''+x+','+y+','+width+','+height );
　　div = getPrevNode( getPrevNode( map ) );
　　div.style.left = x + 'px';
　　div.style.top = y + 'px';
　　div.style.width = width + 'px';
　　div.style.height = height + 'px';
　　img = getChildNode( div, 0 );
　　img.style.left = (-x) + 'px';
　　img.style.top = (-y) + 'px';
　　map = area = div = img = x = y = width = height = null;
}
// たとえば onload 時なら
window.onload = function ()
{
　　setTransparentArea( 0, 0, 100, 100 );
}
とか。
できれば、window.onload じゃなく
//@cc_on
window./*@if (@_jscript) attachEvent( 'on'+ @else@*/ addEventListener( /*@end@*/ 'load', function ()
{
　　setTransparentArea( 0, 0, 100, 100 );
}, false );
としよう。window.onload の部分が長くなっただけだ。

お礼

回答をいただいてから時間がたってしまい、すみません。
書いてもらった回答を元にいろいろ試行錯誤しました。

area タグのcoords 属性から「画像上のどこのエリアの色を変えるべきか」
判断できるため、これをプログラムで計算して、divタグのCSSインライン
に書き込みしました。

最終的には、Javascriptではなくサーバサイドのプログラミングに
なってしまいました。この方法はHTMLファイルを動的作成するだけなので、
画像を再作成するよりはコストが少ないかなぁ、と思いました。

ありがとうございます。