- ベストアンサー
クリックでへこむ
<a href=http://okwave.jp/>テスト</a>でリンクになりますが、表示される「テスト」を左クリックすると文字「テスト」がへこむようにはできないでしょうか？ オンマウス状態でへこむことはできるのですが。 ここでの左クリックは、マウスの左クリックボタンを押している間のことです。 できれば、一部のリンクだけをへこませたいです。よろしくお願いします。
- HTML
- 回答数3
- ありがとう数4
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
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座標を自由に指定できます。マイナスを指定すると上、左に移動するようになります。
その他の回答 (2)
- goldfox
- ベストアンサー率49% (123/249)
> オンマウス状態でへこむことはできるのですが。 a:hover にへこむ指定をしていると思いますが、これを a:active に指定してやればいいです。 a:link {} /* 未訪問リンク指定 */ a:visited {} /* 訪問済リンク指定 */ a:hover {} /* オンマウス時指定 */ a:active {} /* クリック時指定 */
お礼
ご回答ありがとうございます。 ＞a:link {} /* 未訪問リンク指定 */ ＞a:visited {} /* 訪問済リンク指定 */ ＞a:hover {} /* オンマウス時指定 */ ＞a:active {} /* クリック時指定 */ 恥ずかしながら、これがよく分かってませんでした。まとめて教えて頂きありがとうございます。
- grumpy_the_dwarf
- ベストアンサー率48% (1628/3337)
CSSで適当なクラス(たとえばboko)を作って、 .boko:link { border-style: hidden; border-width: 1px; } .boko:active { border-style: inset; border-width: 1px; } みたいな感じで適当にへこんで見えるような工夫をすればいいん じゃないですかね。
お礼
ご回答ありがとうございます。 工夫してみます。
お礼
ご回答ありがとうございます。 詳細な解説も参考になりました。