- ベストアンサー
javascriptで画像を操作したいのですが・・・
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
簡単なサンプルスクリプトです。 工夫次第でもっと短く簡単に出来ると思いますが、これが基本的な動きとなります。 参考にしてください。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT LANGUAGE="JavaScript"> var i = 0; var j = 1; var k = 2; function change_image(){ <!-- //表示する順番に画像ファイル名を記述 var img_src = new Array("1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"); i++; j++; k++; //番号が画像の数になったらカウントを0にして最初に戻る if(i==5) i=0; if(j==5) j=0; if(k==5) k=0; //画像のSRCを設定する document.img1.src=img_src[i]; document.img2.src=img_src[j]; document.img3.src=img_src[k]; } //--> </SCRIPT> </HEAD> <BODY> <IMG SRC="1.jpg" name="img1"> <IMG SRC="2.jpg" name="img2"> <IMG SRC="3.jpg" name="img3"> <BR> <A href="javascript:void(0)" onClick="change_image()"><IMG SRC="b.jpg"></A> </BODY> </HTML>
その他の回答 (1)
- nitto3
- ベストアンサー率21% (2656/12205)
難しく考えないで、一つずつ別のファイルにしておけばいいです。 一つ目に 画像１ 画像２ 画像３ <a href=next1.html>画像Ａ 二つ目に 画像２ 画像３ 画像４ <a href=next2.html>画像Ａ 三つ目に 画像３ 画像４ 画像５ <a href=next3.html>画像Ａ 最後に 画像ｘ 画像ｙ 画像ｚ <a href=atart.html>画像Ａ こうしてもファイル容量は大して変わりません。
お礼
難しく考えすぎたかもしれないですね。 なんだか肩に力を入れすぎてたかもしれないです。ありがとうございました。
関連するQ&A
- javascriptによる画像切り替えについてわからなくて困っています
javascriptによる画像切り替えについてわからなくて困っています。 初心者ですので説明もわかりにくいかもしれませんが、ぜひご指導をお願いします。 添付画像のように、サイドバーにボタン数個、大きな画像（#main_img)とあって、ボタンにオンマウスで#main_imgが切り替わり、ボタンをクリックするとリンク先に移動できるようにしたいのです。 「javascript ロールオーバー 切り替え クリック リンク」といったキーワードで検索したのですが、ロールオーバー切り替えはできるけれどリンク先に移動できなかったり、ボタン画像画像そのものが切り替わるものだったり、なかなか思ったとおりのサンプルを見つけることができません。 カスタマイズするだけの知識もないので、大変困っています。 このようなサンプルスクリプトを紹介しているところがあったら教えていただけないでしょうか？
- ベストアンサー
- JavaScript
- javascriptのcontentEditableで画像を表示
クリック、ありがとうございます。 下記URL『HTML Editor』を参考にカスタマイズしたEditorを作成しています。 http://tomizawa-web.hp.infoseek.co.jp/sample/HTMLEditor.htm 上にある色々な編集ボタンの下にいくつか画像を並べ、画像をクリックすると編集箇所に画像が表示させるようにしたいのですが、方法がわかりません。 ソース側では画像をクリックすると、編集箇所に <img src="***.gif"> と挿入させ、エディタ(リッチテキスト)に戻すと表示することはできるのですが、 エディタで画像をクリックした時に画像を挿入することが出来ません。 エディタ(リッチテキスト)で画像を挿入する方法を教えてくださいm(__)m ヒントなどでも構いませんので、よろしくお願いします。
- ベストアンサー
- JavaScript
- JavaScriptを使わずにやりたいのですが
ホームページ作成の勉強をしています。 独学で本を片手に、あとはインターネット検索でコツコツやっているのですが、 「画像をランダムに切り替える」という、 ホームページを表示するごとに画像ファイル５つの中からランダムで表示画像が変わるJavaScriptを、JavaScriptを使わずにやりたいのですが、やはり他の方法では無理なのでしょうか？ 画像がそれなりに大きい為、アニメーションGIFでは、画像が荒くて見れたものではなかった為、JPEG画像を使いたいのですが。 ご指導、よろしくお願いします。
- ベストアンサー
- ホームページ作成ソフト
- ホームページの作成で、スクリプトにて画像を入替え、入替えた画像から他のページへ飛ぶには？
ホームページビルダー10を使用してHPを作成しています。 ビルダーのイベントを使用して、クリックして画像を入替えるようにはできたのですが、入替えた画像をクリックして他のページへ飛ぶようにするにはどうしたらよいのでしょうか？ ※ちなみに参考にしているのはこちらです↓ http://www.honda.co.jp/auto/ 「車種一覧」等をクリックすると、車の画像が大きくなったり 小さくなったりします。大きくなった画像にのみ、リンクを貼りたいのですが・・・ 私はビルダーはある程度使えますが、その他の知識はあまりありません。ネット等で検索して勉強しながらHPを作成しています。 宜しくお願いします！
- ベストアンサー
- ホームページ作成ソフト
- JavaScriptでの画像切り替えを複数セット
JavaScript初心者です。 サムネイルに画像を合わせると、IDの付いた画像2枚とテキストの3箇所が同時に入れ替える、 というものを以下の方法で作成しました。 <script> function swap(n) { var items = [ { Text:"テキスト１", ImageB:"b/sample1.jpg", ImageA:"a/sample1.jpg" }, { Text:"テキスト２", ImageB:"b/sample2.jpg", ImageA:"a/sample2.jpg" }, { Text:"テキスト３", ImageB:"b/sample3.jpg", ImageA:"a/sample3.jpg" }, ]; var o = document.getElementById("photo"); document.getElementById("Txt").innerHTML = items[n].Text; document.getElementById("PhotoB").src = items[n].ImageB; document.getElementById("PhotoA").src = items[n].ImageA; } </script> <div id="photo"> <img src="sample1.jpg" alt="" name="PhotoB" id="PhotoB"> <img src="sample2.jpg" alt="" name="PhotoA" id="PhotoA"> <div id="Txt" name="Txt">説明文１</div> </div> <a href="#" onmouseover="swap(0)"><img src="sample1.jpg" /></a> <a href="#" onmouseover="swap(1)"><img src="sample2.jpg" /></a> <a href="#" onmouseover="swap(2)"><img src="sample3.jpg" /></a> このセットを同一ページで複数作成したいのですが、 IDを変えたセットを作ってもうまく動かず、困っております。 知識不足で申し訳ありませんが、この場合、どのような方法でしたら 複数の画像切り替えを作れるのでしょうか？ よろしくお願い致します。
- ベストアンサー
- JavaScript
- 画像が表示されない
ホームページ作成をしている初心者です。 初心者ながらもなんとか、ホームページが出来たのでFFFTPでアップデートしたところ、ページ毎に画像が表示されたりされなかったりになってしまってます。 すべての画像が表示されなかったり、同じ画像だけが表示かれなかったりではなくまちまちです。 例えば、Aのページでは表示されている画像がBのページでは表示されないなど… いろいろ原因を探してはいるのですが、なかなか原因が見つからず困っています。 何とか今週中（出来れば～11/20まで）には完成させたいのですが… どなたか原因が分かられる方いらっしゃいましたらご伝授お願いいたします。 ※ちなみに表示されない時に出てくるのが「×」ではなく下記のような画像です。。
- ベストアンサー
- その他（インターネット・Webサービス）
- 画像で作成したボタンの処理について
HTML、CSS、Javascriptを勉強中の初心者です。 あまり難しいことはわからないので、噛み砕いて説明してくださるとうれしいです。 あるWebページで、画像で作成したボタンA、B、Cを一列に配置されている状態で、以下のような処理をしたいと思っています。 (1)画像Aがクリックされたら、画像Aを画像A2に置き換える (2)画像A2が表示されている状態で、画像Bをクリックすると、画像A2は画像Aとなり、画像Bは画像B2となる 質問内容は以下です。 (1)の処理をonclick処理で実装したところ、クリックした瞬間のみ画像A2となり、カーソルが離れると画像Aに戻ってしまうが、クリックした状態のままにするには他にどのような処理が必要なのか。 (2)jQuery？でif文でできるような気がするが、サンプルとなるものがなく、書き方がわからない…。 上記について、ご回答よろしくお願いします。
- 締切済み
- ホームページ作成ソフト
- 画像の保存防止
初心者でよくわからないんですが、 ホームページなどにある画像を右クリックで名前をつけて保存 で画像が保存されますが 自分でホームページを作成して ホームページ内の画像を右クリックで名前をつけて保存 されないように出来ますか？ ＊自分のホームページの画像を人に取られなくする方法？？ よろしくおねがいします。
- ベストアンサー
- その他([技術者向] コンピューター)
- javascriptでの画像表示と拡大縮小など
現在javascriptについて勉強をしているところです。 下記リンクのようにローカルにある画像を画面に表示し、 http://www.pori2.net/html5/File/040.html 下記リンクのように表示した画像を動かすことの出来るような プログラムにしてみたいのですが、 http://jsdo.it/ganezasan/gTN0 ふたつのサンプルを見ながら作れないかやってみたのですが まだまだ勉強不足でうまく出来ませんでした。 ローカル画像を表示させ（サーバにアップロードはしないで）、 上記リンクのような拡大や縮小などの操作を 出来るようにするにはどうすれば良いのでしょうか。
- 締切済み
- JavaScript
- JavaScriptで画像から選択肢へ切り替え
JavaScript全くの初心者です。よろしくお願いします。 パナソニックさんのホームページ（http://panasonic.jp/）の様に、 最初に写真が表示されていて、mouseoverで選択肢が現れる、 と言ったページが作りたいのです。 フラッシュが使われていますが、画像で作りたいです。 勉強を始めましたが、画像と内容文への入れ替え方法は見つからず悩んでいます。 JavaScript記述して頂ける方いらっしゃいましたら、宜しくお願いいたします。
- ベストアンサー
- JavaScript
お礼
丁寧なご回答ありがとうございます。 さっそくためそうと思います。本当にありがとうございました。 みなさんどんな勉強法でこんなにできるようになるのか不思議です。すごいですね。