以前、ロールオーバー効果について質問した者です。

質問

再び同じような質問をお許し下さい。

以前、ホームページを作ろうと思います。・・・といった質問をしたのですが、回答してくださった方のおかげで、方法が見えてきたのですが、よくよく調べてみたらちょっとまた引っかかるところが出てきてしまったので、どうか教えていただけたら幸いです。

以前、写真にマウスポインタがいくと、ふっとその写真そのものが拡大されたような感じになるので、その方法を教えてほしいといった内容でしたが、もう一度その効果があったホームページを見返したところ、どうも拡大・・・という感じではなくて、隣にパッと拡大されてうつる・・・といった感じなんです。

実は、今練習用のホームページでそのロールオーバー効果をやってみたのですが、私のやり方が悪いのかもしれませんが、プレビューで見てみるとどうしても拡大されないのです（泣）

ちなみにソフトはホームページビルダー１５をインストールしました。

あの質問の後、さらに本を追加して買った（徹底攻略！みたいなやつ）のですが、それでその本と実際のホームページの順序どうりにやってみたのですが、ならないのです。。。

おかしいなぁ、と思ってもう一度やってみたら、別に掲載した画像にロールオーバー効果を付け足すような効果？？を指定したら、今度はプレビューでその小さな写真にマウスポインタがいったら、別の写真がパッと変ったんです。

もう、？？？になってしまって。。。

その効果が気になったというホームページを再度覗かせていただいて、もう一度その写真にマウスポインタを乗せたら、すぐ隣にぱっと写ったんです。（よくよく見たらそんな感じ）
まるで、そこに写真があって、消えて？いて、マウスポインタがのったときだけ表示される。。。といった感じです。

本当ならそのホムペのリンクを貼りたいのですが（そうすればすぐ私の言いたいことがわかっていただけると思うので。。。）、それは著作権に引っかかると思う（ある団体なので、良いのか悪いのかわからないんです）ので、やめておきます。

すみません、しつこい質問をしてしまって申し訳ありませんが、わかる方がいましたらどうか回答して頂けたら幸いです。

長文失礼しました。

回答No.4

ORUKA1951 · ベストアンサー

発想を変えてください。
・HTMLは文書構造をマークアップするもので、プレゼンテーション(表現)を指定するものではない。
・一方、スタイルシートはHTMLの文書構造を元にプレゼンテーションを指定するもの
　今後、HTML5が普及すると思いますが、そうなるとこれが一番重要になります。HTML4.01でも実はそのように決められていたのですが、目を留める人は少なかっただけです。

　まず、あなたのHTMLが、サムネイルと、その拡大写真のリストだとすると、HTMLは
<div class="photoList">
　<ul>
　　<li><img src="./photo/tumbnail/a.jpg" width="60" height="80" alt="A君のの写真">
　　　<p><img src="./photo/a.jpg" width="480" height="640" alt="A君の拡大写真"></p>
　　</li>
・・・・・・・・・・
であったり、
<div class="section">
<ul>
<li><a href="#A"><img src="./photo/thumbnail/a.jpg" width="80" height="60" alt="A君のの写真"></a></li>
<li><a href="#B"><img src="./photo/thumbnail/b.jpg" width="80" height="60" alt="A君のの写真"></a></li>
・・・【中略】・・・
</ul>
<p><img src="./photo/a.jpg" width="640" height="480" alt="A君の拡大写真"></p>
<p><img src="./photo/b.jpg" width="640" height="480" alt="B君の拡大写真"></p>
・・・・・・・・
であったりするでしょう。

HTMLさえ、この様にきちんと書かれていたら、
・サムネイルを縦に並べてその脇に拡大画像を表示する。
　・サムネイルは右
　・サムネイルは左
・サムネイルを横一列に並べて写真をその上下いずれか
　・サムネイルは上
　・サムネイルは左
★画像の縦横比に関係なく、表示部分の中央に

とか、自由自在にできます。もちろん印刷したときは、すべての画像が表示されるようにとか・・

　大事なことは、HTMLをプレゼンテーションとは分けて、文書構造がきちんとわかるように記述することです。そうすると、スタイルシートを書きやすくなります。
　デザインを念頭においてHTMLを書いてしまうと、応用が利きませんし、先でデザインを変えたくなったときHTMLまで書き直す羽目になります。
　そしてなによりも、検索エンジンもきちんと理解してくれます。

お礼

今は、ホームページビルダーの本を片手にここをクリックして、こうして、ああして、こうすると、、、といった感じで進めているのですが、ＨＴＭＬというのは重要なんですね。

デザインを先に考えるより、方法をちゃんと身につけた方がいいんでしょうかね。

ＨＴＭＬはぜんぜん触れていないというか、入力とかもしたことないんです。。。

本の順番どおりにやっていったらできなくて、なんでだろう？？？

みたいな。

本にはその拡大がどうのこうのというのではなく、ポインタを置くと色が変わったりする方法なんですよね。

どうしたらいいものか、、、簡単にはいかなそうですね。

丁寧なご指導をありがとうございました。

いろいろやってみます。
ありがとうございました。

回答No.3

adobe_san

判った！
http://www.marguerite.jp/Nihongo/WWW/DHTML/Layer.html
これだ！
上部2行目の「堀北真希うさぎ　主な作品」の所にポインタ置いてみて

お礼

ありがとうございます！

そうです！そんな感じです。

最初の文字部分の所が写真になっているだけで、マウスポインタを置くとパッとうつるんですよ。

ＨＴＭＬでやるとどうこう・・・とあるのですが、今ホームページビルダーの本を片手にここをクリックしてこうして、こうする・・・といったような感じでやっているのですが・・・。

ＨＴＭＬでの方が出やすい・・・というかちゃんとでるんでしょうか？？？

とりあえずそのやり方？を知りたいのです。。。

ありがとうございました。やってみます。

回答No.2

hosakaing

ロールオーバーで大きさが違うものをやると、大きい方に合わせると思うので変になると思いますよ。
＊基本、同じ大きさにします。

ちなみにロールオーバーはウェブアートデザイナー（HPビルダー付属）で作ると簡単かも・・・。

お礼

あ、なるほど！

画像が同じ大きさでないとダメなんですか？

どうやら勘違いしていたようです。

最初にうつっている画像を小さいものに指定しておいて、ポインタが行った時にうつるときの写真を大きくしていました。

だから出てこなかったんでしょうか？？？

ちなみに写真は同じ写真です。

ウェブアートデザイナー・・・なんでしょうか？

それも調べてみます。

ありがとうございました。

回答No.1

adobe_san

もしかしてこれ？
http://es.rojo.jp/js/es_js22.html
写真をクリックしてください。

お礼

そうですそうです！

ただ、クリックしなくて、ポインタがその写真の上に乗っただけでその拡大写真が写ります。

でも、この方法でも私の言いたいことは同じです。

教えていただいたページのＨＴＭＬをそのまま同じように表記してあげれば、私の練習用のホムペでもなりますかねぇ？？？

コピペとかすると違法になりますかね？

そんなことすら知らないのです（汗）

でも、方法があったのでよかったです。

ありがとうございました。

いろいろやってみます。