- ベストアンサー
商品回転画像の作成方法
ネットショッピングなどでよく見る商品回転画像の作成をしたいのです。 被写体を回転させながら写真にとって8枚用意しました。 JavaScriptで回転してみせる方法を以前雑誌で見た気がするのですが見つけられませんでした。 (フラッシュでもできると思うのですが・・) どちらでも結構です どなたかご伝授ください。よろしくお願い致します。
- kujira2030
- お礼率72% (8/11)
- JavaScript
- 回答数3
- ありがとう数3
- みんなの回答 （3）
- 専門家の回答
質問者が選んだベストアンサー
その他の回答 (2)
次は、私が用いているパタパタ関数です。 切り替えをループで繰り返すのと一度切りの２つを用意しています。 逆順は For ループで操作したらいいです。 /* object の画像をパタパタと切り替えることを繰り返す。 ------------------------------------------------------------------- <body onLoad="setImages(3, 'koinu','jpg');patapatas(document.img, a_images, 500)"> ------------------------------------------------------------------- */ function patapatas(object, a_images, duration ,count){ if(count < a_images.length - 1){ count ++; }else{ count = 0; } object.src = a_images[count].src; var func=function(){patapatas(object, a_images, duration, count)} setTimeout(func, duration); } /* object の画像をパタパタと切り替えて最後の画像で停止。 ----------------------------------------------------- onclick="patapata(document.main.tv, a_tvs, 500, -1); ----------------------------------------------------- */ function patapata(object, a_images, duration ,count){ if(count < a_images.length - 1){ count ++; object.src = a_images[count].src; var func=function(){patapata(object, a_images, duration, count)} setTimeout(func, duration); } } なお、実際にＨＰで書いているコードのあらましは次のようです。 <script type="text/javascript"> var a_images = new Array(3); function setImages(max, name, type ){ for( var i = 0 ; i < max ; i++ ){ a_images[ i ] = new Image(276, 234); a_images[ i ].src = name + i + "." + type; } } </script> </head> <body onLoad="setImages(3, 'koinu','jpg');patapatas(document.img, a_images, 500)">
お礼
こんな方法もあるんですね。 いただきます。色々試してみたいと思います。 ありがとうございました。
- yambejp
- ベストアンサー率51% (3827/7415)
回転のさせかたを指示したほうがよいのでは？ ボタンを押したら？画像をクリックしたら？逆回転は必要？ 回転のスピードは？回転はエンドレス？ などなど・・・ 基本的にはimageオブジェクトを用意しておいて、 トリガーに応じて、setTimeoutで所定のimgタグのsrcを 書き換えてやるとよいでしょう。 １回転だけならforで回すだけでいいでしょう
補足
ありがとうございます。(嬉しいです) 回転のさせかたは、ボタンをクリックして右にまわったり左に回ったりです。 スピードまで考えていませんでした。 前に気になって入力していたタグがあるのですが、どこに.jpgを入れたらよいかわかりません。 以下添付します。 ------------------- <div id="photo"> <img src="photo0.jpg"width="400" height="300"id="mainPhoto"/> </div> <div id="navi"> <a href="Javascript:turnLeft();"><imgsrc="turnleft.gif"/></a> <a href="Javascript:turnFront();"><imgsrc="front.gif"/></a> <a href="Javascript:turnRight();"><imgsrc="turnRight.gif"/></a> </div> htmlに設置するソース //初期設定 var way=0; var photoArray=new Array(8) for(i=0;i<8;i++){ photoArray[i]=new lmage(); photoArray[i],src="photo"+i+".jpg" ※説明 変数wayは現在の方向を表す。「photoArray」の配列に「photo0.jpg」から「photo7.jpg」までの8点の写真を代入する。これは画像のプリロードの効果も兼ねている。←これがよくわからないのです。 //左回転 function turnLeft(){ if(way==0){ way=7; }else{ way--; } document.getElmentByld("mainphoto").src=photoarray{way}.src; } //右回転 function turnRight(){ if(way==7){ way=0; }else{ way++; } document.getElementByld("mainPhoto").src=photoArray[way].src; } //正面 function turnFront(){ document.getElementByld ("mainPhoto").src=photoArray[0].src; way=0; } ----------------- これが載っていた雑誌があればよかったんですけど・・・
関連するQ&A
- 1つの画像から回転などで沢山の画像を作成する方法
1つの画像から、回転などを用いて自動的に大量の画像を作成する方法はありますか？ 只今、機械学習について学んでいて、正解画像や非正解画像が3000～7000あるのが理想的だと聞きました。 画像を傾けたり回転させるなどして、自力で1000枚ほど用意したのですが、何か他に簡単な方法がありましたら教えて下さい。
- ベストアンサー
- C・C++・C#
- 画像を開くと90度回転？
photoshopCS2で画像を開くと、被写体が90度回転しています。 その画像を、illustratou8.0に配置すると、正位置にリンクされます。 何ででしょうか？ちなみに画像は、デジカメで撮影されたEPS形式です。 何卒良き知恵をお貸し下さい。お願いします。
- 締切済み
- その他([技術者向] コンピューター)
- ロールオーバー時に画像がクルッと横に回転するJS
ロールオーバー時に画像がクルッと横に回転するJavaScriptを探しています。 例： ２枚の画像を用意します。 □、■ まずは□の画像を配置し、ロールオーバー時に横にクルッと回転して■の画像に変わるというやつです。 上記の様なJavaScriptを探しています。 知っている方いらっしゃればお力添えください。 どうぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
- Flashムービーで、画像を回転しているように見せたい。
Flashムービーで、画像を回転しているように見せたいです。 ペットボトルが1本立っている写真画像があるとします。 これをFlashで回転しているようにみせたいです。 たとえばの方法で思いついたのが、 画像のペットボトル部分だけ切り抜いて（背景とボトルをもちろん別々にして）、 Flashで、右から左へトゥイーン機能でボトルが動いてるレイヤーを作って、それのまんなか部分にマスクをかける。 そしてこれに似たレイヤーをいくつも重ねてみせる方法です。 （一番したのレイヤーには、常に見えているボトル画像がある。） なにか他によい方法はあるでしょうか。教えてください。
- ベストアンサー
- Flash
- Photoshop CSでの画像回転についての質問
今回Photoshop Ver.CS3を今回用意して使い始めました。 Ver.7以来久しぶりということで、少々うろ覚えな質問になりますが、どうかよろしくお願いします。 スキャナなどで生成した画像ですが、角度を平行にする時、 以前は、斜めになっている被写体の上辺の端から端にラインを当てれば、回転ツールを使う時に自動的に角度が記録されていて、入力なしに平行にできたのを覚えているのですが、 CS3になってそのラインのツールが見あたりません。 どこにあるのか教えて頂けないでしょうか。
- ベストアンサー
- 画像・動画・音楽編集
- 外にある中心で画像を回転させる方法
こんにちは。 現在サイトを作成していまして、その中で画像を回転させたいと思っています。 その画像の中にある中心ではなく、画像の外にある中心で回転させ、画像自体は回転させないようにするのに参考になるスクリプトはありますか？ 私のイメージに近いものとしてはこれです。 http://www.3tomo.net/ 猫の画像が回転しています。
- ベストアンサー
- JavaScript
- スマホで撮った写真を少し回転させるとはみ出る
初歩的な質問ですが、 スマホで撮った写真を編集（切り取りや回転）しようとして、 被写体が斜めになっているのを少し回転させて真っ直ぐにしようとした時、 斜めの時には全て枠内に収まっていたものが入りきらず、はみ出てしまいます。 真っ直ぐにしても全て入るようにできるでしょうか？ 背景は全て入らなくてもいいのですが、被写体は全て収めたいです。
- 締切済み
- 携帯・スマホアプリ
- Flashのフリーソフトで、数点ある商品をある一定時間で回転する画像（
Flashのフリーソフトで、数点ある商品をある一定時間で回転する画像（正面に位置するものは大きく表示される）を作りたいのですが、フリーソフト色々探しましたがどれがいいのかいまいちわかりません。 作成したいもおのはお絵かきで添付致しまのでみてやって下さい。どなたかよいフリーソフトを教えてください。 またその際、HPビルダーに載せる場合どのようにしたらよのでしょうか？ご存じの方どなたか御願いします。
- 締切済み
- フリーウェア・フリーソフト
- 画像にテキストを埋め込むジェネレーターの作成方法
http://www.web20badges.com/ 上記URLのサイトのように自分で用意した画像に WEB上でテキストを加工（色やサイズ・ボールドや回転等）して 画像を作成するジェネレーターを作成したいと思いますが 参考になるようなサイトやスクリプトなどありましたら 教えていただきたいと思います。 宜しくお願いいたします。
- ベストアンサー
- PHP
お礼
すっきりしました。 ありがとうございました。 早速やってみます。
補足
talooさんすみません。 担当と自分でやってみたんですけど、画面が変わらないのです。 原因がわかりません。 (泣)