- ベストアンサー
クリッカブルマップの画像処理
クリッカブルマップを使い、画像内の指定した一部分だけを暗くする処理を行いたいです。 ロールオーバーで画像を切り替えるのではなく、デフォルトの状態で 暗い部分と明るい部分を作りたいと思っています。 areaにクラス属性を与えて、その部分だけ画像の不透明度を変えたり 別の画像をかぶせるというような処理を行うことはできないでしょうか。
- みんなの回答 （2）
- 専門家の回答
関連するQ&A
- クリッカブルマップについて
クリッカブルマップについて教えていただきたい点がございます。 例えば、以下のような記述をした場合。 ■例 <a href="***.html"> <img src="***.jpg" alt="***" width="***" height="***" border="0" usemap="#Map" /> </a> <map name="Map" id="Map"> <area shape="rect" coords="***" href="***.html" alt="***" /> </map> エリア指定した部分以外のところは<a>タグでのリンクになり、エリアで指定している部分はそのURLになるかと思うのですが、Firefoxですとうまく遷移するのですが、IEだとクリックしてもエリア指定した部分しかページ遷移をしてくれません。 ※ブラウザ左下のマウスオーバー時にでるURLは飛び先を認識しているのですが、クリックしても反応が無いのです。。。 IEはshape="default"にも対応していないようですし、一部分のみをエリアで指定し、それ以外のところは全体的に別のリンクを指定したい場合、どういった記述をすればよいのでしょうか？ shape="poly"で囲んでも問題は無いのですが、あまり見た目が良くないので。。。 また、これよりも良い方法があるなど、ご存知の方がいらっしゃいましたら、ご教授いただけますと幸いでございます。 ----------------------------------- 私が制作時に確認をしているブラウザのバージョンは次の通りです。 Firefox：3.6.12 IE：8.0 ----------------------------------- 何卒よろしくお願いいたします。
- ベストアンサー
- HTML
- クリッカブルマップをCSSでロールオーバーする方法
webプログラマです。 いろいろやってみましたが、どうしても方法が分かりません。 ネットでもずいぶん調べましたが、見つけられませんでした。 クリッカブルマップで指定したareaの部分だけを CSSを使って別の画像をロールオーバーしたいのです。 JavaScriptを使う方法や、 CSSでも他の方法は分かっていますが、 ページがかなり複雑な構成で、 divタグだらけになっていますので、 出来ればa:hoverのようなシンプルな方法を探しています。 ちなみに、この画像を背景にすることは、 制作意図的にできませんので、 画像挿入の上、マップというのが前提になります。 どなたか方法をご存知の方、ご享受ください。 よろしくお願いします。
- 締切済み
- HTML
- クリッカブルマップで画像と画像の間に隙間が出来てしまう
現在、ホームページを作ってみようと思い作成しているのですが、クリッカブルマップを使い、画像の特定の場所からリンクをさせようと思っているのですが、 クリッカブルマップを使っている画像Aと同じくクリッカブルマップを使っている画像Bを上下に隙間なく並べようとすると数pxほど隙間が開いてしまいます。 単なる画像データを上下に並べた時にはぴったりとくっついていたので、マージンやパディングの設定がおかしい訳ではないだろうと思っているのですが、これはクリッカブルマップを追加した事によって何か追加でスタイルシートを設定してあげなければいけないのでしょうか？ それとも、クリッカブルマップを使った時はどうしても隙間を埋める事ができないのでしょうか？ 1つの画像でやればいいのですが、HPのデザイン上・管理上の都合(画像データの差し替え頻度)どうしても分けて使いたいと思っています。 ご回答お願いします。 該当部分のHTMLソースです。 <img src="top.jpg" alt="ようこそ" usemap="#map1" width="600" height="200" /> <map name="map1"> <area shape="rect" coords="0,0,200,200" href="auto.html" /> </map> <img src="top.jpg" alt="ようこそ" usemap="#map2" width="600" height="200" /> <map name="map2"> <area shape="rect" coords="400,0,600,200" href="auto.html" /> </map>
- ベストアンサー
- HTML
- クリッカブルマップで切り替えた先の画像に部分リンク
javaスクリプトを使ってクリッカブルマップで画像差し替えをしています。（下記コード） イメージでいうとボタン(1)(2)(3)とエリアAで成る一枚の画像の、ボタン(1)(2)(3)の箇所にマウスオンをすると画像が切り替わり、エリアAにそれぞれ違う説明が表示される(ように見える)・・・というものをJavaスクリプトを使って作りました。 この、切り替わった後のエリアAに表示された説明内に、更にクリッカブルマップを設定しリンクを貼りたいのですが、方法がわかりません。 詳しい方、教えてください。 <script type="text/javascript"> function button1_over(){ var objElement = document.getElementById( 'map' ); objElement.src = '画像1'; } function button2_over(){ var objElement = document.getElementById( 'map' ); objElement.src = '画像2'; } function button3_over(){ var objElement = document.getElementById( 'map' ); objElement.src = '画像3'; } <figure> <img src="元画像" alt="○" usemap="#image_map" id="map" /> <map id="image_map" name="image_map"> <area shape="poly" coords="省略1" onmouseover="button1_over()" href="#" alt="～～～" /> <area shape="poly" coords="省略2" onmouseover="button2_over()" href="#" alt="～～～" /> <area shape="poly" coords="省略3" onmouseover="button3_over()" href="#" alt="～～～" /> </map> </figure>
- ベストアンサー
- JavaScript
- 画像毎に違うクリッカブルマップを設定したい
地図画像を表示して複数のクリッカブルマップを配置し、ユーザが選択したら、詳細地図を表示してさらにそこでもクリッカブルマップを配置して、、、 という階層的に地図を辿られるようなコンテンツをつくろうと思っています。 JavaScriptで制御できると思って以下のようなコードを書いたのですが、 初期画像において、クリッカブルマップ(alt=area1)を押せば正常に動作しますが、 もう一方のクリッカブルマップ(alt=area2)を押すと、 IE6の場合にエラーが発生してブラウザが終了してしまいます。 尚、FireFoxでは正常に動作します。 どこに原因があるかも分らず手詰まり状態です。 同じ現象にあわれた方で解決策をご存知の方がいらっしゃれば、ご教授下さいm(_ _)m <html> <head> <meta http-equiv="Content-Script-Type" content="text/javascript"/> <script type="text/javascript"> <!-- function ChangeImg(mapname,usemapname) { document.map0.src = mapname; document.map0.useMap = usemapname; } //--> </script> </head> <body> <img src="map0.jpg" width="300" height="300" name="map0" useMap="#usemap0"> <map name="usemap0"> <area href="JavaScript:ChangeImg('map1.jpg','#usemap1')" shape="rect" alt="area1" coords="10,100,140,200"> <area href="JavaScript:ChangeImg('map2.jpg','#usemap2')" shape="rect" alt="area2" coords="150,100,290,200"> </map> <map name="usemap1"> <area href="http://google.co.jp" shape="rect" alt="shop1" coords="50,50,250,250"> </map> <map name="usemap2"> <area href="http://yahoo.co.jp" shape="rect" alt="shop2" coords="50,50,250,250"> </map> </body> </html>
- ベストアンサー
- JavaScript
- クリッカブルマップをロールオーバーをしたい！
画像の一部にクリッカブルマップを配して、その部分のみカーソルを当てると画像が変わるようにしたいのですが、以下の方法を見つけました。 http://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1422869464 ですが、 <div> <img src="sample_01.jpg" alt="" width="650" height="149" border="0" usemap="#Map3" id="map"> <map name="Map3"> <area shape="rect" coords="26,105,167,131" href="#start" onmouseover="changeMapImage('sample_01_02.jpg')" onmouseout="changeMapImage('sample_01.jpg')"> </map> </div> <div> <img src="sample_02.jpg" alt="" width="650" height="149" border="0" usemap="#Map4" id="map"> <map name="Map4"> <area shape="rect" coords="26,105,167,131" href="#start" onmouseover="changeMapImage('sample_02_02.jpg')" onmouseout="changeMapImage('sample_02.jpg')"> </map> </div> このように、クリッカブルを配した画像が続いた場合、なぜか2番目の画像にカーソルを当てると、1番上の画像がロールオーバーされるという。。。 ジャバスクリプト初心者の私にはなぜだか全く分かりません。 他の方法（フラッシュなど）もあるようなのですが、この方法で解決方法を教えて頂けますでしょうか？ どうぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
- クリッカブルマップにロールオーバーを付ける
クリッカブルマップにロールオーバー（Javascript）を付けようと思うのですが、 どうも目指していることが上手くいきません。 まずは、下記サイトをご覧ください。 http://www.webdlab.com/template/clickable2/ これはソースコードが乗っているサイトです。 この通りに書けば、通常のロールオーバーはできるのですが、 私の目的はあと＋α必要になります。 [内容] 1. オンマウス時にロールオーバー 2. クリック後も、ロールオーバー状態 3. 他のイメージにオンマウスしても、さっきクリックしたイメージがロールオーバー状態 ４．他のイメージをクリックして、はじめてロールオーバー画像が切り替わる。 以上です。 ちなみに現状（上記サイト）は.onmouseover、.onmouseout、.onclickの３つすべてロールオーバー後のイメージを指定すれば[内容]の１と２まではクリアなのですが、３以降がNGです。 そもそもクリッカブルのロールオーバーでは不可能なのでしょうか。 どなたがご教授よろしくお願いいたします。
- ベストアンサー
- JavaScript
- アイフレームとクリッカブルマップ
こんばんわ、イメージマップ(クリッカブルマップ)とアイフレームを 一緒に使いたいのですが、どうしてもできません＞＜ マップのソースが <IMG src="背景画像" usemap="#g" border="0"> <MAP name="g"> <AREA shape="poly" coords="470,471,466,479,457,482,448,479,445,471,448,463,457,460,466,463" href="★" target="aifurenaka" alt="MEMO"><!-- MEMO --> <AREA shape="poly" coords="547,464,543,472,534,475,525,472,522,464,525,456,534,453,543,456" href="★" target="aifurenaka" alt="ABOUT"><!-- ABOUT --> <AREA shape="poly" coords="622,470,618,478,609,481,600,478,597,470,600,462,609,459,618,462" href="★" target="aifurenaka" alt="BOARD"><!-- BOARD --> <AREA shape="poly" coords="692,467,688,475,679,478,670,475,667,467,670,459,679,456,688,459" href="★" target="aifurenaka" alt="MIX"><!-- MIX --> <AREA shape="default" nohref><!-- デフォルトエリア --> </MAP>
- 締切済み
- HTML
- クリッカブルマップ＋カーソル変更
私のサイトでは、カーソルを画像に変更して使っていて、リンクに触れるとカーソル画像が変わる、っていう設定にしているんですが、クリッカブルマップで指定したリンクではカーソルが変わりません。 どうすればクリッカブルマップのリンクもカーソルをかえられますか？ ちなみに、カーソルの指定はスタイルシートの外部指定でやっていますが、クリッカブルマップではないリンクでは、ちゃんとカーソルが変わります。
- 締切済み
- HTML
- クリッカブルマップを使いながらロールーバーってできるんでしょうか？
色々調べたのですが方法がわからず困っています。 実現したいことは、 人の顔の画像（gif画像）の鼻や口や目にカーソルを合わせたときにその部分だけ変化させたい、ということです。 クリッカブルマップで多角形を指定している場合その部分だけの変化というのはできないのでしょうか？ flashならできるという情報は見たのですがjavascriptを使って考えています。 宜しくお願いします。
- 締切済み
- JavaScript
お礼
imgを直接指定すれば上記の方法で透明度を変えることができましたが areaを指定して画像の一部分の透明度を変えることはできませんでした。