• ベストアンサー

クリックでへこむ

is_mayの回答

  • ベストアンサー
  • is_may
  • ベストアンサー率65% (58/89)
回答No.1

JavaScriptを使用します。同じ処理でも書き方が幾つかあるのでお好きなものをご利用ください。 1.全ての処理を書き込む方法 へこませる<a>タグに以下を追加します。 onmousedown="this.style.top=1;this.style.left=1;" onmouseup="this.style.top=this.style.left=0" onmouseout="this.style.top=this.style.left=0" style="position:relative;" <a href="http://okwave.jp/" onmousedown="this.style.top=1;this.style.left=1;" onmouseup="this.style.top=this.style.left=0" onmouseout="this.style.top=this.style.left=0" style="position:relative;">サンプル</a> 2.一括で設定する方法 <head></head>内に次をコピペします。 <script language="javascript" type="text/javascript"><!-- function xMoveto(id){ id.style.position="relative"; id.style.top=1; id.style.left=1; } function xBackto(id){ id.style.top=id.style.left=0; } --> </script> 次にへこませる<a>タグに以下を追加します。 onmousedown="xMoveto(this)" onmouseup="xBackto(this)" onmouseout="xBackto(this)" <a href="http://okwave.jp/" onmousedown="xMoveto(this)" onmouseup="xBackto(this)" onmouseout="xBackto(this)">サンプル</a> 2.がオススメです。 双方の記述中にある「*.style.top=1;」と「*.style.left=1;」の値を変更すれば、移動したときのX,Y座標を自由に指定できます。マイナスを指定すると上、左に移動するようになります。

noname#191253
質問者

お礼

ご回答ありがとうございます。 詳細な解説も参考になりました。

