• ベストアンサー

角丸うまくいきません

Javascript初心者です。 自分のサイトでRico.jsというライブラリを使って角丸ボックスを作ろうとしましたが、できませんでした。 で、検証していくと、どうやらbodyタグのonloadに原因があるようでした。 <body onload="MM_preloadImages('img/8hoverfloormop.gif','img～～> 実際にonload以下を外したら角丸が作れたのですが、どういうことでしょうか？ この記述はどこにすればよいのでしょうか？ ご回答よろしくお願いします。

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

  • ベストアンサー
noname#23734
noname#23734
回答No.4

<script type="text/javascript"><!-- window.onload = function () { Rico.Corner.round("box", {corners:"all",bgColor:"#fff"} ); MM_preloadImages('img/8hoverfloormop.gif','img～～ } // --></script> ＞更新をかけると、自動的に<body>が<body onload="MM_preloadImages('img/8hoverfloormop.gif','img～～>となってしまい・・・ これはdreamweaverの使い方の問題ですね。 Rico.jsは関係ないです。 ＞dreamweaverで制作サイト内の一部をライブラリ化しているのですが・・・ これを理解しているのにpreloadimagesについての解説をdreamweaverの取説以外で探すのは無謀に感じます・・ と思ったら、 http://www.gac.jp/article/index.php?stats=question&category=9&id=12856&command=msg こんなのが見つかりました。

skipworth
質問者

お礼

ご回答ありがとうございます。 いろいろやってみてます。 スミマセン取説ってついてましたっけ？ アカデミック版なんですが・・・とりあえず探してみますね。 プリロードイメージは以前ロールオーバーイメージで自分が設定したものでした。 すみません。 実は、ロールオーバーもJavascriptでやってみようと思い、 http://kyosuke.jp/portfolio/javascript/yuga.html でトライしてみたところ、一応できたのですが、 なぜか、上記Ricoを同一ページ内で使っている場合はロールオーバーできませんでした。 同一ページ内に実行できる制限とかあるのでしょうか？ または相性とか？

その他の回答 (3)

noname#23734
noname#23734
回答No.3

>Javascriptをoffにすると、関しては四角くなりますね。 これを承知されているなら良いですね。 一応確認したかったので・・・ ところで”preloadimages”って何処から出てきたのでしょうか。 私が手っ取り早くテストしたところ。 <html> <head> <script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="rico.js"></script> <script type="text/javascript"><!-- window.onload = function () { Rico.Corner.round("box", {corners:"all",bgColor:"#fff"} ); } // --></script> <head> <style type="text/css"> #box { position:absolute; left:0px; top:100px; width:160px; background-color:#44f; } </style> </head> <body> <h1>Rico.js角丸四角形</h1> <form> <input type="button" value="角丸にする" onClick="roundRect()"> </form> <div id="box">Rico.jsを使って角丸四角形を表示</div> </body> </html> これで動きますよ。 例のページは、onClick="roundRect()"で"roundRect()"を動かすのでボタンを押さないと丸くなりませんが、これをonloadに変えれば最初から動くので目的が達成できるわけですね。 それなら例のページでfunction roundRect()になっているところをwindow.onload = function ()に変えるだけで良いでしょうね。 量が多すぎるのでprototype.js、rico.jsを解析していませんけどね。

skipworth
質問者

お礼

al785z29さんご回答ありがとうございます。 初心者でお手間おかけしてますが、早期理解すべくがんばる所存でございます。 なにとぞ宜しくお願いいたします。 dreamweaverで制作サイト内の一部をライブラリ化しているのですが、ライブラリ自体を修正して更新をかけると、自動的に<body>が <body onload="MM_preloadImages('img/8hoverfloormop.gif','img～～> となってしまい、これがあるとなぜかJavascriptが働かないのです。 ちなみにそれをとっぱらって<body>にすると直ります。 で、#1のかたのおっしゃるように（理解できてないですけど・・・書き方間違ってるんですかね？）やってみると、 Javascript自体が働かなくなってしまうのです。

noname#23734
noname#23734
回答No.2

Rico.jsを良く知りませんが、 http://www.google.co.jp/search?hl=ja&rls=GGLG%2CGGLG%3A2006-05%2CGGLG%3Aja&q=Rico.js&btnG=Google+%E6%A4%9C%E7%B4%A2&lr=lang_ja ここの２つ目みたいにやってはダメなんですか？ ところで、質問者さんのサイトはJavaScriptをOFFにしている人は四角い枠を見るのですね？

skipworth
質問者

お礼

ご回答ありがとうございました。 そのページも参照していたのですが、今は手元にある本を見ながらやっています。 しかしどちらもpreloadimagesについての解説が載ってませんけどね。 Javascriptをoffにすると、関しては四角くなりますね。 影響はさほど大きくないです。 Javascriptってこういう勉強をしなければ、意識すらせずに利用しているものだとおもうんですけど、offになっている人＝古いブラウザの人または意図的にoffにしている人たち　という想定でよいでしょうか？

  • ANASTASIAK
  • ベストアンサー率19% (658/3306)
回答No.1

<HEAD>パートに関数でプリロードを書いて その関数にonloadをつければいいです。 window.onload=function Func(){ // pre load image }

skipworth
質問者

お礼

ご回答ありがとうございます。 大変ありがたいのですが、超初心者なもので理解できませんでした。 今、調べながらやっているところです。

skipworth
質問者

補足

ぶっちゃけ、よくわかりませんでした。 これで間違ってなければいいんですけど。 <script type="text/javascript"><!-- window.onload=function Func(){onload="MM_preloadImages('img/hoverotameshi.gif','img/hoverjigyousho.gif','img/hovernavifloormop.gif','img/8hoverhandymop.gif','img/8hovergenkanmat.gif','img/8hoverkitchenfilter.gif','img/8hoverjousuiki.gif','img/8hoverkuukiseijou.gif','img/8hoversenzai.gif','img/8hovermizumawari.gif')" // pre load image } //--></script> bodyタグからは外しましたが、やっぱり角丸ができません。 そもそもで恐縮ですが、preloadimageってどのような働きをしているのですか？ swapimageとごっちゃになってます。

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

関連するQ&A

  • ｊｓファイルの中でのパス

    DreamweaverMX2004のビヘイビアでマウスオーバー処理を使いたいために画像先読み機能をつけると、ヘッダにスクリプトが、また、bodyタグが <body onLoad="MM_preloadImages('img/aaa.gif','img/bbb.gif')"> と、自動的に書き換えられます。 読み込む画像が多くなると、bodyタグの中身が長くなるし、多岐に渡るページで同じスクリプトを使用したいので <body onLoad="Gazou()"> のようにして、JSファイルにまとめたいと思います。 JSファイルは「JS」というフォルダに「script.js」という名称で保存するとして、script.jsの中で画像のパスの書き方で困っています。 script.jsを基準にしたパスで書くのか、呼び出されるhtmlファイルを基準にパスを書くのか、です。 どちらなのでしょうか？

  • プレロードイメージについて

    こんにちは。プレロードイメージについて教えて下さい。 私は、ロールオーバーボタンのover部の画像を、下記のように外部スクリプトとして、bodyに読み込ませています。 <html> <head> <meta 中略 script-type"content="text/javascript"> <script 中略 javascript"src="./preload.js"></script> </head> <body onload="preloadImages()"> ..... </body></html> +----------------------------------- 外部スクリプトファイル名：preload.js 中身のソース： function preloadImages() { (new Image).src = './img/btn/menu_01-over.gif'; (new Image).src = './img/btn/menu_02-over.gif'; (new Image).src = './img/btn/menu_03-over.gif'; } こんな感じです。ですが、本当に、これで良いのかいつも気になっていました。それは、ヘッダ部でこれを呼び出しているので、bodyタグにonloadは要らないのか、 でも関数名「preloadImages()」にしているので、やはり要るのか、よく判らなくなって悩んでいます。 もし、間違っている場合、どうしたら良いのか教えて下さい。よろしくお願いします。

  • onloadイベントで二つの操作をやりたいのですがどうすればいいでしょうか？

    javascriptでファイルを読み込んだらイベントを発生させる"onload"イベントでわからないことがあります。 ↓以下のように一つのonloadイベントで二つの操作をしたいのですがどうすればよいでしょうか？ 分けて記述してしまうと作動しません。 かといって <body onload="MM_preloadImages('/images/global/menu_00_ro.gif'),load_my_rss">とするわけにもいきません。 \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ <script language="javascript"> function load_my_rss(){ get_rss("http://www.*******.jp/make_rss/rss1.rdf"); } window.onload = load_my_rss; </script> <body onload="MM_preloadImages('/images/global/menu_00_ro.gif')"> \\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\\ どうすれば↓の二つの操作をほぼ同時に行えるでしょうか？ window.onload = load_my_rss; onload="MM_preloadImages どなたかよいアドバイスをお願いします。

  • Dreamweaverでimageのロールオーバー

    Dreamweaverを使ってimageボタンのロールオーバーを指定すると <head>内に記述されるjavascriptのほか、<body>タグの中にも以下のタグが記述されます。 <body onLoad="MM_preloadImages('menu1_over.gif','menu2_over.gif')"> ()内のgif名はボタンがover時の画像名ですが、ロールオーバーするボタンが膨大だと <body>タグ内も膨大なソース量になってしまいます。 試しに削除してみたところIEでは正常にロールオーバーが動作します。 上記の記述は何を意味しているのでしょうか。 不足な情報があれば補足させていただきますので、お知恵をお貸し下さい。

  • スクリプトエラーを修正できません。

    スクリプトエラーがでて困っています。 オブジェクトを指定してください。 とのこと。 エラーのラインのタグは以下です。 どうしたらいいのか、どなたか教えてください。 <BODY bgcolor="#FFFFFF" onload="MM_preloadImages('images/side_otoiawase2.gif','images/side_kaisya2.gif','images/side_tokutei2.gif','images/bottan_seikaino2.gif');" <a name="top"><!--アクセス解析タグ　ここから--><script language="JavaScript" src="http://analyzer2.fc2.com/analyzer.js?uid=777967"></script>

  • 外部参照の時のロールオーバーがわからない！

    　ちょっと長くなり失礼します。ドリームウェバーでロールオーバーを作ってみて、それを外部読み込みの形にしたくやってみやのですが、オンマウスの時に画像が変わりません。　どうかまちがいを教えてください。 ＨＴＭＬファイル <html> <head> <title>ためし</title> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <script type="text/javascript" src="b.js"> </script> </head> <body bgcolor="#FFFFFF" text="#000000" onLoad="MM_preloadImages('b.gif')"> <script type="text/javascript" src="a.js"> </script> </body> </html> ”ａ.ｊｓ”ファイル document.write("<a href='http://okweb.jp/' onMouseOut='MM_swapImgRestore()' onMouseOver='MM_swapImage('Image1','','b.gif',1)'><img name='Image1' border='0' src='a.gif'></a>");

  • 引数のない関数

    何度もすいませんが教えてください。 function MM_preloadImages() { //v3.0 var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array(); var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++) if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}} } 上記の関数ですが、 <body onLoad="MM_preloadImages('img/aaa.gif','img/bbb.gif','img/ccc.gif')> という使い方をしています。 引数が宣言されていなくても成り立つのはなぜでしょうか。 教えてください。

  • 外部javascriptの重複を防ぐには

    簡単なタグを貼り付けるだけで使えるブログパーツを、javascriptで作ろうとしています。 ＜■コード(1)＞ <script type="text/javascript" src="http://ex.com/js/test.js"></script> <div> <img class="imgobj" src="http://ex.com/dm.gif" width=1 height=1/> </div> 上記のように外部JSを読み、そのJSの中でimgタグのonloadイベントを記述し、そのイベントの処理でimgタグの直前にテキストを書き出すようにしています。これはidなどを意識しなくてもタグを貼りつけた場所に出力されるようにするための措置です。 上記は単独で貼り付ける場合はうまくいったのですが、同じコードを複數貼り付けると外部JSの衝突でエラーになります。よって外部JSの読み込みを動的にしてみました。 ＜■コード(2)＞ <script type="text/javascript"> var obj=""; obj = document.getElementById("example_tag"); if( !obj ){ var ele = document.createElement("script"); ele.id = "amacusplus_scriptfile"; ele.type = "text/javascript"; ele.src = "http://ex.com/test.js"; document.body.appendChild(ele); } </script> <div> <img class="imgobj" src="http://ex.com/dm.gif" width=1 height=1/> </div> このソースを同じページ内で二箇所貼り付けると、 今度は動的な外部JSの読み込みとimgタグのonload処理の発生タイミングが微妙なため挙動不審になってしまいました。成功したり失敗したり・・・。 とこのような状況で煮詰まっています。 質問は （1）外部JSの動的な読み込みの後に、明示的にimgのonloadイベントを起こすことはできないか？ がメインですが、他のアプローチで解決できればそれでもいいので （2）<script>～</script>内に書いたjavascript内で、現在位置を知る方法（scriptエレメントを知る方法） （3）複数回読まれても重複を起こさない外部JSやその読み込み方法の書き方 などなにかヒントになるようなことを教えて頂きたいのです。 よろしくお願いします。

  • ロールオーバーの「プリロード」の設定で…

    JavaScriptのロールオーバーで画像のプリロードを行いたいのですが、 <body onLoad=”MM_preloadImages(～～～というように、BODYの中に書く以外に、方法はありませんか？いろいろ検索してみましたがわかりませんでした。 「JavaScript」の書き方講座、のようなサイトではなく、すぐに使えるサンプルソースが載っているものが良いです。

  • スワップイメージが上手く動作しません(泣)

    JavaScript初心者です。 Dreamweaverを使用して、スワップイメージをしているのですが、 上手く動作してくれない場合があります。 いろいろ調べている内に、onloadが引っかかっているのでは？とも思ったのですが、原因がよくわかりません。 スワップイメージを使用しているページで、 body部分に【onload=MM_preloadImages】を入れると、 他のJavaScript部分が動作しなくなってしまうのです。 その為、body部分のonloadを外したら一部は問題なく動作したのですが、 その他スワップイメージの部分は、 onmouseoverをした際、スワップされた画像のまま戻らなくなってしまいます。 どうもonloadの部分がよくわからないのですが、 何故、MM_preloadImagesを書かなくても問題無く動作する場合があるのでしょう？ 逆にどうしてMM_preloadImagesを書くとMM_swapImgRestoreが作動しない場合があるのでしょう？ ネットで検索したのですが、どうも上手く検索出来ず、 今から本を読んで一からJavaScriptを勉強する猶予も無いのです。 もちろん、時間が出来たらもっと勉強していくつもりです。 恥ずかしい質問なのかもしれませんが…。 どなたか解決策やヒント等を教えて頂けないでしょうか。 どうぞよろしくお願い致します。

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する