- ベストアンサー
オンマウスで画像変更、クリックでリンク先に飛ばしたいのです。
オンマウスで画像変更、クリックでリンク先に飛ばしたいのです。 右側にメニューボタン（１～４）があり 各ボタンにオンマウスすると左側に画像を表示、 クリックすると別ページにリンクさせたいのです。 フレームは使っていません。 初心者なので具体的なタグを教えていただくと助かります。
- bigmacstar
- お礼率63% (92/144)
- ホームページ作成ソフト
- 回答数4
- ありがとう数18
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
続き ul.imageList li a { display:block; width:100%; height:100%; font-weight:bold; background-color: rgb(80,160,255); } ul.imageList li a img{ display:none; border:none; } ul.imageList li a span{ line-height: 110px; } ul.imageList li a:visited{ background-color: rgb(40,80,255); } ul.imageList li a:hover, ul.imageList li a:focus{ background-color: rgb(0,0,255); color:yellow; } ul.imageList li a:active{ background-color: rgb(255,160,80); color:red; } ul.imageList li a:hover img{ display:inline; position:absolute; top: 10px; left:10px; width:640px !important; height:480px!important; } --> </style> <link rel="START" href="../index.html"> </head> <body> <h1>メニュー</h1> <ul id="nav" class="imageList"> <li><a href="./img/1.jpg"><span>１ページへ</span><img src="./img/1.jpg" width="120" height="90" alt="写真１"></a></li> <li><a href="./img/2.jpg"><span>２ページへ</span><img src="./img/2.jpg" width="120" height="90" alt="写真２"></a></li> <li><a href="./img/3.jpg"><span>３ページへ</span><img src="./img/3.jpg" width="120" height="90" alt="写真3"></a></li> <li><a href="./img/4.jpg"><span>４ページへ</span><img src="./img/4.jpg" width="120" height="90" alt="写真4"></a></li> </ul> </body> </html>
その他の回答 (3)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
ソースです。 HTML4.01 strictで作成してあります。 下記ソースでは、このサイトの仕様上タブが無視されるので、タブは全角スペース２個に置き換えてあります。テストするときは全角スペース２個をタブにすべて置換してください。 ★ソース部分をテキストエディタにコピーペーストして、sample.htmlとでもして保存する。 ★画像は同じ場所にimgというフォルダーを作成し、その中に 640×480ピクセルで1.jpg～4.jpgの４種類の画像をで作成して保存すること ★リンク先はここでは同じ画像にしてあります。 HTML本体のリンクのリスト自体は下記の様な単純な物でSEO的にも全く問題ないでしょう。 <body> <h1>メニュー</h1> <ul id="nav" class="imageList"> <li><a href="./img/1.jpg"><span>１ページへ</span> <img src="./img/1.jpg" width="120" height="90" alt="写真１"></a> </li> <li><a href="./img/2.jpg"><span>２ページへ</span> <img src="./img/2.jpg" width="120" height="90" alt="写真２"></a> </li> <li><a href="./img/3.jpg"><span>３ページへ</span> <img src="./img/3.jpg" width="120" height="90" alt="写真3"></a> </li> <li><a href="./img/4.jpg"><span>４ページへ</span> <img src="./img/4.jpg" width="120" height="90" alt="写真4"></a> </li> </ul> </body> 念のため Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済みです。 以下HTML全文 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <title>サンプル</title> <meta http-equiv="Content-Style-Type" content="text/css"> <link rev="MADE" href="mailto:hoge@hoge.com"> <style type="text/css"> <!-- html,body{margin:0px;padding:0px;} body{background-color:black;color:white;} body{ text-align:center;/* IE対策 */} ul.imageList{ display:block; position:relative; list-style:none;/* IE対策 */ width:790px; margin-top:10px; margin-left:auto; margin-right:auto; height:500px; color:black; background:white url("./img/1.jpg") no-repeat 10px 10px; padding:10px 0px 0px 0px; } ul.imageList li{ list-style:none; display:block; width: 120px; margin-left:660px; margin-bottom:10px; height:112px; } 続く
- ORUKA1951
- ベストアンサー率45% (5062/11036)
画像を表示するナビゲーションリストですから、そのようにマークアップしてスタイルシートで画像を置き換えるのが良いでしょう。javascriptは最近では使わなくなりました。 今は仕事中なのでソースはのちほど・・
- nine999
- ベストアンサー率44% (512/1140)
グラフィックの切り換えは、タグだけでは不可能です。リンクは普通に<a>タグです。 JavaScriptを使うとできますよ。 グラフィックの切り換え方法 http://www.shurey.com/Soft/JS/samples/sample3.html
お礼
アドバイスありがとうございました。 ＵＲＬを参考にさせていただきます。
関連するQ&A
- オンマウスでクリック後の画像を変化させたままにする方法
たびたびお世話になります。 以前にも同じような質問をしたのですが・・ 状況が変わり、それと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
- 締切済み
- HTML
- オンマウスで画像が切り替わった先の画像にリンク
オンマウスで画像が切り替わった先の画像に別ページのリンクを新窓で立ち上げたいのですが、方法が分かりません。 参考までに該当ページのURLを落としていきます。 http://rs-produce.net/html/deco-goods/order/or_004.html
- 締切済み
- JavaScript
- フレームページへのリンク
トップページ(フレームなし)から、フレームページへのリンクがうまく表示されません。 トップページのリンクボタンをクリックすると、左側フレームのメニューは表示されますが、右側の内容のページが「Not Found」で表示されません。 が、表示されたフレーム左側のメニューをクリックすると表示されます。 トップページから、左右両方表示させるのにはどうすればよいのでしょうか？ よろしくお願いいたします。
- ベストアンサー
- HTML
- 教えて下さい！リンクボタンの画像をオンマウスで変える方法
今HPを縦フレームで左ページにメニュー、右ページにtarget指定でページが切り替わるようにしています。 左ページのメニューはgif画像のボタンなのですが、画像に触れると画像が変化し、画像からマウスを放すと元の画像に戻るようにしたいのです。 １．マウスで画像１に触れると画像２に変化（マウスを放すと画像２は１にもどる） ２．クリックした時に一瞬画像２がへこみ、離すと画像２に戻る。 ３．当然同時に右ページも変わる。 ４．右のページがくりっくしたメニュー画像のリンク先の間は画像２のまま変化しない。 ５．そのほかのメニュー画像をクリックすると画像２は画像１にもどる。 というのはどうすればいいのでしょうか？ リンクボタンをへこませる方法はどこかで見たのですが、 それを今のhtmlのどこに書けばいいのかもわかりません。 ちなみに、外部のcssがあります。テンプレートを加工しているので。 宜しくお願いします！
- ベストアンサー
- HTML
- リンク内のリンク
続けて質問スイマセン。お世話になっています。 2分割フレームを使っています。 左側にメニュー（リンク）、右側のフレームに、リンクをクリックした際に画像を表示させたいですが、上手くいきません。 説明は下手でスイマセン。宜しくお願いします。
- 締切済み
- その他（インターネット・Webサービス）
- アイフレーム内でのリンク
フレームの外にアイコン画像を張り、そのアイコンをクリックすると、フレーム内のページが変わるようにしたいのですが、タグの打ち方がわかりません。 元となるタグはわかったのですが、画像アドレスやフレーム内のアドレスを入力しても、上手くいかずに別のウィンドウでリンクしてしまったりするんです。 初心者なので、どうしたらいいかわからなくて・・・。 どなたか、分かりやすく教えていただけると嬉しいです。 宜しくお願いします。
- ベストアンサー
- HTML
- フレームから場所を指定したリンクを・・・
今私が製作しているホームページはフレームを縦に二分割しています。 左側のフレームにメニューとしてリンク用のボタンをおいて、右側のフレームにメインのページをおいてます。 今回あまりにも長いページが１ページできてしまったのでリンク用のボタン二つを用意し、長いページの中に二箇所<a name="～"></a>と付けました。 左側のリンク用のボタンにも<a href="～.html#～></a>としているのに、 実際クリックするとその長いページの頭から普通に表示されてしまいます。 フレームをつかってメインの方に場所を指定してリンクはできないのでしょうか？ 読みにくい文章で申し訳ありませんがどなたか助けてください。
- ベストアンサー
- HTML
- クリックで画像切替、表示された画像から各ページへリンクする方法
クリックで画像切替、表示された画像から各ページへリンクする方法 下記のような、左側の画像をクリックすると、右側の画像がクリックした画像に切り替わり、 切り替わった右側の画像からそれぞれ関連ページへリンクをつけたいと思っています。 ■何もしていない状態↓ 画像1 画像2 画像3 画像Ａ（画像1） 画像4 画像5 ■左側の画像2をクリックした場合↓ 中央の画像Ａの部分に画像2を表示 表示された画像Ａ（画像2）をクリックすると関連ページへリンク 画像1 画像2 画像3 画像Ａ（画像2） 画像4 画像5 画像の切り替えは色々調べると出てきたのですが、それぞれ切り替えた画像からのリンクの やり方がどうしてもわかりませんでした。 初心者なので、部分的ではなく一式書き方をお教えいただけましたら幸いです。 よろしくお願いいたします。
- 締切済み
- Java
- リンク画像をオンマウスで変えたい
今、ホームページを作成しています。 それで、以下のようなことをしたいのですが、可能でしょうか？ １ 最初の画面に、ＥＮＴＥＲの画像を表示する ２ 『１』の画像をオンマウスすると、画像が変わる ３ 『２』の画像からマウスを放すと、画像が『１』に戻る ４ 『２』の画像をクリックすると、別のページに飛ぶ なんだか説明下手ですいません・・・ 一応自分で調べてみたのですが、それらしい物が見つからず、失敗してばかりなので、質問させていただきました。よろしくお願いします！
- ベストアンサー
- その他（インターネット・Webサービス）
- アイフレームについて
よく素材屋さんに行くと、窓の左側とか下にメニューがあったり窓の中に文字とかリンクが貼ってありますよね？ あれをしたいんですが、まず左側にメニュー、右側に窓の画像を表示する時はフレームを２分割しますよね？ それで、右側にアイフレームをつけたいんですが、それは右側のページにアイフレームのタグを一緒に貼るんですか？それとも別にページを作って右側のページにリンクさせるんですか？ 私がしたいのは完全に透過されてるアイフレームをつけるって事なんですが、自分でタグをつけてやると、どうしても真っ白になってしまうんです。スクロールさせたら下の窓の画像が出てくるんですが透過されてなくて…。 何か分かる方がいたら教えてください。
- 締切済み
- CSS
お礼
アドバイスありがとうございました。 わざわざソースまで書いていただいて非常に助かりました。 早速手直しを行ってみます。