関連するQ&A

  • SHIFTキー押しながらクリックするとエラーが発生する。

    JavaScriptで、Webページを作成しているのですが、JavaScriptの部分で、 SHIFTキーを押しながらマウス左をクリックすると、新しいウィンドウが 表示されランタイムエラーとなります。 <a href="javascript:SelectChange(2);">選択されてるボタンを変える</a> 上のようにJSP上に書くと、普通にマウス左ボタンでクリックすると正常に動くのですが、SHIFTキーを押しながらマウス左ボタンをクリックすると、新しいウィンドウが開き、リンク先が「javascript:SelectChange(2);」となり、ランタイムエラーがダイアログ表示されます。 SHIFTキーを押しながらマウス左ボタンをクリックしても新しいウィンドウを開かないようにする方法は無いでしょうか? ブラウザはIE6、JSPエンジンはTomcat3.1を使用しています。 よろしくお願いします。

  • クリック→画像変化 別の物をクリック→戻る

    ただいまHP作成中で、やってみたいことがあります、 こういう事が出来るのかよくわかりませんが質問させて頂きたいと思います。 まず、リンクの貼ってある画像をクリックするとクリックされた画像が変わります。 さらに違う場所もしくは違うボタン・メニューをクリックすると またもとの画像にもどる、といった事は可能でしょうか? 出来ればソースかなにかを教えてくださると嬉しいです。 それとついででもかまいません、 リンクを貼ってある画像にオンマウスにすると 背景(真ん中に表示されるよう設定されています)が変わり、 マウスをはずすと背景画像が元にもどると言ったことも可能でしたら 教えて頂きたいです。

  • オンマウスでクリック後の画像を変化させたままにする方法

    たびたびお世話になります。 以前にも同じような質問をしたのですが・・ 状況が変わり、それとHP作成を進めて行くうちに色々解って来た事もあるので、もう一度質問させて下さい。 フレームで、上/左/右に区切っています。 上と左のフレームにメニューがあり、右のフレームにメインコンテンツがあります。 上のメニューも左のメニューもtarget属性のリンクで右フレームに 表示させるようにしたいと思っています。 まだページを作っているところなのでリンクは飛ばしてないですが。 メニューは文字ではなく、上も左も画像を作ってボタンにしました。 JAVAではなく、HTMLで、オンマウスにより画像を変化させるようにもしてあります。 それを、リンクを張り、クリックした後もオンマウスで変化したままの画像にしたいのです。リンク先を表示している間だけ、です。 タグはこうなっています。 <img alt="" src="image/MENU1.jpg" onmouseover="this.src='image/MENU1_1.jpg'" onmouseout="this.src='image/MENU1.jpg'" style="width: 119px; height: 33px;"> やり方はありますでしょうか? それと、上のフレームからメニューをクリックした後、 左のフレームの中身も変化させる、というのはJAVAですか? また、やり方はあるのでしょうか。 こんな風にやりたいのですが↓ http://www.dreampower-jp.com/index.html

  • Webブラウザとは、何から何まででしょうか

    <a href="http:/okwave.jp/">OKWaveトップページへのリンク</a> というのは根本的には単なる一行の文字列です。 例えば,Windows標準のメモ帳は,この一行を単なる文字列として表示するだけで,そこにマウスカーソルを乗せてもクリック可能なハイパーリンクとしては解釈してくれません。 しかし,Webブラウザは,この一行をHTMLタグとして解釈してくれますから,そこにマウスカーソルを乗せるとクリック可能なハイパーリンクとして表示してくれます。 この場合、 a href="http://okwave.jp/">OKWaveトップページへのリンク</a> ただし。 上記の一行が,マウスクリックできるハイパーリンクとして表示されるかどうかはソフトウェアによって左右されます。 この場合、 Webブラウザとは、ネットに通じている、通じさせているソフトウエアの網のようなものだと理解しました。なぜかと言うと、ここに書いている今は、飛ばないのですが、之を、質問として、投稿すると、飛ぶのです。飛ぶようになるのです。と言うことは、質問するとして、投稿すると、リンクがされていて、飛ぶからです。ここに、書いている間は飛ばないのです。 ここが、わかりずらいところなのです。 今書いている時は、飛ばない、質問として出すと、飛ぶようになる。

  • オンマウスで画像変更、クリックでリンク先に飛ばしたいのです。

    オンマウスで画像変更、クリックでリンク先に飛ばしたいのです。 右側にメニューボタン(1~4)があり 各ボタンにオンマウスすると左側に画像を表示、 クリックすると別ページにリンクさせたいのです。 フレームは使っていません。 初心者なので具体的なタグを教えていただくと助かります。

  • クリックで表示、非表示するメガメニュー

    クリックで表示して再度クリックすると非表示になるメガメニューを作ろうと思ってます。 下記のページを参考にjQueryでマウスオーバーによるメガメニューは作成しました。 http://www.skuare.net/test/jmegadropdown.html ただ、jQueryどころかjavascriptも昔少しやった程度しか知識がありませんので、ソースはほぼ上記のページと同じです。 これをクリックでメニュー表示して、再クリックで非表示にするにはどうしたらよいでしょうか? 具体的にはマイクロソフトのページの上にあるようなメニューです。 http://www.microsoft.com/ja-jp/default.aspx 自分の今の知識でjavascriptを使って書いたコードは下記のとおりです。 このように書いていけば出来るとは思うのですが、もっと効率よく出来る方法はあるでしょうか? よろしくお願いします。 function test1() { $("#topnav li .products1 .sub").toggle(); $("#topnav li .sale1 .sub").css("display", "none"); } function test2() { $("#topnav li .products1 .sub").css("display", "none"); $("#topnav li .sale1 .sub").toggle(); } <ul id="topnav"> <li> <a href="#" class="products" onclick="test1()">Products</a> <div class="products1"> <div style="opacity: 0; display: none; width: 600px;" class="sub"> <ul> <li><h2><a href="#">menu1</a></h2></li> <li><a href="#">Link1</a></li> <li><a href="#">Link2</a></li> </ul> <ul> <li><h2><a href="#">menu2</a></h2></li> <li><a href="#">Link1</a></li> <li><a href="#">Link2</a></li> </ul> </div> </div> </li> <li> <a href="#" class="sale" onclick="test2()">Sale</a> <div class="sale1"> <div style="opacity: 0; display: none; width: 450px;" class="sub"> <ul> <li><h2><a href="#">menu</a></h2></li> <li><a href="#">Link - 1</a></li> <li><a href="#">Link - 2</a></li> <li><a href="#">Link - 3</a></li> <li><a href="#">Link - 4</a></li> </ul> </div> </div> </li>

  • ハイパーリンクで目的のページを直接表示させたい

    こんにちは。 初めて質問させていただきます。 ハイパーリンクで私が思っている動作ができなくて悩んでいます。 何を行いたいのかといいますと、既存のサイトがyama.**.jpとkawa.**.jpの2つ存在していまして yama.**.jpに作成したrink.htmlを直接アドレスバーに記述してkawa.**.jpのいずれかのページに 飛ばしたいと思っています。 rink.htmlの内容は一行で次の通りです。 <a href="http://kawa.**.jp/test">テスト</a> ブラウザのアドレスバーにhttp://yama.**.jp/rink.htmlを実行すると ページが立ち上がり左上にテストと表示されるのでこれをクリックするとkawa.**.jpの testページが表示されます。 これでリンク先のページに飛ぶという目的は達成されているのですがテストの文字を 押さなければならずONE工程余分な作業が入っているためすっきりしません。 そこで次にrink.htmlの内容を <a href="http://kawa.**.jp/test"></a> と変更してテストの文字を抜きました。 そうして実行すると、白紙のページが表示されるだけで先に進めません。 アドレスバーでhttp://yama.**.jp/rink.htmlを実行してkawa.**.jpのいずれかのページに 直接飛ばすことはできるのでしょうか。 よろしくお願いいたします。

  • クリックアンドタイプ

    Word2003のクリックアンドタイプの機能についてお尋ねします。 同じ行内で、クリックアンドタイプができる場所とできない場所があります。 左端から1文字目辺りでマウスカーソルが、左インデントの状態になり、 もう少し右に移動すると、左揃えの状態に変わります。 ただ、その間3文字程は、マウスカーソルに何も表示されなく、当機能が 使えなくなります。 これは、何が原因なのでしょうか? もし、どなたかご存知であれば教えてください。

  • オンマウス時に出てくる説明文の文字を変えたい

    画像やリンクの上にマウスカーソルを持って行ってオンマウス状態になった時 説明文を表示させることが可能ですよね。 <A HREF=></A>の構文のなかで リンクの場合 title= 画像の場合 title= 又は alt= を使って簡単に表示出来るのは良いのですが、この際に、 表示される説明文の文字は、フォント変更出来ないのでしょうか? フォント変更が無理なら ただ単に、文字サイズのみ、細字/太字のみ でも変えられると嬉しいのですが。 よろしくお願いいたします。

    • ベストアンサー
    • HTML
  • ボタンをクリックして、リンクを開きたい

    ボタンをクリックして、リンクを開きたいのですが <input type="button" value="yahooを表示する" onClick="location=http://www.yahoo.co.jp/"> をしても何も起りません。 出来れば、新しいブラウザで開きたくて、 <A href="http://www.yahoo.co.jp/" target="HOGE">yahooを表示する</a> と同じように、ボタンをクリックして開きたいので、ご教授お願いします。

    • ベストアンサー
    • HTML