ロールオーバー効果についての質問

2023/08/16 06:40

このQ&Aのポイント

以前からホームページ作成における画像のロールオーバー効果について質問をしています。
具体的には、リンク先のページに飛ぶことで拡大された画像が表示される方法について知りたいです。
以前の回答ではリンク先を貼り付けることで問題ないと回答がありましたが、著作権などについての理解が不十分で不安です。

ベストアンサー

ロールオーバー効果について・・・のその後。

2012/06/19 08:06

以前からしつこい質問ばかりで、本当に申し訳ありません。ここに質問すれば納得のいく回答をしてくださる方がいるので、甘えています。さて、表題に戻りますが、以前からホムペ作成にあたっての、画像のロールオーバー効果についての質問を繰り返しています。いろいろな方面からのアドバイスで、やり方等が分かってきたのですが、これさえあれば、というものがまだ少し残っています。そこで、私が一番言いたかった・・・というか表現したかった方法が、リンク先の貼り付けで、そこのホームページにさえ飛んでいただいてここのやり方なんです！といえば、きっと分かってくださると思います。でも、著作権？？のことがよくわからなくて、別の項目にて質問をしたところ、リンク先を貼り付けるだけなら問題はない（クリックすれば誰でも行くだろうしという答えでした）との回答をいただいたので、安心したとともに、これでしつこい質問を最後にしたいと思い、思い切ってリンクを貼りたいと思います。 http://www.dewa.or.jp/~tfc119/ ここのホームページです。その最初のページ（ＨＯＭＥ）の左側に何人かの顔写真が掲載されています。そこの画像にマウスポインタが乗っただけで、隣に拡大された同じ顔写真が写るのです。それをやりたいんです！もしこんなしつこい質問にあたたかい回答をいただけたら本当にうれしいです。よろしくお願いいたします。

ragasa
お礼率91% (32/35)

ホームページ作成ソフト
回答数4
ありがとう数4

みんなの回答 （4）
専門家の回答

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

ベストアンサー

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/06/19 10:01 回答No.2

前にも説明しましたが、「このように表示したいから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">  ＿</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>

質問者

お礼 2012/06/20 09:08

前回といい、今回といい、本当にありがとうございます。このままこのテキストをコピーしたいくらいです。でも、どこからどこまでをコピーしたらいいのか分からないんですけど・・・（汗）見ただけでこうだということが分かってしまうなんて本当にすごいと思います。脱帽です。私も最初は意気込んでやり始めたものの、すでにこれでつまづいている状態です。仕組み（ホームページの）を知りたいので、自分で研究がてら作成したいと思っていますが、、、難しいです。でも、やっと？私の言いたいことがわかってもらえたのでよかったです。本当にありがとうございました。

その他の回答 (3)

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/06/19 18:37 回答No.4

さらにこんなの #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に限定しておくこと

質問者

お礼 2012/06/20 09:25

これはどこに貼り付けるのですか？とりあえず、載せたい写真の人数は、だいたい５～７人くらいの予定です。で、等級？（会長とか、部長とかいうの）と、所属場所？（〇〇部とか）と名前を載せて、その写真を小さく載せておいて、ポインタが来たときだけ拡大できる・・・といったイメージです。なんかもう甘えてますね。自分でやれよ・・・って感じですが。。。（汗）調べながらやりたいと思います。ありがとうございました。

ORUKA1951
ベストアンサー率45% (5062/11036)

2012/06/19 14:34 回答No.3

遊んでみた(^^) こんなこともできるよ。なお、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">  ＿</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>

質問者

お礼 2012/06/20 09:17

もう、何も言えません。コピーしてもいいですか？・・・というくらいしか。いろいろな方法を考えていただき本当にありがとうございました。やってみます。

t_ohta
ベストアンサー率38% (5081/13277)

2012/06/19 09:35 回答No.1

リンク先ホームページのソースを見る限り、あまり難しいことはしていませんね。拡大画像は最初からHTMLに書いてあります（ソースの90-96行目）これをスタイルシートを使って visibility: hidden で最初は非表示にしています。左側の画像部分では onMouseOver="" と onMouseOut="" で、それぞれ対応する拡大画像の表示／非表示を切替える仕組みになってます。実際のJavaScriptの記述はソースの79-85行目部分にある MM_showHideLayers() という関数ですね。

質問者

お礼 2012/06/20 08:53

ありがとうございます。見ただけで方法がわかるなんて、本当にすごいですね。それもそんなに難しくないとは・・・脱帽です。ホームページのソースなんて見れるんですか？？？でも私の言いたいことが分かっていただけて本当に良かったです。最初からリンクをはりつければよかったです（笑）ありがとうございました。

ロールオーバー効果についての質問

ロールオーバー効果について・・・のその後。