- 締切済み
javascriptでの画像の先読みについて（その１）
愚かな私をお助けください…。 現在、マウス操作で矢印を自由に作成するツールを作ろうと思い、その部分をjavascriptで行おうと思ってます。 矢印は一次元上にあり、イメージ的には数直線上で不等式の解を図解したものを縦にしたようなものです。 それで20×3pixのgif画像を、それぞれに name="image" onmouseover="on_image(×)" onmouseout="off_image(×)" onClick="mouse_click()" をくっつけて144個縦に並べてます（×は0～143の値が入ってます）。 配列変数'flag'を使い、矢印の始点（または終点）の位置に'1'、それ以外を'0'として、矢印を表示するように作りました。 それで、一応思ったとおりの動作はするのですが、どうもgifを144回読み込みに行っているようで、すご～く動作が遅くなってしまいます。 gif画像の先読みは行っているつもりなんですが、うまくいっていないのでしょうか？ ちなみに一度ブラウザの「戻る」ボタンを押し、再度「進む」ボタンを押した後は、画像を読みに行かずにサクサクと動きます。 原因がわかりません。配列変数がまずいのでしょうか？ ソースのどの部分が問題なのかわからないため、該当部分のソースを全て載せようと思いましたが、数制限に引っかかってしまったので、見づらくて申し訳ないのですが、その２に続かさせてください…。 すみません。
- miku0004
- お礼率91% (31/34)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- OKWebAdmin
- ベストアンサー率0% (0/5)
管理者より： 続きの質問があるのでそちらをご参照下さい
関連するQ&A
- javascriptでの画像の先読みについて（その２）
その１からの続きです。。 以下が私の作ったソースです。 <script language="JavaScript"> <!-- var flag=new Array(); var image=new Array(); var img=new Array(); // gif画像の先読み img[0]=new Image();img[0].src="透明gif"; img[1]=new Image();img[1].src="上向き矢印.gif"; img[2]=new Image();img[2].src="矢印の線.gif"; img[3]=new Image();img[3].src="下向き矢印.gif"; var on_mouse=144; for (i=0;i<144;i++) {flag[i] = 0;} function on_image(num){ on_image_no = num; //マウスの位置(0～143) } function off_image(num){ on_image_no = 144; //範囲外 } function mouse_click(){ flag[on_image_no]=(flag[on_image_no]==0); var image_no=0; for(i=0;i<144;i++){ if(flag[i]){ //フラグが立っていたら矢印の始点or終点を表示 if(image_no==0){ document.image[i].src=img[1].src; //上向き矢印 image_no=2; //次から矢印の線を表示 }else{ document.image[i].src=img[3].src; //下向き矢印 image_no=0; //次から透明なgifを表示 } }else{document.image[i].src=img[image_no].src;} } } //--> </script> ＃関係ないですけど、off_image()はいらないかも…。 以上、質問が長くなってしまって大変恐縮ですが、どなたか私をお助けください。 よろしくお願いいたします。 関連URL:http://oshiete1.goo.ne.jp/kotaeru.php3?q=319633
- ベストアンサー
- JavaScript
- 簡単なJavaScriptなんですが
セル内にボタン（menu01.gif)があって、マウスオーバーしたら別の画像(menu02.gif)に変わり、クリックたら別のファイルに飛ぶ、というJavaScriptを教えてください。 Dreamweaver３で作ったら、OnClickの設定ができずマウスオーバーしただけでURLに飛んでしまうのですがどう直していいのか分からないのでよろしくお願いします。 <td> <a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image10','','img/menu02.gif',1);MM_goToURL('parent','index.html');return document.MM_returnValue"> <img src="img/menu01.gif" width="167" height="20" border="0" name="Image10"> </a> </td>
- ベストアンサー
- JavaScript
- JPGにオンマウス動作で透過GIF画像や透過PNG画像を重ねたいのです
JPGにオンマウス動作で透過GIF画像や透過PNG画像を重ねたいのです JPG にオンマウス動作で透過GIF画像や透過PNG画像を重ねたいのですが、良い方法はありませんでしょうか？ 例えば、分かれ道を撮したJPG画像に、マウスのカーソルを合わせる（載せる）と、JPG画像の上に、矢印だけが描かれた透過GIF画像、もしくは透過 PNG画像が表示されるようにしたいのです。 現在はJPG画像に矢印を書き加えたものを、onmouseoverで差し替え表示をする方法を行っていますが、書き加えられた矢印などの画像はJPG圧縮や縦横サイズの関係でノイズが載ってしまい、イマイチきれいじゃありません。 マウスの動作で透過GIF画像や透過PNG画像を重ねたり、外したりできる良い方法があればお教えください。
- 締切済み
- HTML
- オンマウスで画像を変えたい。
オンマウスで画像を変えたいのですが、 ------------------------------------------ <img src="画像１URl" onmouseover="this.src='画像２URl';" onmouseout="this.src='画像１URl';"> ------------------------------------------ や、 ------------------------------------------ <script> var src1="http://img.yahoo.co.jp/images/phonebook/jp_pb.gif" var src2="http://i.yimg.jp/images/news/yjnews.gif" </script> <img src="http://img.yahoo.co.jp/images/phonebook/jp_pb.gif" onMouseOver="this.src=src2" onMouseOut="this.src=src1" /> ------------------------------------------ など。 どれを使っていいか分からず困っています。 これぞ、っていうタグがあったらよろしくお願いします。
- ベストアンサー
- HTML
- 画像が2枚入れ替わるようにしたい
ポインタ（マウス）を載せると画像が変わる。画像が2枚入れ替わるようにしたいのですが・・・ http://www.coffee-minton.com/sinkiro/mokuji10-2-5.html ( ↑ このサイトに説明がありました ） 下の２枚の画像を入れ替えたいのですが、うまくできないのですが、どなたかご指導くださいませ <IMG SRC="http://image.space.rakuten.co.jp/lg01/58/0000425358/24/img9de5c6f5zik6zj.jpeg" width="154" height="130"> <IMG SRC="http://image.space.rakuten.co.jp/lg01/58/0000425358/23/img19e2a209zik8zj.jpeg" width="125" height="150"> -------------------------------------------------------------- 見本のタグ <!--http://coffee-minton.com/sinkiro/ --> <IMG src="0-11.gif" width="248" height="174" onmouseover= "this.src='0-1.gif'" onmouseout="this.src='0-11.gif'"> --------------------------------------------------------------- 下記のようにやってみたのですが、うまくいきません＾＾； <!--http://coffee-minton.com/sinkiro/ --> <IMG src="http://image.space.rakuten.co.jp/lg01/58/0000425358/23/img19e2a209zik8zj.jpeg" width="125" height="150" onmouseover= "this.src="http://image.space.rakuten.co.jp/lg01/58/0000425358/24/img9de5c6f5zik6zj.jpeg" onmouseout="this.src="http://image.space.rakuten.co.jp/lg01/58/0000425358/23/img19e2a209zik8zj.jpe"> --------------------------------------------------------------
- 締切済み
- ブログ
- onMouseOverがうまくいきません
JavaScriptで、プルダウンメニュー及びマウスで触れたときのメニューの画像変更を行っていますがうまくいきません。プルダウンはうまくいきますが、画像変更しないのです。 どうやらプルダウンメニューの表示・非表示に使っているonMouseOverとonMouseOutが、画像変更のそれらとダブっているためだと思うのですが…。Macでは動作するのですが、Winでは動作しないのです。 <div id="xx" class="yy" onMouseOver="show('xx');" onMouseOut="hide('xx');"> <a href="xx.html" onMouseOver='xxxx' onMouseOut='yyyy'><img src="photo.gif" name="aa"></a> </div> うまく両方機能させるいい方法はないでしょうか？
- ベストアンサー
- JavaScript
- イベントハンドラを完全に外部化にしたい
イベントハンドラをなんとか、完全に外部ファイルにしたいと考えています。 <ul><li> <a href="a.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image1','','../ig/c1.gif',1)"> <img src="../ig1.gif" alt="aaa" name="Image1" id="Image1" /></a></li> <li> <a href="b.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','../ig/c2.gif',1)"> <img src="../ig2.gif" alt="bb" name="Image2" id="Image2" /></a></li> ・ ・ ・ </ul> サイトのナビ部分のソースです。この中にあるonmouseout、やonmouseoverを外部ファイルにして、 <ul><li> <a href="a.html"><img ～></li> <a href="b.html"><img ～></li>・ ・ ・ </ul>というすっきりした形にできないものでしょうか… イベント登録する関数を作って、ページのonloadで実行しておく という感じかな…と考えていたりするんですが… どのように記述すればよいか お知恵をお貸しください。 ※MM_swapImgRestoreやMM_swapImageはすでに外部化済です
- ベストアンサー
- JavaScript
- Javascript上での”、’の使い分け
こんにちは、 最近、HTMLの勉強をやり直しています。（といっても詳しいわけではありません。） Javascriptで"と’の二つを使います。 例）ボタン画像の切り替え <a href="javascript:void(0);" onmouseover="document.btn.src='btn2.gif';" onmouseout="document.btn.src='btn1.gif';"> <img src="btn1.gif" name="btn" border="0" width="120" height="40"></a> この際に、”、’の使いわけがありますが、このことをうまく理解できません。 ほか、Javascriptとは離れますが、 Styleseetで、 HTMLタグでは、色の指定する場合、"#ffffff"というように”を使いますが、Styleseetでは使っていません。 これも自分の中でうまく納得できていません。 何か、こうだよっていううまい説明がありましたら教えてください。よろしくお願いします。
- ベストアンサー
- JavaScript
- インラインフレームに画像を使うと枠がでる＞＜
HPについての質問です＞＜ HTMLタグを使用して作成してるんですが・・・ インラインフレームでつくりたいんです。 http://www.htmq.com/html/iframe.shtml ↑これのかんじで おしたらURLがフレームにでるかんじでつくりたいんですが・・・ ここのはボタンが字なんですが・・・私は画像でつくりたいんです＞＜ 画像だけでなくさらにロールオーバー（http://masaboo.cside.com/new_source/sr_15.html） でつくろうと思って頑張ってやったんですが・・・。 <a href="※※.html" target="sample"><img src="※※.gif" onmouseover="this.src='※※.gif'" onmouseout="this.src='※※.gif'"></a><br> こんな感じであと下にフレームをつけて <IFRAME src="※※.html" width="600" height="400" scrolling="NO" frameborder="0" style="border:1px dotted #000000;"></IFRAME> こんな感じでつくったら、なぜか画像（ボタン）に枠がついてしまって＞＜ どうやったら消せますか！？ 教えて下さい、お願いします＞＜ （※画像はこうなってしまったってかんじなんですが・・・※）
- ベストアンサー
- その他([技術者向] コンピューター)
- ボタンに画像を使えません
お世話になります。 セレクトボックスでリンクする（ボタン付き） http://www.tagindex.com/javascript/link/select2.html 上記のサイトの「input type="button"」のボタンでリンクすることはできたのですが、 <input type="image" onClick="jump()" src="画像.gif" alt="" width="201" height="46" border="0" onmouseover="this.src='画像_on.gif'" onmouseout="this.src='画像.gif'"> ↑のようにtypeをimageにして画像をボタンに使おうとしますと、 「?select=&x=92&y=33」とURLの末尾に追加されるだけでリンクができません。 上記サイトのjavascriptを「input type="image"」のボタンで使用するには どのようにすればよろしいでしょうか。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
