ロールオーバー効果が実現できない理由

このQ&Aのポイント
  • ホームページビルダー10にてホームページを作成中ですが、リンクメニューのボタンでロールオーバー効果を使おうとしていますが、うまくいきません。HTMLで確認しても分かりません。何が原因なのでしょうか?
  • ホームページビルダー10を使用してホームページを作成しています。リンクメニューのボタンにロールオーバー効果を追加したいのですが、手順どおりに行ってもうまくいきません。HTMLで確認しても原因が分かりません。どうすれば実現できるのでしょうか?
  • ホームページビルダー10を使用してホームページを作成していますが、リンクメニューのボタンにロールオーバー効果を追加したいと思っています。しかし、手順通りに行っても効果が現れません。HTMLの知識があまりないため、何が原因なのか分かりません。アドバイスをいただけますか?
回答を見る
  • ベストアンサー

ロールオーバー効果にならない。

ロールオーバー効果にならない。 宜しくお願いします。 ホームページビルダー10にてホームページを作成中です。 リンクメニューのボタンでロールオーバー効果を使おうと定番手順(参考書の記載通り)に やっているのですが、うまくいきません。 同手順でこのページはできて、このページはできない!?って感じです。 HTMLで確認してもよく分かりません(ほど素人ですが・・・)。 ご教授宜しくお願いします。 ちなみに・・・ <ならないパターン> <td height="37"><a href="http://ブログID.fc2.com/" id="_HPB_ROLLOVER8" onmouseout="HpbImgSwap('_HPB_ROLLOVER8', 'xxxx.gif');" onmouseover="HpbImgSwap('_HPB_ROLLOVER8', 'xxxx.gif');" target="_blank"><img src="xxxx.gif" width="190" height="37" border="0" name="_HPB_ROLLOVER8" /></a><a href="#"> </a></td> <なるパターン> <DIV style="top : 183px;left : 498px; position : absolute; z-index : 3; " id="Layer3"><A href="home.html" id="_HPB_ROLLOVER1" onmouseout="HpbImgSwap('_HPB_ROLLOVER1', 'xxxx.gif');" onmouseover="HpbImgSwap('_HPB_ROLLOVER1', 'xxxx.gif');"><IMG src="xxxx" width="172" height="139" border="0" name="_HPB_ROLLOVER1"></A></DIV> どちらとも 挿入→画像効果→ロールオーバー効果の手順にて作成しました。 宜しくお願いします。

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

  • ベストアンサー
  • Z31
  • ベストアンサー率37% (735/1957)
回答No.1

ビルダー11では、挿入する画像を選んで、次にどのロールオーバー効果にするかの画像が選べます。たとえば、カラーをモノクロ画像にするとかです。 そして、その効果をすぐにマウスを載せて確認が出来ますが、その確認はいかがなんですか?

