ロールオーバーで右側セルにプレビューを表示する方法

このQ&Aのポイント
  • ホームページビルダーで作成したページに横に2マスある表を作り、右側のセルを幅50%に指定しました。左側には40x40のサムネイルを100個ほど置いています。右側のセルにはロールオーバーでプレビューを表示させたいと思っていますが、絵の一部が見えなくなる問題があります。
  • 現在、右側のセルには写真のサイズによって表示位置が変わるため、一番上・下のサムネイルをロールオーバーさせると絵の全部が見えません。そこで、ロールオーバーではなくクリックでプレビューを表示させる方法や、セルの中央ではなく画面の中央に表示させる方法があれば教えてください。
  • また、他にも良い方法があれば教えていただきたいです。どうぞよろしくお願いします。
回答を見る
  • ベストアンサー

ロールオーバーで…

ホームページビルダーでページを作っています。 横に2マスある表を1つ作り、横幅を100%に指定、右のセルを幅50%に指定しました。 左側には40x40のサムネイルを100個ほど置いています。全部見るにはスクロールする必要があります。 右側のセルに右側のサムネイルをクリックしたときにプレビューを表示するようにしたいのですがうまく出来ません。 まず、ロールオーバーで右側セルにプレビューを表示することは出来ました(ビルダーの機能で出来ました)。 ---------------------------------------------- <A href="#" id="_HPB_ROLLOVER1" onmouseover="HpbImgSwap('_HPB_ROLLOVER1', 'pict/auto-mes/00/mes00-01-s.jpg'); HpbImgSwap('_HPB_ROLLOVER2', 'pict/auto-mes/00/mes00-01.jpg');" onmouseout="HpbImgSwap('_HPB_ROLLOVER1', 'pict/auto-mes/00/mes00-01-s.jpg'); HpbImgSwap('_HPB_ROLLOVER2', 'pict/blank.gif');"><IMG src="pict/auto-mes/00/mes00-01-s.jpg" width="40" height="40" border="0" name="_HPB_ROLLOVER1"></A> -------------------------------------------------- しかし、右側セル中央に表示指定にしているため一番上・下のものをロールオーバーさせると絵の全部が見えません。 写真のサイズは決まっておらず、まちまちです(縦長横長がランダムにある)。 そこで、ロールオーバーではなくクリックで右セルに表示させる方法とセル中央ではなく画面中央に表示させる方法があれば教えてください。 もしくは、ほかに何か良い方法がないでしょうか? よろしくお願いします。

  • HTML
  • 回答数3
  • ありがとう数3

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

  • ベストアンサー
回答No.3

> ページの%指定って何で横方向は出来るのに縦方向って出来ないんだろ? これって,テーブル(ホームページビルダーで言うところの「表」)の話ですか? セルについてでしたら,無理ですねぇ・・・。 で,なぜかと言えば,「それが仕様だから」と言うのが回答になります。 だから,個人としてはどう仕様もない・・・。(つまらないギャグになっちゃった・・・) あっ,ここで言う「仕様」と言うのは,ホームページビルダーではなく,HTMLの仕様のことです。 まぁ,私の勝手な想像ですが,マウスのホィールの関係でこうなったんではないかな? 基本的にページは縦スクロールですし・・・。 でね,今思いついたのですが,サムネールを縦に並べるのではなく,横に並べるって言うのはどうでしょう?(フレームを縦2分割) 確かに閲覧者の操作性は落ちますが,横に並べることでフレームを使うことができるようになりませんか? 確か,画像ファイルだけを表示させるとその部分には広告が表示できなくなっていたと思いますが・・・。

master-3rd
質問者

お礼

ありがとうございます。 その方法でも作ってみます。

その他の回答 (2)

回答No.2

