• ベストアンサー
※ ChatGPTを利用し、要約された質問です(原文:以前、ロールオーバー効果について質問した者です。)

ホームページ作成中のロールオーバー効果について

このQ&Aのポイント
  • 以前の質問でホームページ作成についてアドバイスを頂き、方法が見えてきました。しかし、ロールオーバー効果について苦戦しています。拡大ではなく隣にパッと写る効果を実現したいのですが、うまくいきません。質問いたしますが、どのようにすれば目的の効果を出すことができるのでしょうか。
  • ホームページ作成のためにホームページビルダー15を使っています。以前の質問で頼りになる本も購入し、指示に従ってトライしましたがうまくいきませんでした。マウスポインタが写真に乗った時に隣に別の写真が表示されるような効果を実現したいのですが、方法がわかりません。
  • 再度、ロールオーバー効果があるホームページを見返しても解決策が見つかりませんでした。写真にマウスポインタを乗せた時にすぐ隣に写真が表示されるような効果を作りたいのですが、実現方法がわかる方がいらっしゃいましたら教えてください。

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

  • ベストアンサー
  • ORUKA1951
  • ベストアンサー率45% (5062/11036)
回答No.4

発想を変えてください。 ・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まで書き直す羽目になります。  そしてなによりも、検索エンジンもきちんと理解してくれます。

ragasa
質問者

お礼

今は、ホームページビルダーの本を片手にここをクリックして、こうして、ああして、こうすると、、、といった感じで進めているのですが、HTMLというのは重要なんですね。 デザインを先に考えるより、方法をちゃんと身につけた方がいいんでしょうかね。 HTMLはぜんぜん触れていないというか、入力とかもしたことないんです。。。 本の順番どおりにやっていったらできなくて、なんでだろう??? みたいな。 本にはその拡大がどうのこうのというのではなく、ポインタを置くと色が変わったりする方法なんですよね。 どうしたらいいものか、、、簡単にはいかなそうですね。 丁寧なご指導をありがとうございました。 いろいろやってみます。 ありがとうございました。

その他の回答 (3)

  • adobe_san
  • ベストアンサー率21% (2103/9759)
回答No.3

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

ragasa
質問者

お礼

ありがとうございます! そうです!そんな感じです。 最初の文字部分の所が写真になっているだけで、マウスポインタを置くとパッとうつるんですよ。 HTMLでやるとどうこう・・・とあるのですが、今ホームページビルダーの本を片手にここをクリックしてこうして、こうする・・・といったような感じでやっているのですが・・・。 HTMLでの方が出やすい・・・というかちゃんとでるんでしょうか??? とりあえずそのやり方?を知りたいのです。。。 ありがとうございました。やってみます。

  • hosakaing
  • ベストアンサー率56% (1694/2988)
回答No.2

ロールオーバーで大きさが違うものをやると、大きい方に合わせると思うので変になると思いますよ。 *基本、同じ大きさにします。 ちなみにロールオーバーはウェブアートデザイナー(HPビルダー付属)で作ると簡単かも・・・。

ragasa
質問者

お礼

あ、なるほど! 画像が同じ大きさでないとダメなんですか? どうやら勘違いしていたようです。 最初にうつっている画像を小さいものに指定しておいて、ポインタが行った時にうつるときの写真を大きくしていました。 だから出てこなかったんでしょうか??? ちなみに写真は同じ写真です。 ウェブアートデザイナー・・・なんでしょうか? それも調べてみます。 ありがとうございました。

  • adobe_san
  • ベストアンサー率21% (2103/9759)
回答No.1

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

ragasa
質問者

お礼

そうですそうです! ただ、クリックしなくて、ポインタがその写真の上に乗っただけでその拡大写真が写ります。 でも、この方法でも私の言いたいことは同じです。 教えていただいたページのHTMLをそのまま同じように表記してあげれば、私の練習用のホムペでもなりますかねぇ??? コピペとかすると違法になりますかね? そんなことすら知らないのです(汗) でも、方法があったのでよかったです。 ありがとうございました。 いろいろやってみます。

関連するQ&A

専門家に質問してみよう