関連するQ&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> 何がいけないのでしょうか? このソースの前に何か記述すべきなのでしょうか?

  • ロールオーバーと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>

  • 記述の仕方を教えて下さい。

    以下のHTMLをdocument.writeを使って記述しているのですが、エラーになって動きません。 多分”と’の使い方が原因だと思います。 記述の仕方を教えて下さい。 <A id="_HPB_ROLLOVER1" onmouseout="HpbImgSwap('_HPB_ROLLOVER1','hina_n_image.gif');" onmouseover="HpbImgSwap('_HPB_ROLLOVER1','hina_m_image.gif');"><IMG src="hina_n_image.gif" width="364" height="203" border="0" name="_HPB_ROLLOVER1"></A>

  • "戻る" と "ロールオーバー"

    前のページへ戻るボタンをつくりました。 ロールオーバーはできますが、前のページへ戻れません。 どこが悪いのかわかる方、回答お願いします。 <a href="javascript:history.back()" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('navi11','','images/form/1101.gif',1)"><img src="images/form/11.gif" alt="前のページへ戻ります。" name="navi11" width="190" height="26" border="0"></a>

  • ロールオーバーで…

    ホームページビルダーでページを作っています。 横に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
  • ロールオーバー画像の上にテキストを置く方法

    サイトのヘッダのメニューは現在ロールオーバーで表現しています。その画像上にテキストを置きたいのですが、記述方法がわかりません。ぜひ、ご教授ください。。 ----------- <td> <a href="javascript:main_location('http://アドレス);" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('mn_01','','/images/mn_01o.gif','mn_01txt','','/images/mn_01txto.gif',1)"><img src="/images/mn_01.gif" width="150" height="24" alt="main" border="0" name="mn_01"></a> </td> --------- 上記が対象部分のhtmlです。この中にどうやってテキストを記述していいのでしょうか? よろしくお願いします。

  • ロールオーバーを立てに並べると隙間があいてします

    ホームページのロールオーバーイメージを 立てに並べたところ どうしてもIEでロゴとロゴの間に 隙間が開いてしまいます。 これを詰める方法はないでしょうか? ファイヤーフォックスだと問題なく表示されます。 プログラムは以下のとおりです。 <a href="#" onMouseOver="document.mn0.src='navi_hove9.jpg'"onMouseOut="document.mn0.src='navi8.jpg'"><img src="navi7.jpg" name="mn0" width="203" height="48" border="0" /></a> <a href="#" onMouseOver="document.mn1.src='navi6'"onMouseOut="document.mn1.src='navi/nav4.jpg'"><img src="navi5.jpg"name="mn1"width="203" height="48"border="0" /></a> <a href="#"onMouseOver="document.mn2.src='navi3'" onMouseOut="document.mn2.src='navi2.jpg'"> <img src="navi1" name="mn2" width="203" height="48" border="0" /> </a> よろしくお願いします。

  • IEだとうまく表示できません。ソースのどこが悪いのでしょうか

    画像はIEのものです。Firefoxだとうまく表示されるのですが、IEだと大きく崩れます。 いろいろとデバックしてみましたが、どうしてもわかりません。ソースのどこが悪いのでしょうか?本当に困っています。 問題点は以下の二つです。 (1)タイトルの右の画像が下に落ちる。 (2)画面中段の「Jan」という画像が下に落ちる。 特に困っているのが、reset.cssでブラウザデフォルトのスタイルを修正しているはずなのにうまくいかない、という点です。以前、ホームページ・ビルダーを使ったことがあり、自動的にソースが修正されてしまいました。その後、表示がおかしくなってしまったのです。 以下、ソースです。 html↓ --------------------------------------------------------- <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "​http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">​ <html xmlns="​http://www.w3.org/1999/xhtml">​ <head> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta name="description" content="製品化するサイトです" /> <meta name="keywords" content="製品化" /> <meta name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 11.0.0.0 for Windows" /> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>タイトル</title> <style type="text/css"> body { background-image:url(image/back.gif);background-repeat:repeat-x; } </style> <link href="css/reset.css" rel="stylesheet" type="text/css" /> <link href="css/index.css" rel="stylesheet" type="text/css" /> <link href="css/main.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="wrap"> <div id="header"><a href="index.html"><img id="title" src="image/title.gif" width="614" height="160" alt="タイトル" /></a> <img id="title image" src="image/title image.gif" width="160" height="160" alt=" バナー" /></div> <div id="contents"> <div id="sidebar"> <a id="_HPB_ROLLOVER4" onmouseout="HpbImgSwap('_HPB_ROLLOVER4', 'image/down.gif');" onmouseover="HpbImgSwap('_HPB_ROLLOVER4', 'image/down click.gif');" href="#"><img id="down" src="image/down.gif" width="140" height="130" alt="欲しい人" name="_HPB_ROLLOVER4" /></a> <a id="_HPB_ROLLOVER1" onmouseout="HpbImgSwap('_HPB_ROLLOVER1', 'image/sidebar site.gif');" onmouseover="HpbImgSwap('_HPB_ROLLOVER1', 'image/sidebar site clilck.gif');" href="about this site.html"><img src="image/sidebar site.gif" </div> </div> </div> </body> </html> --------------------------------------------------------- reset.css↓ --------------------------------------------------------- @charset "UTF-8"; body,h1,h2,h3,h4,h5,h6,div,p,ul,ol,li,dl,dt,dd,form,input,textarea,pre{margin:0;padding:0;} ul,li{list-style-type:none;} table,img{border:0px;} body,h1,h2,h3,h4,h5,h6,td,th,p,div,input,textarea,pre,ul,ol{ font-family: 'ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo, Verdana,'MS Pゴシック',sans-serif; font-weight:normal; } a:focus {outline:none} em{font-style:normal;} hr{display:none;} address{font-style:normal;} *{line-height:1.0;} ---------------------------------------------------------

    • ベストアンサー
    • HTML
  • もう一度onclickを利用した伸縮メニューの作成方法を教えてください

    もう一度onclickを利用した伸縮メニューの作成方法を教えてください。 以前"onclickを利用した伸縮メニューの作成方法を教えてください。"と質問に教えていただき思ったように動きとても感謝しているですが、自分の作成しているHPにソースを書き込んでみたら伸縮メニューが開いたまま閉じませんでした。たぶん自分のページに、教えていただいたソース以外に他のサンプルから引用したスクリプトがあるので上手く行かないのではないかと思ったので再度質問させてください。 作成したページのソースが長くなるので全部書き込めないのですが、おおまかには、メインメニューが5つありロールオーバー効果を持たせています。その各メニューはonmouseoverとoutでポップアップメニュを表示させるようにしています。 作成しているソフトはホームページビルバーV14です。 別なサンプルから引用したスクリプトは、 <SCRIPT language="JavaScript"> <!-- var tid,pm_no=""; function pm_op(sel){ if(pm_no!=""&&pm_no!=document.getElementById(sel)){pm_no.style.overflow='hidden';} pm_no=document.getElementById(sel); clearTimeout(tid); pm_no.style.overflow='visible'; } function pm_cl(sel){ pm_no=document.getElementById(sel); clearTimeout(tid); tid=setTimeout("pm_no.style.overflow='hidden';",500); } //--> </SCRIPT> ソースは、 <DIV id="cont" align="center"> <TABLE width="870" border="0" cellspacing="0" cellpadding="0"> <TBODY> <TR> <TD align="center"> <CENTER> <DIV style="width : 850px;position : relative;top : 0px;left : 0px;"> <DIV class="menu" style="left:0;" id="f1" onmouseover="pm_op(this.id);" onmouseout="pm_cl(this.id);"> <CENTER> <DIV style="text-align : center;border-style : none;width : 170px;height : 32px;bottom : auto;"><A href="#" id="HPB_ROLLOVER4" name="HPB_ROLLOVER4" onmouseout="HpbImgSwap('HPB_ROLLOVER4', 'image/n_image1.gif');" onmouseover="HpbImgSwap('HPB_ROLLOVER4', 'image/m_image1.gif');"><IMG src="image/n_image1.gif" width="170" height="32" border="0" name="HPB_ROLLOVER4"></A></DIV> <TABLE style="font-size:12px;"> <TR> . . . </TBODY> </TABLE> でid="f1"から"f5"で5つのメニューが動くようにしています。 先日教えていただいたソースと現在自分の作成したページのソースは別々なページとしては動くのですが同一ページに記述してプレビューすると先日教えていただいた"onclick"は開いたままで、動作的には"onclick"のメニューをマウスでクリックすると開いたままのメニューが一度閉じて再度開く動作をしてしまいます。 CSSがまだまだ未熟でわかり難いところも多々ありますが、わかればで結構です。 どなたか教えてください。

専門家に質問してみよう