再び同じような質問をお許し下さい。
以前、ホームページを作ろうと思います。・・・といった質問をしたのですが、回答してくださった方のおかげで、方法が見えてきたのですが、よくよく調べてみたらちょっとまた引っかかるところが出てきてしまったので、どうか教えていただけたら幸いです。
以前、写真にマウスポインタがいくと、ふっとその写真そのものが拡大されたような感じになるので、その方法を教えてほしいといった内容でしたが、もう一度その効果があったホームページを見返したところ、どうも拡大・・・という感じではなくて、隣にパッと拡大されてうつる・・・といった感じなんです。
実は、今練習用のホームページでそのロールオーバー効果をやってみたのですが、私のやり方が悪いのかもしれませんが、プレビューで見てみるとどうしても拡大されないのです(泣)
ちなみにソフトはホームページビルダー15をインストールしました。
あの質問の後、さらに本を追加して買った(徹底攻略!みたいなやつ)のですが、それでその本と実際のホームページの順序どうりにやってみたのですが、ならないのです。。。
おかしいなぁ、と思ってもう一度やってみたら、別に掲載した画像にロールオーバー効果を付け足すような効果??を指定したら、今度はプレビューでその小さな写真にマウスポインタがいったら、別の写真がパッと変ったんです。
もう、???になってしまって。。。
その効果が気になったというホームページを再度覗かせていただいて、もう一度その写真にマウスポインタを乗せたら、すぐ隣にぱっと写ったんです。(よくよく見たらそんな感じ)
まるで、そこに写真があって、消えて?いて、マウスポインタがのったときだけ表示される。。。といった感じです。
本当ならそのホムペのリンクを貼りたいのですが(そうすればすぐ私の言いたいことがわかっていただけると思うので。。。)、それは著作権に引っかかると思う(ある団体なので、良いのか悪いのかわからないんです)ので、やめておきます。
すみません、しつこい質問をしてしまって申し訳ありませんが、わかる方がいましたらどうか回答して頂けたら幸いです。
長文失礼しました。
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まで書き直す羽目になります。
そしてなによりも、検索エンジンもきちんと理解してくれます。
今は、ホームページビルダーの本を片手にここをクリックして、こうして、ああして、こうすると、、、といった感じで進めているのですが、HTMLというのは重要なんですね。
デザインを先に考えるより、方法をちゃんと身につけた方がいいんでしょうかね。
HTMLはぜんぜん触れていないというか、入力とかもしたことないんです。。。
本の順番どおりにやっていったらできなくて、なんでだろう???
みたいな。
本にはその拡大がどうのこうのというのではなく、ポインタを置くと色が変わったりする方法なんですよね。
どうしたらいいものか、、、簡単にはいかなそうですね。
丁寧なご指導をありがとうございました。
いろいろやってみます。
ありがとうございました。
No.3
- 回答日時:
ありがとうございます!
そうです!そんな感じです。
最初の文字部分の所が写真になっているだけで、マウスポインタを置くとパッとうつるんですよ。
HTMLでやるとどうこう・・・とあるのですが、今ホームページビルダーの本を片手にここをクリックしてこうして、こうする・・・といったような感じでやっているのですが・・・。
HTMLでの方が出やすい・・・というかちゃんとでるんでしょうか???
とりあえずそのやり方?を知りたいのです。。。
ありがとうございました。やってみます。
No.2
- 回答日時:
ロールオーバーで大きさが違うものをやると、大きい方に合わせると思うので変になると思いますよ。
*基本、同じ大きさにします。
ちなみにロールオーバーはウェブアートデザイナー(HPビルダー付属)で作ると簡単かも・・・。
あ、なるほど!
画像が同じ大きさでないとダメなんですか?
どうやら勘違いしていたようです。
最初にうつっている画像を小さいものに指定しておいて、ポインタが行った時にうつるときの写真を大きくしていました。
だから出てこなかったんでしょうか???
ちなみに写真は同じ写真です。
ウェブアートデザイナー・・・なんでしょうか?
それも調べてみます。
ありがとうございました。
No.1
- 回答日時:
そうですそうです!
ただ、クリックしなくて、ポインタがその写真の上に乗っただけでその拡大写真が写ります。
でも、この方法でも私の言いたいことは同じです。
教えていただいたページのHTMLをそのまま同じように表記してあげれば、私の練習用のホムペでもなりますかねぇ???
コピペとかすると違法になりますかね?
そんなことすら知らないのです(汗)
でも、方法があったのでよかったです。
ありがとうございました。
いろいろやってみます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- リフォーム・リノベーション 業者のホームページに施工例が掲載される場合 2 2022/03/26 09:45
- ガーデニング・家庭菜園 生垣の葉・枝に付着している虫の正体を教えてください 1 2023/06/24 10:52
- Photoshop(フォトショップ) Photoshopで、デジタル一眼レフカメラ撮影の写真を、スマホ写真のように「のっぺり」させるには? 2 2023/03/28 14:43
- 片思い・告白 こちらで質問させて頂いた際に片思いの彼のことを書かせて頂いたのですが、その彼についてです。 彼は最近 1 2022/11/19 00:01
- いじめ・人間関係 苦手な人を推しているかもしれないです 質問見てくれてありがとうございます!!!! 突然ですが、私自身 1 2022/09/09 20:09
- WordPress(ワードプレス) Wordpress 複数プラグインの不具合? 1 2022/10/09 21:52
- 写真 顔の見え方について教えて欲しいです。この手の質問は何個もありましたが、自分なりの実験の結果は見つかり 5 2022/08/04 11:45
- 皮膚の病気・アレルギー ひょう疽(周囲爪炎)で悩んでいます(現在の症状の写真あります) 2 2022/09/10 21:57
- 出会い・合コン 友達の彼氏の友達を紹介して貰うのですが… 4 2022/07/19 08:19
- スキンケア・エイジングケア 汚い写真載せて申し訳ありません。 ニキビ跡で悩んでいます。 私は元々ニキビ肌で、皮膚科の薬でニキビ自 1 2022/06/23 00:00
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
スライドショー「Skitter」をカ...
-
Slick.jsのオプションrtlについて
-
jQueryでタブ、スライダーを使...
-
アコーディオンメニューが開い...
-
クリックした<a>タグのみにClas...
-
C言語のポインタ表現
-
画像と文字を同時に切り替えたい
-
JavaScript スライドの画像にリ...
-
c++std::string型をTCHARに変換...
-
htmlの記述で link rel=styles...
-
複数bxsliderをタブで切り替え...
-
JavaScriptでの画像切り替えを...
-
IFRAMEの表示/非表示を切り替え...
-
MAX関数を使ってからLEFT JOIN...
-
読み込んだQRコードをフォーム...
-
診断の作り方
-
HTMLですCSSです この画像のよ...
-
画像をフォルダに入れれば表示...
-
画像の重なりの順序を代える方...
-
OpenCVでサンプルコードを使う...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Slick.jsのオプションrtlについて
-
【jQuery】2分割レイアウトで、...
-
アコーディオンメニューが開い...
-
横並びの画像を3枚時間差でフェ...
-
html5に変えるとスライドショー...
-
キャラクターがぴょこんと飛び...
-
jsでグリッドデザインのサムネ...
-
Javaスクリプトで画像を縦にス...
-
複数の要素へ appendchild でき...
-
CSSでマウスオーバーした画像を...
-
【iOS及びAndroid】リンク画像...
-
スライドショー「Skitter」をカ...
-
Dreamweaver上とデバイスプレビ...
-
同一ページ内の複数のタグに同...
-
スライド機能について
-
チェックボックスと画像切替の連動
-
jqueryのプラグインslickの画像...
-
Javascriptを使用したスライド...
-
bxSliderのランダム表示について
-
Firefoxとクロームでフェードイ...
おすすめ情報