• 締切済み

OnMouseOverで画像のサムネイルを別レイヤーに書き出したい

こんにちは。 今、HPで写真公開ページを作っています。 写真へのリンクをクリックすると別ウィンドウで表示するようにしたいのですが、それに加え、マウスをそのリンクの上にもってきたら、ページの特定の領域に小さなサムネイルがプレビューとして表示できるようにしたいです。 なお、サムネイルのファイルはあらかじめサイズを変更して、別ファイルで作っておいてもいいです。 onMouseOverでJavascriptの関数を呼び出して、その関数で、別レイヤーを書き出す(document.write("<div id="preview1">..(中略)...");とすれば良いのかなと思いましたが、うまくいきません。 どなたか、アドバイスいただけますか？ もしくは、いいチュートリアルのサイトなど、教えていただけませんか？

みんなの回答

  • todo36
  • ベストアンサー率58% (728/1234)
回答No.2

<body> <a href="a.html" onmouseover="document.imgpreview.src='a.gif'" onmouseout="document.imgpreview.src='null.gif'" >写真集A</a> <a href="b.html" onmouseover="document.imgpreview.src='b.gif'" onmouseout="document.imgpreview.src='null.gif'" >写真集B</a> <br> <img name="imgpreview" src="null.gif" width=100 height=100> </body> こんな感じで行けると思ったのですが、私の勘違い？

Sawara13
質問者

補足

ありがとうございます！ えっと、それで、レイヤーはどこですか？ すみません、あまりよく分からなくて... 動的にレイヤーを書けるといいな、と思ったのですが...

  • todo36
  • ベストアンサー率58% (728/1234)
回答No.1

imgタグのsrcを動的に変えればいいでしょう。

参考URL：
http://tohoho.wakusei.ne.jp/wwwxx.htm
Sawara13
質問者

補足

アドバイスありがとうございます。 参考URLの、「マウスを乗せると絵が変わる」ですよね？ ただ、このサンプルでは、onMouseOverイベントは<a>エレメントにセットされていますね。 で、<a>エレメントの上(？)のイメージを切替える、ということでしょうか。 私がやりたかったのは、ここで<a>エレメントにマウスを載せると、別の場所、ここでは別レイヤーに画像を書き換えることなんですが。 あ、あらかじめレイヤーを作っておいて、そこにデフォルトの<img>エレメントを書いておけばいいのかな？

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • オンマウスでレイヤーを出す。

    質問させてください。 リンク集のようなＨＰをやっております。 そこでリンクの一覧に小さいサムネイル写真を出して、それをマウスオーバーすると拡大サムネイルが出てくるようにしたいと思っております。 レイヤーの表示・非表示でやろうかと思っていたのですが、どうもうまくいきません。やはり一から書くのは私にはちょっと難しそうで、、参考にできるページなどがありましたら教えていただきたいのです。 イメージしているのは以下のようなものです。 http://blogdesign.cocok.jp/ ポインタについてくるようにする必要はないのですが、、このようなものをjavascriptでできないでしょうか。 どうぞよろしくお願いいたします。

  • ＨＰでサムネイルページが開きにくい

    お世話になってます。 ＨＰでサムネイルのページを作りましたが、 実際、表示が出来たり出来なかったり、マチマチで困りました。 内容は、１４０×８０ピクセル の縮小された写真が ２５枚並んでます。 このサムネイルのページは、リンクで 別ウィンドウ　_blankで表示しました。 この先さらに、写真を追加しなければなりませんが、不安で。 １４０ピクセルが大き過ぎる？！ 別ウィンドウ表示は良くない？！ ただ、大きめのサムネイルを、１つのページに表示するのは、 イメージしやすくイイとの事で。。 私素人ですが、どうすればよろしいでしょうか。 宜しくお願い致します。

    • ベストアンサー
    • HTML
  • フォトショップＣＳ３でサムネール写真を2枚表示

    レイヤーバレットのレイヤーサムネールに写真を表示させる時は、 操作として(1)フォトショップＣＳ３のファイル→開く→写真（女性の写真）を選択の手順で レイヤーパレットに背景として女性の写真が背景として表示できますよね。 これは、できるのですが 参照　http://tesutphotoshop.takasan.info/ そこで、もうひとつ、さらに、同じ操作でファトショップＣＳ３のファイル→開く→写真（男性の写真）を 選択で別のレイヤーサムネールに、具体的には、レイヤーパレットの女性の写真の上にレイヤーサムネールとして表示させたいのですができません。 操作方法が間違っているのでしょうか？ それとも、何か設定しなければならないのでしょうか？ 私は、「女性の写真」と「男性の写真」を各レイヤーサムネールに表示させるのに、 操作(1)を2回繰り返すと、最初にレイヤーサムネールに表示させた（女性の写真）の上に ２枚目男性の写真）が表示され女性の写真は隠れてしまします。 女性の写真のレイヤーサムネールと男性のレイヤーサムネール写真が２つ見える状態での表示 方法の操作のしかた教えてください。 どうしたらレイヤーパレットのレイヤーサムネイルに2枚の写真、具体的には、男性の写真が上に女性の写真が下に並んで表示できるのでしょうか？ 初心者なのでよくわかりません よろしくお願いします。 投稿日時 - 2012-04-29 13:08:28 通報するQNo.7447498 kensin9 すぐに回答ほしいです

  • エクスプローラのサムネールが違う画像になってしまいました。

    こんにちは。 エクスプローラで「縮小版」表示した際、JPEGファイルファイルのサムネールが表示されますが、 そのフォルダにある別のファイルのサムネールが表示されてしまいます。 すべてではなく、数枚に一枚の割合です。 「写真」表示の時も、上の写真は間違いないのですが、やはり下に並ぶサムネールが違うのです。 これは大変不便です。 エクスプローラの再起動、 PCの再起動などでは回復できませんでした。 直す方法は無いでしょうか。

  • ホームページビルダー ver8 でサムネイル写真挿入について

    デジカメ写真の挿入→サムネイル挿入→サムネイルにする写真を選択します。プレビューで見ると確かに サムネイル写真がＨＰに入っており、クリックするとちゃんと普通の写真サイズになります。ページを保存して転送、転送完了。しかし該当のホームページを開いてクリックしても駄目。ページが見つかりませんと表示されます。念のため転送の時、転送対象ファイルを見ると、thumb.の写真ファイルだけです。何故か、もとの写真ファイルが載っていないです。どうしたら解決できますか？

  • サムネイル画像がうまくいきません

    ホームページビルダー６でHPを作成しているのですが サムネイル画像をクリックすると写真は表示されずに gooのHP画面が出てきます。対処法を教えてください 因みに写真のページが３ページあり、１、２ページはちゃんと出来るのですが ３ページ目だけ？？？な状態です 全て同じように作ったはずなのですが・・・ よろしくお願いします。

    • ベストアンサー
    • HTML
  • サムネイル画像を１枚画像にするソフトウェア

    (1)サムネイル画像（組写真？）を作製し、(2)そのページ全体を適当なファイルサイズに圧縮できる様な簡単なソフトウェアを探しています。 デジカメで撮影した500KBくらいの写真６枚程度で１枚のサムネイル画像を作製し、かつそれをネットで送れるくらいのサイズに圧縮させたいと考えています。 Photoshopなどを使えば良いと思いますが、初心者でもできるようなソフト（フリーかシェアウェアだとうれしい）をご存知であれば教えてください。 サムネイル画像の作製と、その後の圧縮は別ソフトになってもかまいません。

  • サムネイル画像リンク先のHTMLページ内にある画像を、サムネイル状態から一括保存するには？

    沢山のサムネイル画像が表示されているWebサイトにて、 そのサムネイル画像をクリックしたリンク先のページに、大きな元画像がある場合でも、 サムネイルページから元画像を一括ダウンロードできるツールかFireFoxの拡張機能はありませんでしょうか？ 例えば… 読売オンラインのフォトニュース http://www.yomiuri.co.jp/photonews/ こちらを開くと、画像のサムネイルが表示され、個々の画像をクリックするとその先のHTMLページに元の大きな画像が展開されます。 このサムネイル状態から、元の大きな画像を一括で保存したいのです。 サムネイル画像のリンク先が画像ファイルでしたらFlashget等で簡単に保存できるのですが、リンク先のHTML内にある画像なので、なかなかツールが見つからず困っております。 どうぞ宜しくお願い致します。

  • 画像のサムネイルが表示されません。。。

    はじめまして。 このたびVistaに乗り換えましたが、デジカメ画像を取り込んだ 画像ファイルのサムネイル（縮小画像）が表示されません。 デフォルトのイラストみたいなのになってしまい、ひとつずつファイルを プレビューしなくてならず、大変不便を強いられています。 解決方法を教えてください。 どうぞよろしくお願いいたします。

  • onMouseOverでリンクを作る方法は？

    onMouseOverを使って、特定のブロックをリンクボタンのように機能させる方法を教えて頂けませんでしょうか。 具体例は、ユニクロさんのショッピングカートです。 ユニクロさんのオンラインストアサイトでは、ほとんどのページでページの右上に小さなショッピングカートサマリーが表示されます。(トップページ以外) 【たとえば、このページ。(リンク先はユニクロさんの特集一覧)】 http://store.uniqlo.com/jp/store/feature/ このショッピングカートサマリーはareaStoreNaviというブロックで、 下層にCartArea01という要素を持ち、その要素内に「ショッピングカート」というテキスト文字で、カートの中身を表示するURLへリンクを貼っています。 このテキスト文字の上に、ショッピングカートサマリーの背景画像が上書き表示され、テキスト文字は通常は表示されません。 そしてショッピングカートサマリーの背景画像やその文字列にはリンクが貼られていません。 上位ブロックであるareaStoreNaviにOnMouseOverで、マウスオーバー時にCartArea01のリンク効果をareaStoreNaviブロックに適用しているのだと思うのですが、実際に自分の環境で記述する方法が分からないのです。 <DIV id=areaStoreNavi onMouseOver="cartArea('1');" onmouseout="cartArea('0');"> <DIV class=Cartarea01><A title=ショッピングカート href="http://store.uniqlo.com/jp/disp/CUCtViewCartLink.jsp">ショッピングカート</A></DIV> <DIV class=Cartarea02> <TABLE cellSpacing=0 cellPadding=0 width=114 border=0> <TBODY> <TR> <TD class=itemNum>0点</TD></TR> <TR> <TD class=itemPrice>￥0</TD></TR></TBODY></TABLE></DIV> どうして"cartArea('1');" なのでしょう？ "cartArea01;" や"cartArea1;" でない理由がよく分からないのです。 「それは○○のルールにのっとっているんだよ」ということを教えて頂ければ、嬉しく思います。 皆さまのお力を貸して頂けませんでしょうか。よろしくお願いいたします。

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する