- ベストアンサー
onloadの同一ページ内の干渉対策
t_netbugの回答
- t_netbug
- ベストアンサー率34% (15/44)
imgタグに付けているonloadを代わりにclass名へ変更し、bodyタグにonloadイベントをくっつけて、bodyのonload内でクラス名によってwidth,heightの幅を振り分けるようにしたらいかがでしょうか？
関連するQ&A
- onloadイベント発火条件
window.onload <body onload="function(){}"> <img src="hoge.jpg" onload="function(){}"> <script src="hoge" onload="funct" でも <div>や<p>ではonloadイベントは無いですよね？ どういう場合にonloadイベントは発火するんでしょうか？ window , body ,その他ｓｒｃがあるdom でしょうか？ ブラウザ依存もあるでしょうが、仕様的なものはどうなってますでしょうか？
- ベストアンサー
- JavaScript
- Javaの画像切り替え、同一ページに複数設置する
同一ページ内の複数の場所に、外部のファイルで数秒毎に画像が切り替わる動作を指定したスクリプトを読み込ませたいのですが上手くいきません。 Java初心者で、いろいろ検索して回ったのですが、見当たらなく、ご検討よろしくお願いします。 以下、実装したい内容 <body> <img src="img/1.jpg" name="img1"> // 画像(1)（2秒毎に、(2)、(3)に画像が切り替わる） <img src="img/4.jpg" name="img4"> // 画像(4)（2秒毎に、(5)、(6)に画像が切り替わる） 以下、上記の動作をする画像を複数設置。 </body> 外部Javaソース chgCount = 0; mypic = new Array ( "img/1.jpg", "img/2.jpg", "img/3.jpg"); function imgChanger() { chgCount++; chgCount %= 3; document.img1.src = mypic[chgCount]; } setInterval("imgChanger()",2000);
- ベストアンサー
- JavaScript
- window.onloadに関数を指定したいです。
window.onloadに関数を指定したいです。 以下のfoge関数をwindow.onloadに入れる場合は、どうすればいいのでしょうか？ function test(){ this.foge = function(){ } } 以下のような感じで、fogeを指定したいのですが。 window.onload=function(){test()} function test(){ } どうすればいいのでしょうか？ よろしくお願いします。
- ベストアンサー
- JavaScript
- 画像の先読み
画像の先読み 拡大画像の表示場所とサムネイルの表示場所がありサムネイルをクリックすると拡大画像の場所にクリックしたサムネイルが拡大表示されるものを作っています。 以下のソースで試しており動作は問題ないのですが動作がぎこちないです。 具体的にはサムネイルをクリックすると拡大画像の場所がフェードアウトしフェードインします。 ※ここまでは正常 フェードインしたかと思いきやクリックする前の画像が1秒程表示されその後クリックした画像に切り替わる感じでフェードの効果が全く無意味になってしまいます^^; 事情があり画像の出力をphpで行っているのが原因かと思ったのですが単純にキャッシュの問題かとも思い画像の先読みなどを組み込めればいいのですがどのようにすれば可能でしょうか？ [html] <p id="imgMain"><img src="resize.php?file=/imgimg01.jpg" alt="" id="target" /></p> <ul id="gallery"> <li><a href="resize.php?file=/img/img01.jpg" ><img src="resize.php?file=/img/img01.jpg&x=173" alt="" /></a></li> <li><a href="resize.php?file=/img/img02.jpg"><img src="resize.php?file=/img/img02.jpg&x=173" alt="" /></a></li> <li><a href="resize.php?file=/img/img03.jpg"><img src="resize.php?file=/img/img03.jpg&x=173" alt="" /></a></li> </ul> [js] $(document).ready( function() { $("#gallery a img") .fadeTo(1, 1) .hover( function() { $(this).fadeTo(200, 0.5); }, function() { $(this).fadeTo(500, 1); } ) $("#gallery a").click(function() { var changeSrc = $(this).attr("href"); $("#target").fadeOut( "slow", function() { $(this).attr("src", changeSrc); $(this).fadeIn(); } ); return false; }); });
- ベストアンサー
- JavaScript
- HTMLページ内のタグに対してのイベント
HTMLページ内のタグに対してのイベント getElementsByTagNameで指定したタグの部分（画像やリンク）をクリックすると関数を呼び出すという動作をやりたいのですが、どうも上手くいきません。 試しに下記のようなプログラムを作ってみたのですが、ページを表示した後すぐにalert関数が呼び出されてしまいます。 あるタグの部分を押したときに関数を呼び出すというやり方を知っている方がおられましたら、ご教授願います。 ひとつひとつにIDを割り当てるというやり方でなくて、タグ別にイベントを判定するやり方を考えています。 <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title></title> <script type="text/javascript"> window.onload = function ini(){ document.getElementsByTagName("img").onClick = alert("これは画像です"); } </script> </head> <body> <img src="..." /> <img src="..." /> <img src="..." /> <img src="..." /> </body> </html>
- ベストアンサー
- JavaScript
- window.onLoad について
<body> タグに、onload=関数名・・・ と記述するとなぜかオブジェクトがありませんとかで 実行されない時があるため、 <head>タグ内に <script type="text/javascript"> window.onLoad=function(){ 関数名} </script> と記述してみたところ、まったく関数が動作しなくなってしまいました。 ステータスには「ページが表示されました」とでていて、スクリプトエラーにもなっていないようです。 原因がわからず、それならば・・・ htmlを順番に表示していくのだから、htmlの最後のほうに記述すればいいのでは？ と思い、 </body>の直前に <script type="text/javascript"> 関数名 ← onloadで動作させる関数 </script> と記述してみたところ、うまく表示できました。 この記述方法って正しいのでしょうか？ 環境に依存するのか、毎回悩まされるし、毎回対処方法が違ったりしているので ホントに困っています。 アドバイスお願いします。 #何故 window.onLoad=function(){ 関数名 } ではまったく動かなかったのでしょう。。。
- 締切済み
- JavaScript
- jqueryで読み込みが終わった画像から処理する
現在、下記のコードで画像を読み込んで処理をしているのですが、 画像の読み込みを待たずに、画像のリサイズ処理が実行されて画像が表示されない 現象に陥りました。 読み込みが終わった画像から処理する方法を ご教授ください。 よろしくお願いいたします。 $.each(json.img,function(){ $('<img/>').attr('src',this).appendTo(images); }); preview.append(images); //この後にリサイズ処理
- ベストアンサー
- AJAX
- 1ページに複数ランダム画像表示で重複しないスクリプトを探しています
タイトルの通り、1ページに複数設置しても重複しないランダム画像表示スクリプトを探しています。 <img src="ランダムPHPのアドレス"><img src="ランダムPHPのアドレス"> のような感じにしても2個とも違う画像がでるものを探してます。 以前見つけたのですが失念してしまい、質問させていただくことになりました。 理想的なものは、画像のあるフォルダを指定するだけでいいものなんですが、1つ1つ画像を指定するものでも構いません。 PHPと限らずCGIでもいいです。 もし知ってらっしゃる方がいましたらよろしくお願いいたします。
- ベストアンサー
- PHP
- 一つのページで二つ動かすのはできないですか
画像を次々に変えていくJavaScriptを一つのページで2個使いたいのですが、二つ使うと、表示されません。これでは無理なのでしょうか？ 無理だったら、他に何かいい方法があれば教えてください。 これを使いました。よろしくお願いします。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- num = 18; nme = "img" exp = "gif" cnt = 0; function changeImage() { cnt++; cnt %= num; document.img.src = nme + cnt + "." + exp; } //--> </SCRIPT> </HEAD> <BODY bgcolor="#ffffff" onLoad="setInterval('changeImage()',500)"> <BR><BR> <IMG src="img1.gif" name="img" border="0"> </BODY> </HTML>
- ベストアンサー
- JavaScript
- 固定枠内への最大画像の貼り付け
HTMLで作成された固定枠内に、CGIを使用して複数の画像データを、 1枚ずつ表示させるのですが、現在の状態では画像データの大きさによってレイアウが不均一になってしまいます。 そこで、JavaScriptを利用して、元画像の縦横比を保ったまま、 任意の大きさの枠の中で、画像データの大きい方の長さが枠内いっぱいになるように表示したいのです。 つまり、 縦横比のそれぞれ違った、フレームと画像があり、 その画像を、フレームの中心部から拡大して行ったとき、 縦横いずれか先にフレームに接する大きさのところまで拡大表示される 大きさで表示させたいのですが。 下記のスクリプトでは、縦横共通の最大値しか指定できません。 縦横それぞれに最大値を指定できるようにし、 上記の様に表示させるには、 どの様な記述方があるでしょうか。 ご教授、宜しくお願いします。 （スクリプト要素） size = 120 ; function resize(id) { if (document.images[id].width > document.images[id].height) document.images[id].width = size ; else document.images[id].height = size ; } （BODY要素） <img src="hoge.jpg" id="sample1" onLoad="resize('sample1')" />
- ベストアンサー
- JavaScript
補足
以下のようにしてみたのですが、 うまくいかないようです。 ご指摘、お願いします。 <HEAD> <script type="text/javascript"> function resize1(e) { getElementsByClassName('a'); var size = { width:100, height:100}; var w = size.width / e.width; var h = size.height / e.height; if (w > h) w = h; e.width *= w; } function resize2(e) { getElementsByClassName('b'); var size = { width:100, height:200}; var w = size.width / e.width; var h = size.height / e.height; if (w > h) w = h; e.width *= w; } function resize3(e) { getElementsByClassName('c'); var size = { width:100, height:300}; var w = size.width / e.width; var h = size.height / e.height; if (w > h) w = h; e.width *= w; } </script> </HEAD> <BODY onload="resize1();resize1();resize2();resize3()"> <img src="" class="a"> <img src="" class="b"> <img src="" class="c"> </BODY>