すべてのサムネイルを同じ場所に表示しなければならないのであれば,これはNo.1のosamuyさんも書かれているフレームページを使う方が良いです。 しかし,もし,そのサムネイルをいくつかのグループに分けられるのであれば,グループごとにページを替えることでロールオーバーが使えるようになるのではないでしょうか。 例えば,思い切って20枚ずつとか10枚ずつとかのグループに分けるとか・・・。 スクロールするから見えなくなるんですから,スクロールしない程度の枚数にすると言うことです。 フレームページにする方法とグループ分けする方法,一応,検討してみてくださいね。

master-3rd
質問者

お礼

フレームについては、No1さんの回答でご理解ください。 使いたかったです…(T.T) で、今回は、枚数で分けるという形にしました。 とりあえずはキレイに出来ましたが、自分の考えが遂行できなかったのがちょっとザンネンでした。 別質問あげたほうが良いかもしれませんが、ページの%指定って何で横方向は出来るのに縦方向って出来ないんだろ?疑問です。

  • osamuy
  • ベストアンサー率42% (1231/2878)
回答No.1

クリックで表示させるなら、フレーム使った方がよくありません? サムネール側だけスクロールさせられますし。

master-3rd
質問者

お礼

フレーム…使いたかったのですか無料系ホームページのためすべてのフレームに広告が載ってしまうんです。 フレームさえ使えれば、ほかのページ移動なんかも簡単に出来るんですけどね… 広告さえ無ければ…(T.T)

