- ベストアンサー
JavaScriptで画像を横移動
JavaScriptを使って画像を横移動させたいと思っています。 イメージとしてはこちらのサイトにある動きそのままなのですが、 http://www.wind.sannet.ne.jp/alfix/javascript/img/2.html <BODY onLoad="moveImgX()">を使わずに、 <HEAD>～</HEAD>内への記述と、 <IMG～>の記述だけで実行されるようなものが理想です。 ご教授お願い致します。
- mi-tsu-ki
- お礼率52% (9/17)
- JavaScript
- 回答数1
- ありがとう数3
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
一番簡単な方法としては、 bodyタグ内のonload="～"を消して、suctiptタグ内の最後にでも window.onload = moveImgX; の1行を追加しておく。 （全角空白は半角に） 対象のidとか移動する位置などは、表示内容に応じた調整が必要でしょう。
関連するQ&A
- javascriptを使って画像を切り替える
javascriptを使って画像（id="chengeImg"）を切り替えたいと思っています。 画像はsamp0.jpg～samp4.jpgの計5枚 ただ、問題があって、 画像によって移り替わる時間を変えたいんです。（一定ではない） setTimeoutの引数(time)と画像を、どう結びつければよいのかが 分からず困っています。 それぞれ、 画像0の時は5000ミリ秒 画像1の時は4000ミリ秒 画像2の時は3000ミリ秒 … と移り変わる速度を変えたいのです。 一応、timeは配列がいいのかと配列にしてみました それが良いのかどうかも定かではないのですが… どのようにすれば、時間が一定でない画像切り替えが可能になるでしょうか？ スクリプトを詳しく教えていただけると、ありがたいです。 以下、javascriptの一部を記します。 【js】ファイル(imagechange.js)------ window.onload=anime; var img=new Array(5); img[0]=new Image(); img[1]=new Image(); img[2]=new Image(); img[3]=new Image(); img[4]=new Image(); img[0].src="samp0.jpg"; img[1].src="samp1.jpg"; img[2].src="samp2.jpg"; img[3].src="samp3.jpg"; img[4].src="samp4.jpg"; //画像枚数 var num=0; //時間制御 time = new Array(5000, 4000, 3000, 3000, 3000); function anime(){ var ch = document.getElementById("changeImg"); ch.src=img[num].src; if(num<4){ num++; }else{ num=0; } setTimeout("anime()",time); } 【html】ファイル-------- <head> <title>画像切り替え</title> <script type="text/javascript" src="imagechange.js"</script> </head> <body> <p><img src="samp0.jpg" width="700" height="200" id="chengeImg"></p> </body> </html> 以上となります。 詳しい方、ぜひ教えてくださいませ。 どうぞ宜しくお願いいたします。
- ベストアンサー
- JavaScript
- 毎日違う画像を表示させるには
私はJavaScriptは初心者です。悩んでここに投稿させて頂きました。 JavaScriptで毎日（24時間ごとに）違う画像を表示させようと考えています。 以下を実行したのですがIEだけ画像が表示されません。 どなた様か、おかしいところ、また違うJavaScriptの記述でも構いません。 教授いただけると幸いです。 <SCRIPT LANGUAGE=javascript> <!-- var ig = new Array(); ig[1]="1.jpg"; ig[2]="2.jpg"; ig[3]="3.jpg"; ig[4]="4.jpg"; ig[5]="5.jpg"; ig[6]="6.jpg"; ig[7]="7.jpg"; function window_onload() { var d = new Date(); img = document.getElementById("img"); window.status=d.getMonth()+1 + "/"+d.getDate() + "/"+ d.getYear(); var no = d.getDate()%7; img.src=ig[no]; img.insertAdjacentHTML("afterEnd",no+"："+ig[no]); } //--> </SCRIPT> </HEAD> <BODY LANGUAGE=javascript onload="return window_onload()"> <P><img id=img></P> </BODY>
- ベストアンサー
- JavaScript
- マウスカーソルに合わせて画像が移動するjavascriptで困っていま
マウスカーソルに合わせて画像が移動するjavascriptで困っています。 マウスカーソルに合わせて画像が移動するソースコードを書いたのですが、 マウスカーソルの動きについていけず、画像がワープ（？）してしまいます。 解決策が分かる方がいらっしゃいましたら、ご指摘願います。 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <TITLE></TITLE> <SCRIPT> <!-- function move(event){ img.style.left=event.x; img.style.top=event.y; } //--> </SCRIPT> </HEAD> <BODY> <IMG src="hoge.png" name="img" style="position:absolute;" > <div onmousemove="move(event);" style="width:500px; height:500px; background-color:#cccccc;"></div> </BODY> </HTML>
- ベストアンサー
- JavaScript
- javascriptを２つ使うと１つの動きしかしません。
初心者です。ホームページを作っています。 以下のように記述してjavascriptで2つの動きをしたいのですが１つしか動きません。scriptをべつのファイルにしたのですが動かないのですが。どう記述したらいいのでしょうか？ よろしくお願いします。 <html> <title></title> <head> <script language="javascript" src="test.js"></script> </head> <center> <body text="#000000" onLoad="timer1=setTimeout('fadein(0,100)',100)"> <br><br> <font size="8" color="green">ようこそマイホームページへ</font><br><br> <img src="top.jpg"><br><br> <a href="top.html"> <img src="main.jpg"></a> <form action="top.html"> </form> <script language="javascript" src="common.js"> </script> <a href="javascript:void(post())">3秒後に遷移します。画面が変わらない場合はクリックしてください</a> </center> </body> </html>
- ベストアンサー
- JavaScript
- JavaScriptのことで教えて！
１シートにJavaScriptを２つ使うことは出来ないのでしょうか？ 画像が点滅するJavaScript と画像が入れ替わるJavaScript 両方を１シートで使用できませんか？ この部分は入力できるのですが <SCRIPT language="JavaScript"> <!-- num = 2; // 入れ替える画像の枚数(最初の画像も含める) nme = "../img/img" // 画像のディレクトリとファイル名の数字と拡張子より前の部分 exp = "jpg" // 拡張子 cnt = 0; function changeImage() { cnt++; cnt %= num; document.img.src = nme + cnt + "." + exp; } //--> 勿論、点滅のJavaScriptも記載済みです。 ところが、 <BODY onload="blink()"> <BODY bgcolor="#ffffff" onLoad="setInterval('changeImage()',1000)"> このように並列して書くとエラーになります。 ２つのavaScriptは使用できないのでしょうか？ 精通されている方、居られましたら宜しくご指導願います。
- ベストアンサー
- その他([技術者向] コンピューター)
- JavaScriptについて
サイト作成中なのですが、JavaScriptのところでつまづいています。 ボタンをクリックすると別窓で画像が出てきて表示されるというJavaScriptを作ると、ボタンは表示されていたのですが、ボタンを押しても画像が表示されません。つまり押しても何も反応がありません。 恐らく画像の保存場所が違うのではないかとにらんでみたのですが見当違いかな？？ タグは以下の通りです。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> function cl(){ popwin=window.open(",'img','width=150,height=150'); popwin.document.write('<IMG SRC="image3.jpg">'); } </SCRIPT> </BODY> クリックしてください。 <FROM> <INPUT type="button" VALUE="クリック" onClick="cl()"> </FROM> </BODY> </HTML> 私はここの部分で間違えてると思いました。 popwin.document.write('<IMG SRC="***.jpg">'); デスクトップに置いてるmyhomepageにimageというフォルダを置いてそこに画像を保存しています。 その場合、<IMG SRC="image/***.jpg">かなと思い実行してみましたがダメでした。。 JavaScriptのときは何か特別なファルダを作る必要が あるんでしょうか？？ JavaScriptに関しては最近はじめたばかりでチンプン カンプンなのでわかりやすく説明していただけるとありがたいです。 ちなみに上記のタグは説明本通り記載しました。 よろしくお願いいたします。
- 締切済み
- その他（インターネット・Webサービス）
- Javascript外部リンクの書き方（初心者）
以下のJavascriptを外部リンクにしたいのですが、記述の仕方が分かりませんので、お教えください。 （引用元：Javascript例文辞典） <html> <head> <title>一定時間ごと画像を入れ替える（複数箇所に異なる画像［規則的なファイル名版］）</title> <script language="JavaScript"><!-- count = 0; function changeImg() { count++; count %= 4; document.btn1.src = "a" + count + ".gif"; document.btn2.src = "b" + count + ".gif"; } // --></script> </head> <body onLoad="setInterval('changeImg()',2000)"> <img src="a1.gif" name="btn1"> <img src="b1.gif" name="btn2"> </body> </html>
- ベストアンサー
- JavaScript
- JavaScriptをファイルに回す。（表現が不適かもしれませんが）
JavaScriptをファイルに回す。 （表現が不適かもしれませんが） 通常、HTMLのページ構成は、 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>ページタイトル</title> </head> <body> </body> </html> が基本かと思われます。その中に、JavaScriptを組み込む際は、<head>～</head>内に記述して、<body>～ </body>内に何か表示するスクリプトなら、<body onLoad="hpopen()">などと記述しますよねぇ。 その、JavaScriptの<head>～</head>内の記述を、ファイル「*.js」にして、同じ動作をさせたいのですが、具体的にどうしたらいいのでしょうか？
- 締切済み
- JavaScript
- 画像のソースを変える(JavaScript)
<html> <head> <script language="javascript"> <!-- function Karasu() { document.forms[0].elements[0].value = "からす"; }// --> </script> </head> <body onload="Karasu()"> <form> <input type="text"><br> </form> </body> </html> ソースの「document.forms[0].elements[0].value」のように画像のソースを書き換えて違う画像を表示させることはできませんか? name属性を使わずにお願いします。 また、他のもっと良い考え方で画像を動的に変更する方法があれば教えてください！
- ベストアンサー
- JavaScript
- javascriptについて
javascriptに関してまだまだ初心者で困っております． 作成したいプログラムは，画像をクリックすると，クリックした画像だけが"on.gif"になり，それ以外の画像は"off.gif"となるようなプログラムです． そこで以下のようなプログラムを作成したのですが，うまく動きません． ご助言頂ければ幸いです． <html> <head> <script type="text/javascript> <!-- function changeImg(no){ for (i=1; i<3; i++){ document.image[i].src = "off.gif"; if(i==no) document.image[i].src = "on.gif"; } } //--> </script> </head> <body> <ul> <li><a href="JavaScript:changeImg(1)"><img src="on.gif" name="image[1]" /></a></li> <li><a href="JavaScript:changeImg(2)"><img src="off.gif" name="image[2]" /></a></li> </ul> </body> </html>
- ベストアンサー
- JavaScript
お礼
出来ました！イメージ通りバッチリです！ ありがとうございました！