• ベストアンサー

ＨＴＭＬのonMouseにて画像の透明部分でカーソルが反応しないようにしたい

ＨＴＭＬでＳ字のようなイビツな形をした画像ボタンを作ろうとしています。ためしにＧＩＦ画像として作り、 onMouseout　onMouseover　の２つを用いて2種類の別々の画像をとっかえひっかえに表示するページを作りました。 しかし、Ｓ字画像ボタンの透明に設定した部分でもカーソルが反応してしまうので、何とかＳ字画像の色のついた部分のみでカーソルが反応するようにしたいです。 どのようにすれば理想通りの結果が得られるようになるのか、どうかお教え下さい。よろしくお願いいたします。

質問者が選んだベストアンサー

  • ベストアンサー
  • karabow
  • ベストアンサー率100% (1/1)
回答No.1

初心者なんですが、 http://allabout.co.jp/internet/hpcreate/closeup/CU20071030A/index2.htm こういうことでしょうか？ このページでは頂点を4つに設定していますが、それより多く頂点を設定しても大丈夫みたいです。 coords属性というのを使えばできるようですけど、曲線が含まれてる画像だと指定する座標を多くしないと綺麗に出来なさそうですが・・・。

himetika
質問者

お礼

解りやすいサイトで大変助かりました。有難うございます！！

  1. カテゴリ
  2. [技術者向] コンピューター
  3. その他([技術者向] コンピューター)