関連するQ&A

  • ロールオーバーとOnclickで

    A href="javascript:;"target="_top" onclick="MM_nbGroup('down','group1','~.gif','detail','~.jpg',1)" id="_HPB_ROLLOVER1" onmouseover="HpbImgSwap('_HPB_ROLLOVER1', '~.gif'); HpbImgSwap('_HPB_ROLLOVER2', '~.jpg');" onmouseout="HpbImgSwap('_HPB_ROLLOVER1', '~.gif'); HpbImgSwap('_HPB_ROLLOVER2', '~.jpg');"><IMG src="~.gif" width="51" height="50" border="0" name="_HPB_ROLLOVER1"></A> 上のようにホームページビルダーを使って、ロールオーバーでサムネイルと大きな画像が切り替わるようにしています。 しかしサムネイルをクリックしたら、他のサムネイルをクリックするまで大きい画像が固定される方法がイマイチわかりません。 分かる方いらっしゃいましたら教えて下さい。 あまり詳しくなくて旨く説明できずにすみません。 http://irving.jp/rwr/discography.html のような 感じにしたいんです。

  • 画像にオンマウスで、説明文の色を変えたい

    画像にポインタを乗せると、同ページ内のその画像の説明文(テキスト)のところの文字色が変わるようにしたいんです。 画像にはすでに、下記のようなロールオーバー効果も組んでしまってるので、プラスして上記の効果をやりたいのですが…。 わかる方いらしたらご教授お願いします。 ↓画像のところに組んでいるロールオーバー効果 <A href="#" id="_HPB_ROLLOVER1" onmouseout="HpbImgSwap('_HPB_ROLLOVER1', 'gazou.jpg');" onmouseover="HpbImgSwap('_HPB_ROLLOVER1', 'gazou1.jpg');"><IMG src="gazou.jpg" title="gazou" width="106" height="149" border="0" name="_HPB_ROLLOVER1"></A>

  • ロールオーバー効果でエラーが出ます。

    ホームページビルダーの9を使用してます。 マウスロールオーバー効果の設定をしたところ、エラーが出てしまいます。 「オブジェクトを指定してください」というエラーでマウスを乗せると2回もそのエラーが出てきます。 ソフトの指示通りに設定してるのに何故エラーが出るのかわかりません。 ちなみにソース表示は、下記です。 <A onmouseout="HpbImgSwap('_HPB_ROLLOVER1','menu1.gif');" onmouseover="HpbImgSwap('_HPB_ROLLOVER1','menu1-2.gif');" href="×××.html" id="_HPB_ROLLOVER1"><IMG src="menu1.gif" width="79" height="54" border="0" alt="×××" name="_HPB_ROLLOVER1"></A> 何がいけないのでしょうか? このソースの前に何か記述すべきなのでしょうか?

  • ロールオーバーで小窓を出したい。

    今、ロールオーバーでリンクを指定してあります。 ロールオーバーはHPビルダー2001でつけました。 そのロールオーバーの編集でリンク付けてあります。 このリンクをロールオーバーしている画像を押した時に 小窓で表示される様にするにはどうすれば良いのでしょうか? 教えてください。

    • ベストアンサー
    • CSS
  • 一度ロールオーバーして表示させた画像をそのまま残したい

    Flash AS初心者です。 ボタンにロールオーバーした際に、別フレームで作成した吹き出しが任意の場所で表示されるような動きを作成しています。 通常であれば on (rollOver) { gotoAndStop(4); } で済むと思うのですが、ロールアウトした時、別のボタンにロールオーバーした時にも、もともと表示されていた吹き出しをそのまま残したいのです。(上記だと当然ながら消えてしまいます) ボタンとリンクする吹き出しは8つあるので、全て表示した際には重ならないようなレイアウトは考えているのですが・・・ つたない説明ですみません。 ご教授いただければ幸いです。

    • ベストアンサー
    • Flash
  • この配列は何?

    ホームページビルダーでロールオーバーのスクリプトを自動で書き出したものの一部ですが、 理解不能のところがあります。 以下がスクリプト var swImg; swImg=new Array; function HpbImgPreload() { var appVer=parseInt(navigator.appVersion); var isNC=false,isN6=false,isIE=false; if (document.all && appVer >= 4) isIE=true; else if (document.getElementById && appVer > 4) isN6=true; else if (document.layers && appVer >= 4) isNC=true; if (isNC||isN6||isIE) { if (document.images) { var imgName = HpbImgPreload.arguments[0]; var cnt; swImg[imgName] = new Array;//←ここです for (cnt = 1; cnt < HpbImgPreload.arguments.length; cnt++) { swImg[imgName][HpbImgPreload.arguments[cnt]] = new Image(); swImg[imgName][HpbImgPreload.arguments[cnt]].src = HpbImgPreload.arguments[cnt]; } } } } HpbImgPreload('_HPB_ROLLOVER1', 'rollover_n_image.gif', 'rollover_m_image.gif'); 以下がボディ <BODY> <P><A href="#" id="_HPB_ROLLOVER1" onmouseout="HpbImgSwap('_HPB_ROLLOVER1','rollover_n_image.gif');" onmouseover="HpbImgSwap('_HPB_ROLLOVER1','rollover_m_image.gif');"><IMG border="0" name="_HPB_ROLLOVER1" src="rollover_n_image.gif"></A></P> </BODY> このswImgの配列は[]の中が数値でないようですが、これは特殊な配列ですか? swImg[imgName] = new Array; どなたか初心者にも分かるように説明していただけるとありがたいです。

  • ロールオーバーで切り替えられるのは出来るの画像だけ?

    リモートロールオーバーで、サイトの更新情報を表示しようと思っています。 テーブルを組んで、サイトの各コンテンツの名前をオンマウスすると、横のセルに画像が表示されるようにしました。 更新情報だけは、画像が半分のサイズで、もう半分にテキスト(更新情報)を表示したいのです。 (以前はインラインフレームでこの方法を取っていたので、フレームを組んだページを表示させていたので問題なかったのですが、オンマウス表示にしたくて、悩んでいます) ロールオーバーの機能では画像だけしか切り替えが出来ないのでしょうか? また、テーブルの一つのセルの中に、画像とテキストの2種類をオンマウスで表示させる事は可能でしょうか? 御回答頂けると嬉しいです。

  • ロールオーバーするとラベルにジャンプし、ロールアウトするまでストップ

    ボタンAとボタンBの2つがありまして、 ボタンAにロールオーバーすると、指定したラベルにジャンプし、ボタンAの位置にボタンBがきます。 オーバー後少し進み、ロールアウトするまでストップしたいのですが、どうすれば良いのでしょうか? ボタンAには ──────────────────── on (rollOver) { gotoAndPlay("ボタンBの所のラベル"); } ──────────────────── と書いてあり、ロールオーバー時にきちんとラベルにジャンプしてくれます。 ボタンBには、 『 buttonB 』と名前を付け ──────────────────── on (release) { getURL("http://www.URL"); } ──────────────────── と記載してあり、別ページに飛ばしております。 該当のラベルまでジャンプした後、10フレームくらい進んだフレームにActionScriptをかけておりまして、 ──────────────────── stop(); clearInterval(stopID); var mov_stop = 4000; stopID = setInterval(function () { play(); clearInterval(stopID); }, mov_stop); } ──────────────────── となっており、ここのフレームでロールアウトするまでストップさせたいのですが、どうすればいいのか分からず困っております。 分かり難い文章で申し訳ないのですが、どなたか詳しい方ご掲示お願い致します。

    • ベストアンサー
    • Flash
  • ロールオーバーを外部にするとエラーがでます。

    ホームページビルダーV9を使用しています。 はじめてjavascriptを扱う初心者ですのでうまく説明が出来ないと思いますが宜しくお願い致します。 ビルダーでロールオーバーを作成し、それを外部ファイルにしました。 ビルダーでプレビューを見ると 「このページのスクリプトでエラーが発生しました エラー:'HPB_SCRIPT_CODE_40''HPB_SCRIPT_CODE_50''HPB_SCRIPT_CODE_50'は宣言されていません。」 と出ます。 ブラウザーで見てみると 「セキュリティ保護の為、コンピュータにアクセス出来るアクティブコンテンツは表示されないようWEBブラウザで制限されています。 オプションを表示するにはここをクリック」と上の方に出ます。 クリックしないとロールオーバーは機能しません。 クリックすると機能します。 ロールオーバーを外部にうまく移動出来ていないのでしょうか? 外部ファイルを全部載せると文字数オーバーする為1つだけ記載しました。 アドバイスお願い致します。 <HEAD> <META> <TITLE></TITLE> <LINK rel> </HEAD> <BODY> <script type="text/javascript" src="java1.js"></script> <script type="text/javascript" src="java3.js"></script> <script type="text/javascript" src="java2.js"></script> ★java2.js HPB_SCRIPT_PLD_50 HpbImgPreload('_HPB_ROLLOVER1', 'logo3.gif', 'logot7.gif'); HpbImgPreload('_HPB_ROLLOVER2', 'logo4.gif', 'logot17.gif'); HpbImgPreload('_HPB_ROLLOVER3', 'lo_sel.gif', 'logot19.gif'); HpbImgPreload('_HPB_ROLLOVER4', 'lo_car.gif', 'logot20.gif'); HpbImgPreload('_HPB_ROLLOVER5', 'lo_suki.gif', 'logot21.gif'); HpbImgPreload('_HPB_ROLLOVER6', 'lo_kon.gif', 'logot22.gif'); HpbImgPreload('_HPB_ROLLOVER7', 'lo_home.gif', 'logot23.gif');

  • サムネイルをマウスオーバー時に手のアイコンに変わってほしいのですが。。

    サムネイルをマウスオーバー時に手のアイコンに変わってほしいのですが。。 javascriptでサムネイルをクリックすると同一ページの離れた場所に拡大表示するという指示をしています。問題なく正常に動いていますが、サムネイルをマウスオーバーした際に手のアイコンに変わってほしいのですが、矢印のアイコンのままです。 javascriptの関係上、不可能なのでしょうか?? ソースは以下です。 -------------------------------------------------------------------------------- ■拡大表示させる窓 #zoombox ------------------------------------------------------------------------------- ■サムネイル画像 <img src="img/01_s.jpg" width="118" height="80" alt="s01" onClick="showImage(this);"/> -------------------------------------------------------------------------------- ■javascript function showImage(el) { var imageSrc = el.src.replace(/_s\.jpg$/, ".jpg"); document.getElementById("zoombox").innerHTML = '<img src="' + imageSrc + '">'; }

専門家に質問してみよう