- ベストアンサー
ロールオーバー効果についての質問
- 以前からホームページ作成における画像のロールオーバー効果について質問をしています。
- 具体的には、リンク先のページに飛ぶことで拡大された画像が表示される方法について知りたいです。
- 以前の回答ではリンク先を貼り付けることで問題ないと回答がありましたが、著作権などについての理解が不十分で不安です。
- ragasa
- お礼率91% (32/35)
- ホームページ作成ソフト
- 回答数4
- ありがとう数4
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
前にも説明しましたが、「このように表示したいからHTMLをどう書けば良いか?」という発想ではダメなのです。ビルダーは典型的にその方法ですが、それでは応用も利きませんし、そもそもHTMLとCSSの理念に、完全に反しています。ビルダーを使うにしろ、そこをしっかり理解しておかないと・・ HTMLもCSSもきちんと理解して使わないと、応用が利きません。 示されたサイトは、javascriptを使用して実現していますが、ソース的には参考になりません。悪い書き方の見本になるくらい、とてもとても酷いものです。 →Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) →スタイルシートの概説 ( http://www.asahi-net.or.jp/%7Esd5a-ucd/rec-html401j/present/styles.html#h-14.1 ) 【とても簡単な方法】 最初に、HTMLで文書構造を記述する。 ここで、この様にプレゼンテーションしたいから、そのためには文書構造がどうなっていたほうが良い--程度は考えます。---慣れれば難しくありません。 1) 文書構造が「小さな画像と簡単な説明と大きな画像のリスト」ですから <div id="membersList"> ＿<ul> ＿ <li>サムネイル画像と簡単な説明 ＿ <p>大きな写真</p> ＿ </li> ＿ <li>サムネイル画像と簡単な説明 ＿ <p>大きな写真</p> ＿ </li> ＿ <li>サムネイル画像と簡単な説明 ＿ <p>大きな写真</p> ＿ </li> ・・・ とHTMLを記述します。この時点でLynxのようなテキストブラウザで表示を確認すると良い 「Lynx などのテキスト ブラウザを使用して、サイトを確認します（ほとんどの検索エンジンのスパイダーには Lynx で見えるようにサイトが映ります）。 ( http://support.google.com/webmasters/bin/answer.py?hl=ja&answer=35769#2 )」 ついで、プレゼンテーションを指定するスタイルシートで 2) サムネイルと説明を縦に並べる。 大きな画像は、<li></li>の位置を基準に右上に表示する。 3) 大きな写真は表示させず、<li>にポインターが乗ると表示させる。 でスタイルシートを記述します。 #membersList ul,#membersList li{display:block;list-style-type:none;margin:0;padding:0;} #membersList li{width:200px;position:relative;} #membersList li p{position:absolute;left:200px;top:-100px;width:150px;text-align:left;display:none;} #membersList li:hover p{display:block;z-index:10;} と言う簡単なもので良いです。 １行目) リストをブロックにするときの定番 ２行目) リスト項目の幅とこの位置を基準とする ３行目) relativeであるliに対して絶対配置する。 left:,top,widthについても同様 display:noneで消滅させる ４行目) liにポインターが乗ると表示する。 ★拡大画像段落の左位置は、liの右端に合わせておくと、拡大画像にポインターを移動しても大丈夫 width:200px＝left:200px; ★ulの位置に合わせるときは、ul{position:relative;}とすると表示位置が固定される。 こんな簡単なもので済むのですよ。 細かい微調整を加えたものが下記です。 ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_input ) で検証済み HTML4.01strict+CSS2.1のウェブ標準です。【確認してください】 ★タブは＿に置換してあるので戻してください。 <!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 name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- #membersList ul,#membersList li{display:block;list-style-type:none;margin:0;padding:0;} #membersList li{width:200px;position:relative;} #membersList li p{position:absolute;left:200px;top:-100px;width:150px;text-align:left;display:none;} #membersList li:hover p{display:block;z-index:10;} /* 微調整 */ #membersList li+li{margin-top:10px;}/* 2行目以降は上を開ける。 */ #membersList li img{margin-right:10px;vertical-align:middle;}/* サムネイルの表示指定 */ --> ＿</style> </head> <body> ＿<h1>サンプル</h1> ＿<div id="membersList"> ＿＿<ul> ＿＿＿<li><img src="./images/thumbnail/01.jpg" width="80" height="60" alt="A君">の簡単な説明 ＿＿＿＿<p><img src="./images/01.jpg" width="240" height="190" alt=""></p> ＿＿＿</li> ＿＿＿<li><img src="./images/thumbnail/04.jpg" width="80" height="60" alt="B君">の簡単な説明 ＿＿＿＿<p><img src="./images/04.jpg" width="240" height="190" alt=""></p> ＿＿＿</li> ＿＿＿<li><img src="./images/thumbnail/05.jpg" width="80" height="60" alt="C君">の簡単な説明 ＿＿＿＿<p><img src="./images/05.jpg" width="240" height="190" alt=""></p> ＿＿＿</li> ＿＿</ul> ＿</div> </body> </html>
その他の回答 (3)
- ORUKA1951
- ベストアンサー率45% (5062/11036)
さらにこんなの #membersList{width:70%;margin:200px auto 0 auto;min-width:640px;} #membersList ul,#membersList li{display:block;list-style-type:none;margin:0;padding:0;} #membersList ul li{width:120px;height:120px;position:relative;float:left;margin-left:20px;font-size:0.8em;} #membersList ul li p{position:absolute;left:-20px;top:-130px;width:240px;display:none;} #membersList ul li:hover p{display:block;z-index:10;} #membersList ul li img{margin-right:10px;display:block;margin-bottom:1em;} #membersList ul li:hover{background-color:yellow;} HTMLはそのままで、スタイルシートだけ変更。いくつも画像があるときはこっちの方が良いかも・・ なお、印刷が想定される場合は、まずいので <style type="text/css" media="screen"> ないし <link rel="stylesheet" type="text/css" media="screen" href="***"> とmediatypeをscreenに限定しておくこと
お礼
これはどこに貼り付けるのですか？ とりあえず、載せたい写真の人数は、だいたい５～７人くらいの予定です。 で、等級？（会長とか、部長とかいうの）と、所属場所？（〇〇部とか）と名前を載せて、その写真を小さく載せておいて、ポインタが来たときだけ拡大できる・・・といったイメージです。 なんかもう甘えてますね。 自分でやれよ・・・って感じですが。。。（汗） 調べながらやりたいと思います。 ありがとうございました。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
遊んでみた(^^) こんなこともできるよ。 なお、CSSでのデザインの方法は、 Webデザイン・CSS - 教えて！goo ( http://oshiete.goo.ne.jp/category/258/ ) HTMLの書き方は HTML - 教えて！goo ( http://oshiete.goo.ne.jp/category/252/ ) のほうが良いでしょう。 そのときはホームページとは言わず、ウェブページとかHTMLとね。 ホームページ - Wikipedia ( http://ja.wikipedia.org/wiki/%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8 ) ホームページ・ビルダー - Wikipedia→「名称の影響」 ( http://ja.wikipedia.org/wiki/%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8%E3%83%BB%E3%83%93%E3%83%AB%E3%83%80%E3%83%BC#.E5.90.8D.E7.A7.B0.E3.81.AE.E5.BD.B1.E9.9F.BF ) <!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 name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- #membersList ul,#membersList li{display:block;list-style-type:none;margin:0;padding:0;} #membersList ul li{width:250px;} #membersList ul{position:relative;} #membersList ul li p{position:absolute;left:250px;top:0;width:240px;text-align:left;display:none;} #membersList ul li:hover p{display:block;z-index:10;} #membersList ul li+li{margin-top:10px;} #membersList ul li img{margin-right:10px;vertical-align:middle;} #membersList ul li:hover{background-color:yellow;} #membersList ul li:hover:after{content:"→";} #membersList ul li a:after{ content:"クリックで"attr(title)"へリンクします。"; position:absolute;left:0;top:-1.5em; font-size:0.9em; padding:0.2em 0.5em; } --> ＿</style> </head> <body> ＿<h1>サンプル</h1> ＿<div id="membersList"> ＿＿<ul> ＿＿＿<li><img src="./images/thumbnail/01.jpg" width="80" height="60" alt="A君">の簡単な説明 ＿＿＿＿<p><a href="A.html" title="A君のサイト"><img src="./images/01.jpg" width="240" height="190" alt=""></a></p> ＿＿＿</li> ＿＿＿<li><img src="./images/thumbnail/04.jpg" width="80" height="60" alt="B君">の簡単な説明 ＿＿＿＿<p><a href="B.html" title="B君のサイト"><img src="./images/04.jpg" width="240" height="190" alt=""></a></p> ＿＿＿</li> ＿＿＿<li><img src="./images/thumbnail/05.jpg" width="80" height="60" alt="C君">の簡単な説明 ＿＿＿＿<p><a href="C.html" title="C君のサイト"><img src="./images/05.jpg" width="240" height="190" alt=""></a></p> ＿＿＿</li> ＿＿</ul> ＿</div> </body> </html>
お礼
もう、何も言えません。 コピーしてもいいですか？・・・というくらいしか。 いろいろな方法を考えていただき本当にありがとうございました。 やってみます。
- t_ohta
- ベストアンサー率38% (5238/13705)
リンク先ホームページのソースを見る限り、あまり難しいことはしていませんね。 拡大画像は最初からHTMLに書いてあります（ソースの90-96行目） これをスタイルシートを使って visibility: hidden で最初は非表示にしています。 左側の画像部分では onMouseOver="" と onMouseOut="" で、それぞれ対応する拡大画像の表示／非表示を切替える仕組みになってます。 実際のJavaScriptの記述はソースの79-85行目部分にある MM_showHideLayers() という関数ですね。
お礼
ありがとうございます。 見ただけで方法がわかるなんて、本当にすごいですね。 それもそんなに難しくないとは・・・脱帽です。 ホームページのソースなんて見れるんですか？？？ でも私の言いたいことが分かっていただけて本当に良かったです。 最初からリンクをはりつければよかったです（笑） ありがとうございました。
お礼
前回といい、今回といい、本当にありがとうございます。 このままこのテキストをコピーしたいくらいです。 でも、どこからどこまでをコピーしたらいいのか分からないんですけど・・・（汗） 見ただけでこうだということが分かってしまうなんて本当にすごいと思います。 脱帽です。 私も最初は意気込んでやり始めたものの、すでにこれでつまづいている状態です。 仕組み（ホームページの）を知りたいので、自分で研究がてら作成したいと思っていますが、、、 難しいです。 でも、やっと？私の言いたいことがわかってもらえたのでよかったです。 本当にありがとうございました。