関連するQ&A

  • 「onMouse～～」について教えてください

    WEBサイト制作中です。使用ソフトはDreamweaverMX2004です。 ちなみにjavascriptは一長一短ありますが、使いたい前提で宜しくお願いいたします。 「onMouse～～」のことです。 現在、javascriptでスワップイメージを指定してます。「ボタン」があり「画像」があり 「ボタン」にアクションをおこすと「画像」の入れ替えが行える、こういったものです。 HTMLを抜き取れば onMouseOver="MM_swapImage" onMouseOut="MM_swapImgRestore()" です。 さて、この「onMouse～～」が希望と違うので書き換えたいのですが、 「onMouse～～」の基本的な知識、種類が分かりません。教えてください。 <現状> 上記の状態ではボタンにマウスポイントが触れているときに画像の変化（スワップイメージ）が起こります。 マウスポイントをボタンから離すと、画像の変化は解除されます。 これが現状のもの。 <こうしたい> これをこのようにしたいのです。 「ボタンを“クリックしたら”スワップイメージが発動。 マウスポイントをそのボタンから離しても、スワップイメージが解除されず、持続できる。」 きっと「onMouse～～」の書きかたがミソのはずだと思うのです。 onMouse～～って基本的にどのような種類、種類ごとの意味合いがあるのでしょうか？ お時間のある方はこの辺まで網羅して教えていただきますと本当に嬉しいです。 お時間のない方は上記の必要な部分のみどう変えれば良いかだけで有難いですので、お教えください。 「onMouse～～」について検索しましたが関係ないページがたくさん出てうまく検索できなかったんです。 皆様、どうぞ「onMouse～～」の記述の件、お教えください。 宜しくお願いいたします。

    • ベストアンサー
    • HTML
  • javascriptを使って画像のランダム表示とロールオーバーをセット

    javascriptを使って画像のランダム表示とロールオーバーをセットで行いたいのですが上手くいきません… javascript超初心者です…。画像をランダムに表示し、さらにそのランダムに表示された画像をそれぞれ違った画像にロールオーバーさせたいのですが上手くいきません。 一応以下のように書いて試しているのですが、ランダム表示はするのですが、ロールオーバーはエラーがでてしまい画像が切り替わりません。どのようにすれば上手く出来るか、知恵を貸してください。宜しくお願いします。 <html> <body> <SCRIPT language="JavaScript"> <!-- // ランダムに画像を表示する img = new Array(); onMouseover = new Array(); onMouseout = new Array(); // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "top1.gif"; img[1] = "top2.gif"; img[2] = "top3.gif"; img[3] = "top4.gif"; img[4] = "top6.gif"; // マウスオーバー onMouseover[0] = "top1roll.gif"; onMouseover[1] = "top2roll.gif"; onMouseover[2] = "top3roll.gif"; onMouseover[3] = "top4roll.gif"; onMouseover[4] = "top6roll.gif"; // マウスアウト onMouseout[0] = "top1.gif"; onMouseout[1] = "top2.gif"; onMouseout[2] = "top3.gif"; onMouseout[3] = "top4.gif"; onMouseout[4] = "top6.gif"; n = Math.floor(Math.random()*5); document.write("<img src='"+img[n]+"' border='0' onMouseover='"+onMouseover[n]+"' onMouseout='"+onMouseout[n]+"'>"); //--> </SCRIPT> </body> </html> 補足 ●ランダム用の画像が1～5まで、ロールオーバー用の画像がa～eまであるとして、ランダム表示によって1が表示されたらロールオーバーで表示される画像はaのみ、マウスアウトしたら１に戻る、というようにしたいです。同じように2-b,3-c…というように対応させたいです。 ●ページ読み込み時のみランダム用画像をランダム表示させ、後は上記のような流れにしたいです。 長くなりましたが、どなたか回答お願いいたします。

  • インラインフレームに画像を使うと枠がでる＞＜

    HPについての質問です＞＜ HTMLタグを使用して作成してるんですが・・・ インラインフレームでつくりたいんです。 http://www.htmq.com/html/iframe.shtml ↑これのかんじで おしたらURLがフレームにでるかんじでつくりたいんですが・・・ ここのはボタンが字なんですが・・・私は画像でつくりたいんです＞＜ 画像だけでなくさらにロールオーバー（http://masaboo.cside.com/new_source/sr_15.html） でつくろうと思って頑張ってやったんですが・・・。 <a href="※※.html" target="sample"><img src="※※.gif" onmouseover="this.src='※※.gif'" onmouseout="this.src='※※.gif'"></a><br> こんな感じであと下にフレームをつけて <IFRAME src="※※.html" width="600" height="400" scrolling="NO" frameborder="0" style="border:1px dotted #000000;"></IFRAME> こんな感じでつくったら、なぜか画像（ボタン）に枠がついてしまって＞＜ どうやったら消せますか！？ 教えて下さい、お願いします＞＜ （※画像はこうなってしまったってかんじなんですが・・・※）

  • ダイアログのテキストにマウスカーソルが乗ったときの処理

    MFC(VC++6.0)のダイアログベースでプログラムを製作していますが、 そのテキストにマウスカーソルが乗ったときに処理をさせたいです。 そして、マウスカーソルがテキストから離れたときにも処理をさせたいです。 どういうメッセージが送られてくるのかが知りたいので、 ご存知の方、ご教授お願いします。 わかりやすく言うと、ダイナミックHTMLの OnMouseOverとOnMouseOutみたいな処理をさせたいのです。

  • Photoshopのカーソル無反応について

    学校の課題でPhotoshop elementsを使用しています。 　久しぶりにフォトショップを立ち上げ、画像処理をしようとしたのですが、ツールボタンを押してもカーソルが無反応なんです。 　具体的には、「文字ツール」をクリックして画像の上へ矢印を移動させると、文字を入力させる[I]のような形にカーソルが変化するのが普通だと思うのですが、矢印のマークも変わらないままで画像をクリックしても何も起きません。 　 　ズームツールをクリックすると虫眼鏡の形のカーソルに変わると思うのですが、矢印のままで何も起きません。他のツールも同様です。 　うまく説明できていないかもしれないのですが、 直す方法を知っている方がいらっしゃいましたら教えてください。 お願いいたします。

  • 外部ファイルの記述の仕方

    HTMLにリンクを指定している画像にマウスが重なったときに画像を変化するようにHTML文法にJavaScriptを指定しているのですが、外部ファイル化したいのですがどのように記述すればよいでしょうか？ <a href="1.html"> <img src="menu01.gif" onMouseOver="this.src=\'menu11.gif\'" onMouseOut="this.src=\'menu01.gif\'" height="30" width="138" > </a> <a href="2.html"> <img src="menu02.gif" onMouseOver="this.src=\'menu12.gif\'" onMouseOut="this.src=\'menu02.gif\'" height="30" width="138" > </a>

  • オンマウスで画像を変えたい。

    オンマウスで画像を変えたいのですが、 ------------------------------------------ <img src="画像１URl" onmouseover="this.src='画像２URl';" onmouseout="this.src='画像１URl';"> ------------------------------------------ や、 ------------------------------------------ <script> var src1="http://img.yahoo.co.jp/images/phonebook/jp_pb.gif" var src2="http://i.yimg.jp/images/news/yjnews.gif" </script> <img src="http://img.yahoo.co.jp/images/phonebook/jp_pb.gif" onMouseOver="this.src=src2" onMouseOut="this.src=src1" /> ------------------------------------------ など。 どれを使っていいか分からず困っています。 これぞ、っていうタグがあったらよろしくお願いします。

    • ベストアンサー
    • HTML
  • HP　画像の一部にリンクでその部分のみ画像変化

    ホームページを勉強し始めたものですが、今ヘッダーの画像の一部に”問い合わせ”ボタンのようなのがある状態ですが、マウスオーバーさせるとそのボタンの絵だけを画像変化させるようにするのにつまずいています。自分でやるとどうしてもヘッダーの画像にすこしでもマウスオンするとボタンがすでに変化用の画像に切り替わってしまいます。＜AREA＞を使ってみてもやはりリンクの部分だけでなく、画像全体に反応してしまいます。周りのホームページ詳しい人に聞いても、分かりませんでした。。。 実際のHTMLは下記の通りです。 <div id="header_pic"> <img border="0" src="../../img/元の画像.png" onMouseOver= "this.src='../../img/画像変化後.png'" onMouseOut="this.src='../../img/元の画像.png'" alt="事務所" width="980" height="130" usemap="#Map" /> <map name="Map"> <area shape="rect" coords="743,40,917,74" href="../contact/index.html" alt="問い合わせ"> </map> 画像の一部にリンクを設置し、その部分に乗った時だけ、その部分のみを画像変化させることはできないのでしょうか？ どなたかご教示お願いいたします。

  • cssヘッダー画像の下に配置したい画像が重なります

    css勉強し始めた初心者なので、説明やソースなどめちゃくちゃだと思いますが、教えてください。 固定ヘッダー（常に画面の上にヘッダーがあるように）を作成し、その下に画像を配置したのですが、ヘッダーの下にその画像が入り込んでしまいました。ヘッダーの下に重ならず配置するにはどうすればよいでしょうか？ よろしく御願いいたします。 body内に <div id="header"> <h1><a href="/" title="website"></a></h1> <img src="img/b01.gif" width="108" height="68" border="0" onmouseover="this.src='../ao/img/b01-.gif" onmouseout="this.src='../ao/img/b01.gif"> <img src="img/b02.gif" width="88" height="68" border="0" onmouseover="this.src='../ao/img/b02-.gif'" onmouseout="this.src='../ao/img/b02.gif'"> <img src="img/b03.gif" width="59" height="61" border="0" onmouseover="this.src='../ao/img/b03-.gif'" onmouseout="this.src='../ao/img/b03.gif'"> <img src="img/b04.gif" width="50" height="68" border="0" onmouseover="this.src='../ao/img/b04-.gif'" onmouseout="this.src='../ao/img/b04.gif'"> <img src="img/b05.gif" width="39" height="68" border="0" onmouseover="this.src='../ao/img/b05-.gif'" onmouseout="this.src='../ao/img/b05.gif'"> <img src="img/b06.gif" width="80" height="68" border="0" onmouseover="this.src='../ao/img/b06-.gif'" onmouseout="this.src='../ao/img/b06.gif'"> <img src="img/b07.gif" width="51" height="68" border="0" onmouseover="this.src='../ao/img/b07-.gif'" onmouseout="this.src='../ao/img/b07.gif'"> <img src="img/b08.gif" width="47" height="68" border="0" onmouseover="this.src='../ao/img/b08-.gif'" onmouseout="this.src='../ao/img/b08.gif'"> <img src="img/b09.gif" width="54" height="68" border="0" onmouseover="this.src='../ao/img/b09-.gif'" onmouseout="this.src='../ao/img/b09.gif'"> <img src="img/b10.gif" width="125" height="68" border="0" onmouseover="this.src='../ao/img/b10-.gif'" onmouseout="this.src='../ao/img/b10.gif'"> </div> <h2><img src="img/panichi.gif" alt="TOP" width="700" height="450" class="centering" /></h2>

    • ベストアンサー
    • HTML
  • イメージをあらかじめ読み込むには？

    マウスカーソルが重なったとき、イメージを切り替える処理を 行おうと思っています。 <img src="top_01.gif" onMouseOver="this.src='top_02.gif'" onMouseOut="this.src='top_01.gif'"> このようなソースでイメージを切り替えているのですが、 マウスカーソルが重なったときに初めて新しいイメージ (この場合は'top_02.gif')を読み込むようです。 これだとタイムラグができてしまうので、最初にhtmlファイルを読み込む際、 あらかじめ新しい画像を読み込むにはどうすればよいのでしょうか？

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する