- ベストアンサー
クリッカブルマップと位置を固定したフローティングボックスを使いたい
ryifaの回答
よくわからないですがこんな感じのでしょうか？ <html> <head> <title>????</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <style type="text/css"> #pop {position:absolute; left:0px; top:0px; width:120px; height:30px;visibility:hidden; background-color: white; border: black solid; border-width: 1px 2px 2px 1px; font-size: 12 px} </style> <script language="JavaScript"> function popUp(){ ps=pop.style; ps.left=event.x; ps.top =event.y; ps.visibility=(ps.visibility=='hidden')?'hidden':'visible'; } </script> </head> <body onContextmenu> <div id="pop">◇◇◇</div> <h1>xxxx</h1> <p><img src="xxx.jpg" width="197" height="197" onMouseover="popUp();return false"> </p> </body> </html> ◇◇◇のところには自分の好きな文字を入れてください。文字数によって上のほうの <style type="text/css"> #pop {position:absolute; left:0px; top:0px; width:120px; height:30px;visibility:hidden; background-color: white; border: black solid; border-width: 1px 2px 2px 1px; font-size: 12 px} </style> この部分の数字を変えてみてください。ちなみにこれは画像をカーソルが通過すると関数が実行されるようになっているはずです。間違っていたことかいて何もならなかったときはごめんなさい。
関連するQ&A
- クリッカブルマップ作成について
クリッカブルマップ作成ソフトの中で ひとつの画像に多数のリンクを加える際に ひとつひとつリンクを作成するのではなく 座標とURLのリストを与えると一度に複数のリンクを作成してくれるものがあったら教えていただけないでしょうか？ またそういったことをするためのプログラムの雛形ソース等があれば 教えていただけないでしょうか。
- ベストアンサー
- HTML
- アイフレームとクリッカブルマップ
こんばんわ、イメージマップ(クリッカブルマップ)とアイフレームを 一緒に使いたいのですが、どうしてもできません＞＜ マップのソースが <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
- HP制作。クリッカブルマップについて。
HP制作。クリッカブルマップについて。 1つのページにクリッカブルマップを使った画像(オンマウスで画像を入れ替える)を二つ使いたいのですが(たとえばmapAとmapB)上手くいかず、mapAの位置にmapBの入れ替え画像が表示されてしまいます。自分では原因をつきとめることが出来ませんでした。 map nameは分けてあります。リンク先・画像・座標は省略しました。 <img src="画像" alt="マップ" id="map" usemap="#B" border="0"> <map name="A"> <area shape="poly" coords="(略)" nohref onmouseover="changeMapImage('画像')" onmouseout="changeMapImage('画像')" > 『省略』 </map> <img src="画像" alt="マップ画像" id="map" usemap="#B"border="0"> <map name="B"> <area shape="rect" coords="(略)" href="●.html"onmouseover="changeMapImage('画像')" onmouseout="changeMapImage('画像')" alt="画像1"> <area shape="rect" coords="(略)" href="●.html"onmouseover="changeMapImage('画像')" onmouseout="changeMapImage('画像')" alt="画像2"> 『省略』 </map>
- ベストアンサー
- 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
- クリッカブルマップについて
クリッカブルマップについて教えていただきたい点がございます。 例えば、以下のような記述をした場合。 ■例 <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
- 「クリッカブルマップを施した画像（前面写真：1024×768）を背景に」って出来ますか？
こんにちは。 【C-Map0.79】や普通のHTMLタグでクリッカブルマップを作成し、その画像を背景（前面写真：1024×768）に持ってくることって出来ますか？ 普通のHTMLタグにある、【<img src="画像のURL" usemap="#上でつけたのと同じ名前" alt="説明">】のところに、画像（前面写真：1024×768）を持ってくるとスクロールしなければならない上、背景に設定したようにならず隙間が出来ます。 「クリッカブルマップを施した画像（前面写真：1024×768）を背景に」というのは不可能でしょうか？
- ベストアンサー
- HTML
- クリッカブルマップの一部分だけを消す方法を教えて下さい！
javascript初心者です。 やりたいことは、下記の通りなのですが、どなたか対処方法を教えて頂けないでしょうか？ 透過PNGの画像を重ね合わせ、レイヤーのように表示した状態で、各画像の透明部分以外のオンクリックで画像を入れ替え、さらに上の階層の画像を消して下の階層の画像のオンクリックでも画像を入れ替えたいのですが、上手くいきません。。 たとえば、余白部分が透明な丸と四角のPNGを、丸が上になるように重ね、丸をクリックすると丸の色だけが、四角をクリックすると四角の色だけが変わり、さらに丸を非表示にして下の四角をクリックしすると、四角の色が変わるようにしたいのです。 四角PNG + 丸PNG + 透明PNGを重ね合わせ、透明PNGに丸と四角のクリッカブルマップを重ねて持たせることで、両方見えた状態でそれぞれの色を変えることはできたのですが、丸を非表示にする時に丸のクリッカブルマップだけを消すことができず、丸があったところだけクリックが効かなくなってしまいます。 根本的なやり方がまずいのでしょうか？ よろしくお願いします。 ソース抜粋 <script type = "text/javascript"> <!-- function remove(){ document.layer2.style.display='none'; document.getElementById('map2').style.display='none'; } //--> </script> <map name="Map" id="Map"> <area name="map2" id="map2" shape="circle" coords="丸の座標" onClick="document.layer2.src='丸の画像2'" /> <area name="map1" id="map1" shape="rect" coords="四角の座標" onClick="document.layer1.src='四角の画像2'" /> </map> <div style="position:absolute;top:30px; left:0px"> <img src="四角の画像1" alt ="" name="layer1" id="layer1" /> </div> <div style="position:absolute;top:30px; left:0px"> <img src="丸の画像1" alt ="" name="layer2" id="layer2" /> </div> <div style="position:absolute;top:30px; left:0px"> <img src="透明な画像" alt ="" usemap="#Map" /> </div> <input type="button" value="丸消す" onClick="remove()" />
- ベストアンサー
- JavaScript
- クリッカブルマップとロールオーバーを同時に使う外部CSSの書き方
似た質問はあったのですが、解決できなかったので質問させていただきました。 ホームページでクリッカブルマップにしている画像(A.gifとします)があるのですが、 リンクにマウスを乗せたとき、それぞれのリンク別々の画像を表示させたいのです。(ホームページはテキストエディットで作っています) A.gifの中にリンク１、リンク２、リンク３があるとします。 ●リンク１にマウスが乗ったとき→A.gifがB.gifに変わる ●リンク２にマウスが乗ったとき→A.gifがC.gifに変わる ●リンク２にマウスが乗ったとき→A.gifがD.gifに変わる というふうにしたいのですが・・・。 自分で本やネットで探してみたところ、javasprictを使ったやり方はなんとかわかりました。 けれどjavasprictは見る人の環境によって表示されなかったりするし、ソースをシンプルにしたいので、外部CSSでのやり方を探しています。。。 ただのロールオーバーだけなら外部CSSで作ることはできましたが、クリッカブルマップと併用しようとするとわからなくなってしまいました。 独学で作ってきたので説明文など、至らない点があるかもしれないのですが、できるだけ詳しく教えていただければありがたいです。 もし不明な点があれば補足致します。 よろしくお願いします。
- ベストアンサー
- HTML
- 初心者です。クリッカブルマップonclickの後
javascript初心者です。 クリッカブルマップにおいて指定area内をクリックすると 画像が差し替えになる状態です。 差し替え後の画像はarea範囲よりも大きい（マップ全体と同一サイズ）なのですが このarea座標外でクリックして、元画像に戻るようにしたいです。 現在は、area座標内をクリックしないと元画像に戻りません。 ■jabascript function circle01_over(){ var objElement = document.getElementById( '元画像マップ' ); objElement.src = 'ロールオーバー後の画像（元画像と同じサイズで一部だけ変えたもの）'; } function image_out(){ var objElement = document.getElementById( '元画像マップ' ); objElement.src = '元画像マップ'; } function circle01_click(){ var objElement = document.getElementById( '元画像マップ' ); objElement.src = 'クリック後の画像'; } ■html <img src="元画像" class="hover" alt="" width="XXX" height="XXX" usemap="#Map" id="元画像マップ" name="元画像マップ" /> <map name="Map" id="Map"> <area shape="circle" coords="***,***,***" href="javascript:void（0）;" onmouseover="circle01_over()" onmouseout="image_out()"" onclick="circle01_click(); return false;" alt="サンプル" /> 初歩的な事で申し訳ありません・・・ 尚、jQueryも新規リンク（html）も使用不可です。 添付画像のように動作させたいです。 宜しくお願い致します。
- ベストアンサー
- JavaScript
- クリッカブルマップ上のポップアップ画像
初心者です。よろしくお願いします。 クリッカブルマップ上にあるリンク先にポインタを合わせると、ポップアップ画像が表示される仕組みを作りたいと思います。 いろいろなサイトで調べるうちに、テキストにポインタを合わせた時にポップアップ画像が表示されるコードを見つけたので、そのコードを自分なりに作り変えて試してみたのですが、うまく表示されません。 現在のhtmlコード、およびcssのコードは下記のとおりです。 <ul> <img src="img/top_map.jpg" alt="テスト画像" width="880" height="720" border="0" usemap="#Map" /> <map name="Map"><span class="test"><area shape="rect" coords="363,70,379,86" href="リンク先URL" target="_blank" /> </span> </map> </ul> ul area { position: relative; } ul area span { display: block; visibility: hidden; width: 150px; height: 150px; position: absolute; top: -100px; left: 50px; } ul area:hover { background: #FFFFFF; } ul area:hover span { visibility: visible; text-indent: -10000px; } span.yahoo { background: url(ポップアップ画像URL); } 他のサイトで、areaにはhoverという記述ができないという書き込みもありましたが、何とか実現できないものかと思っています。 どなたか、教えていただけないでしょうか？
- 締切済み
- HTML
補足
親切な回答ありがとうございます。ＪＡＶＡスクリプトって凄いですね。色々なことができてしまうのですね。はやく私も組める？ようになりたいと思います。 質問の仕方も素人で、用を得なく何をやりたいのか伝わらなくてごめんなさい。ryifaさんの書いていただいたソースをじっくり勉強させていただきます。 できれば・・・・。また、失礼なお願いですが、私のやりたかったことをもう一度書いてみます。アドバイスがいただけたら幸いです。下記のＨＰに「メニューやバナーの位置を固定しよう」というサンプルが載っていますが、このようにスクロールしても常に同じ位置にメッセージを表示するボックス？（領域？）を設置しクリッカブルマップのonMouseoverを組み合わせてポイントされた場所の説明を表示したいと考えています。またクリックすると関連ページへリンクする。これってできるのでしょうか？さらに、失礼ついでに・・・メッセージ（２０個ほど用意しています）が増えていくときの記述方法も教えていただけたら最高です。 http://iswebmag.hp.infoseek.co.jp/sample013.html まことに失礼な質問で申し訳ありませんが、よろしくお願いします。