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で対応したいです。
よろしくお願いします
A 回答 (3件)
- 最新から表示
- 回答順に表示
No.1
- 回答日時:
まず、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ファイルを動的作成するだけなので、
画像を再作成するよりはコストが少ないかなぁ、と思いました。
ありがとうございます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
交互に入れ替わる画像を複数配置
-
jQueryで同じクラス名のものを...
-
デフォルト非表示にしたい。【t...
-
時間差で画像を動作させたいjav...
-
javascript について追加の質問
-
オンマウスで画像表示+表示し...
-
一定時間で入れ替わるバナー画...
-
MAX関数を使ってからLEFT JOIN...
-
removeEventListenerについて
-
[急ぎ] videoタグで埋め込んだm...
-
MFCで画像を表示させているので...
-
大分類・中分類・小分類
-
c++std::string型をTCHARに変換...
-
表示・非表示のスクリプトで、...
-
「jQuery」アコーディオンメニ...
-
フッター上部に謎の隙間
-
innerHTMLとは
-
画像の重なりの順序を代える方...
-
JimdoでWebアイコンフォントの...
-
eclipseでcssを使うためには?
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
jQueryで同じクラス名のものを...
-
Colorboxがうまく設置できません
-
Javascript初心者|jQueryの.va...
-
jqueryで、後から追加した画像...
-
デフォルト非表示にしたい。【t...
-
bxsliderで最初に縦に複数表示...
-
交互に入れ替わる画像を複数配置
-
クリッカブルマップをロールオ...
-
背景色と連動するスライドショ...
-
JS:画像を繰り返しランダム読...
-
画像のサイズ
-
スクリプト
-
アップロードファイルの種類に...
-
クリックでクリッカブルマップ...
-
マウスオーバーにて画像に虫眼...
-
java スライド クリック メニ...
-
VBAでIEを動かす場合、下記の①...
-
JavaScriptでの画像切り替えを...
-
【jQuery】setInterval
-
IEの「explorercanvas」で作っ...
おすすめ情報