• 締切済み

このタグ教えて下さい

このタグを使うと画像がスライドするように3秒ごとに画像が変わって行くらしいのですが、私も使ってみたいです。 ですが何処に自分の作った画像を入れたらよいのか解りません？ 画像サイズは、横485　縦162　枚数は4枚入れてみたいです。 どうぞ宜しくお願いします。 <style type="text/css"> #photo1{ position:absolute; top:16px; left:-256px; z-index:1; } #photo2{ position:absolute; top:16px; left:16px; } </style> <script type="text/javascript"> window.onload =function(){ photo1Img=document.getElementById("photo1"); photo2Img=document.getElementById("photo2"); album.swapImage(); } var album = { imageURL : [ "a.gif", "b.gif", "c.gif", ], swapImage : function(){ this.count++; if (this.count >= 3) this.count = 0;this.count2 = 0; photo1Img.style.left=""; photo1Img.src = this.imageURL[this.count]; setTimeout("album.counter()", 100); }, counter:function(){ this.count2++; photo1Img.style.left=(this.count2*16-256)+"px"; if(this.count2 > 16){ setTimeout("album.swapImage()", 3*1000); photo2Img.src = this.imageURL[this.count]; } else setTimeout("album.counter()", 30); }, count : 0,count2 : 0 }; </script> <p> <img src="a.gif" id="photo1" width="256" height="64"> <img src="a.gif" id="photo2" width="256" height="64"> </p>

みんなの回答

  • yuki4499
  • ベストアンサー率62% (10/16)
回答No.1

<html> <head></head> <style type="text/css"> #photo1{ position:absolute; top:22px; left:-485px; z-index:1; } #photo2{ position:absolute; top:22px; left:22px; } </style> <script type="text/javascript"> window.onload =function(){ photo1Img=document.getElementById("photo1"); photo2Img=document.getElementById("photo2"); album.swapImage(); } var album = { imageURL : [ "a.gif", "b.gif", "c.gif", "d.gif", ], swapImage : function(){ this.count++; if (this.count >= 4) this.count = 0;this.count2 = 0; photo1Img.style.left=""; photo1Img.src = this.imageURL[this.count]; setTimeout("album.counter()", 100); }, counter:function(){ this.count2++; photo1Img.style.left=(this.count2*22-485)+"px"; if(this.count2 > 22){ setTimeout("album.swapImage()", 3*1000); photo2Img.src = this.imageURL[this.count]; } else setTimeout("album.counter()", 30); }, count : 0,count2 : 0 }; </script> <p> <img src="a.gif" id="photo1" width="484" height="162"> <img src="a.gif" id="photo2" width="484" height="162"> </p> <body> <p id = "photo1"></p> <p id = "photo2"></p> </body> </html> 簡単に修正してみました。 画像サイズの横が484なので気がつかない程度だと思うけれど違和感あるかも？ 後は画像ファイル名を↓のものと合わせるか "a.gif", "b.gif", "c.gif", "d.gif", 逆に画像ファイル名にすれば動くんじゃないかと 片手間でやったからなんかミスがありそう

  1. カテゴリ
  2. [技術者向] コンピューター
  3. その他([技術者向] コンピューター)

関連するQ&A

  • HTMLについて

    現在HTMLを勉強しています そこで画像の配置についてわからないところがあるので教えてください 添付した画像のようにしたいのですが緑の画像がかなりしたになってしまいます どうすればいいでしょうか？ コードとCSSは HTML <body> ～～～省略～～～ <div class="menu_block"> <table class="menu_left"> <tr> <td class="photo"><img src="img/siri-zu.gif" style="margin-top:80px;"></td> </tr> <tr> <td class="photo"><img src="img/sekkenn.gif" style="margin-top:20px;"></td> </tr> <tr> <td class="photo"><img src="img/oiru.gif"style="margin-top:10px;"></td> </tr> <tr> <td class="photo"><img src="img/jeru.gif"style="margin-top:10px;"></td> </tr> <tr> <td class="photo"><img src="img/set.gif"style="margin-top:10px;"></td> </tr> <tr> <td class="photo"><img src="img/mini.gif"style="margin-top:10px;"></td> </tr> </table> <img src="img/3.gif" height="300" alt="3STEP" class="menu_right"> <img src="img/rank.jpg" style="margin-top: 80px ;" class="ranking"> <img src="img/test.jpg" width="600" height="200" style="margin-left: 200px;" class="rebyu"> </div> </div> </body> CSS @charset "UTF-8"; h1 { margin: 30px 0 30px 0; padding: 0 0 0 0; line-height: 0; text-align: center; } #wrapper { width: 1050px; margin: 0 auto 0 auto; } .menu_block { overflow: hidden; zoom: 1; } .menu_left { float: left; margin-right: 20px; } .menu_right { float: left; margin-top: 80px; margin-left: 20px; } .ranking { float: left; margin-left: 20px; } .rebyu { float: left; margin-top: 10px; } です 赤の真下に緑が来るというのが理想です

    • ベストアンサー
    • HTML
  • マウスオーバーで画像変更で

    以下のような方法で画像変換を行っています。 <script language="JavaScript"> function imageChange(imageName,imageURL){ document.images[imageName].src = imageURL; } </script> <TR><TD><IMG SRC="./img/01.gif" NAME="image01" style="position:absolute;top:20;left:10;" onMouseOver="imageChange('image01','sub01_01b');"> </TD></TR> <IMG SRC="./img/01_01b.gif" name="sub01_01b"> 実際にマウスオーバーさせると×印が出てしまいます。 onMouseOver="this.src='./img/01_01b.gif'" とするとできるのですが。 どこかに間違いがあるのだと思うのですが、自分で発見できません（＞＜） 間違いを訂正してください！

  • １０個の落ちてくる文字の位置を常に真中に表示

    お知恵をおかりしたいのですが、 下記のソースで１０個の文字（GIF）がオンロードで落ちてくる という仕様なのですが、現在はポジションを指定してあるのですが、 これをスクリプトの追加で常に真中に揃えることがしたいのですが、 自分でもやってみましたがうまくいかずおわかりになる方お力をお貸しください。 <html> <head> <title></title> <script type="text/javascript"> window.onload = init; var n=8; var frac = [1.7,1.8,1.6,1.8,1.7,1.5,1.7,1.9]; var bound = [0.5,0.6,0.5,0.6,0.6,0.5,0.6,0.5]; var count = []; var elm=[]; var y = []; var handle=[]; function falling() { for(i=0;i<n;i++){ y[i] += ++count[i] * 0.001 * frac[i]; elm[i].style.top = y[i]; if(y[i] >= wH){ y[i] = wH; count[i] = Math.ceil(-count[i] * bound[i]); if( count[i] == -1 ) clearInterval( handle[i] ); } } } function init() { for(i=0;i<n;i++) { elm[i] = document.getElementById("sample"+i); handle[i] = setInterval(falling,10); y[i]=count[i]=0; } wH = document.all ? document.body.clientHeight : window.innerHeight; wH = wH - elm[0].height; } </script> </head> <body> <center> <img src=".jpg" width="330" height="440"> <img src=".gif" id="sample0" style="position:absolute;left:250px;"> <img src=".gif" id="sample1" style="position:absolute;left:300px;"> <img src=".gif" id="sample2" style="position:absolute;left:350px;"> <img src=".gif" id="sample3" style="position:absolute;left:400px;"> <img src=".gif" id="sample4" style="position:absolute;left:450px;"> <img src=".gif" id="sample5" style="position:absolute;left:500px;"> <img src=".gif" id="sample6" style="position:absolute;left:550px;"> <a href="#" alt="ENTER"><img src="enter.gif" id="sample7" border="0" style="position:absolute;left:680px;"></a> </center> </body> </html> というソースなのですが、たぶん１行か２行のコードの追加でモニタサイズなど関係なしに常にど真ん中にならべることができると思うのですが、難しく。。。。。 どうかなのとぞよろしくお願いいたします。

  • 【jQuery】setInterval

    jqueryの初心者です。 3つの画像を3秒間隔でクロスフェードさせ、それを繰り返したいのですが setIntervalの使い方が違うのか、思うような動きになりません。 何が原因なのかと、無駄な部分があると思いますので なるべくシンプルで初心者レベルのコードを教えて頂きたいです。 宜しくお願いします。 $(function(){ setInterval(function(){ setTimeout(function(){ $(".photo-1").fadeOut(1000); },3000); setTimeout(function(){ $(".photo-2").fadeIn(1000); },3000); setTimeout(function(){ $(".photo-2").fadeOut(1000); },6000); setTimeout(function(){ $(".photo-3").fadeIn(1000); },6000); setTimeout(function(){ $(".photo-3").fadeOut(1000); },9000); setTimeout(function(){ $(".photo-1").fadeIn(1000); },9000); },3000); }); <div id="photo-box"> <p class="photo-1"><img src="img/01.jpg" width="500" height="150" alt="" /></p> <p class="photo-2"><img src="img/02.jpg" width="500" height="150" alt="" /></p> <p class="photo-3"><img src="img/03.jpg" width="500" height="150" alt="" /></p> </div>

  • マウスオーバーで画像の入れ替え

    以下のソースでマウスオーバー時に画像の入れ替えをしたいのですが、IE6では動作するのですが、firefoxでは動作しません。 firefoxでも動くようにするにはどうしたらいいですか？ アドバイスよろしくお願いいたします。 <html> <head> <script language="JavaScript"> <!-- // タイマー変数の初期化 timer = ""; // スワップイメージ function SwapImage(img) { obj = document.getElementById("image"); obj.src = img; clearTimeout(timer); timer=setTimeout('DefaultImage()',5000); } // イメージ画像の初期化 function DefaultImage() { obj = document.getElementById("image"); obj.src = 'img/default.gif'; clearTimeout(timer); } //--> </script> </head> <body> <div class="btn"><a href="#"><img src="img/sample1.jpg" onmouseover="SwapImage('img/test01.jpg')" width="100" height="50" border="0" /></a></div> <div class="btn"><a href="#"><img src="img/sample2.jpg" onmouseover="SwapImage('img/test02.jpg')" width="100" height="50" border="0" /></a></div> <div class="btn"><a href="#"><img src="img/sample3.jpg" onmouseover="SwapImage('img/test03.jpg')" width="100" height="50" border="0" /></a></div> <div id="photo"><img src="img/default.gif" name="image" width="300px" height="150px"></div> </body> </html>

  • タグの修正に力をかしてください

    ホットペッパーに出てくるお店のページのバナーのように、 「アクセス」「TEL」の文字を表示させたいのですがうまくいきません。 タグの修正にちからをかしていただけないでしょうか。 以下、タグです。よろしくおねがいします。 <table width="702" border="0" cellspacing="0" cellpadding="0"> <tr> <td class="color3" colspan="3"><img src="images/spacer.gif" alt="" width="1" height="1"></td> </tr> <tr> <td class="color3"><img src="images/spacer.gif" alt="" width="1" height="1"></td> <div style="position:relative;"><img src="images/hotpot_bannar.gif" alt="バナー" width="700" height="151"></div> <div style="position:absolute; top:70px; left:400px; color:#ffffff; font-size:10px; border:solid 1px; padding:2px;">アクセス</div> <div style="position:absolute; top:50px; left:450px; color:#ffffff; font-size:10px;>JR環状線：「福島駅」・・・</div> <div style="position:absolute; top:70px; left:450px; color:#ffffff; font-size:10px;>JR東西線：「新福島駅」・・・</div> <div style="position:absolute; top:120px; left:400px; color:#ffffff; font-size:10px; border:solid 1px; padding:2px;">TEL</div> <div style="position:absolute; top:120px; left:450px; color:#ffffff; font-size:10px;>06-****-****</div> <td class="color3"><img src="images/spacer.gif" alt="" width="1" height="1"></td> </tr> </table>

    • ベストアンサー
    • HTML
  • イベント？動作の位置を画面の真ん中にするには？

    ジャバスクリプトの動作を中心にする方法がわかりません。 http://www.openspc2.org/HTML_JS_CSS/table/006/ ↑これなんですが、このプログラムを、画面の真ん中に配置したいんですが、どこにどのように手を加えていいかわかりません。 画面の真ん中とは、これを見る環境に関わらず、インターネットエクスプローラーで見たときに、中央に配置という意味です。 ＨＴＭＬでいう<centr>みたいなものです。 下記にプログラムを載せておきました。 私の説明で分からなかったら、補足で回答します。 <title>クリックで表示するテーブルをスクロールさせて切り替える</title> <script language="JavaScript"><!-- tMax = 5; //　テーブル個数 tWidth = 200; //　１つのテーブル幅 step = 10; //　１回の移動量（単位：ピクセル） num = 0; offset = 0; flag = false; function scrollSetTBL(n) { if (flag) return; num += n; if (num < 0) { num = 0; return; } if (num >=tMax) { num = tMax-1; return; } offset = n * step; count = tWidth / step; setTimeout("scrollTBL()",10); flag = true; } function scrollTBL() { scrlTBL.style.pixelLeft -= offset; count--; if (count > 0) setTimeout("scrollTBL()",10); else flag = false; } // --></script> </head> <body> <img src="left.gif" onMousedown="scrollSetTBL(-1)" style="position:absolute;top:200px;left:20px;"> <img src="right.gif" onMousedown="scrollSetTBL(1)" style="position:absolute;top:200px;left:60px;"> <div style="position:absolute;top:10px;left:10px;clip:rect(0px 200px 200px 0px)"> <table id="scrlTBL" border="0" cellspacing="0" cellpadding="0" style="position:absolute;top:0px;left:0px;"> (以下略)

  • JavaScriptでクレイアニメ。ちらつきます。

    JavaScript初心者です。Windows７とGoogleChromeを主に使っています。 <!DOCTYPE html> <html><head><title>animation</title> <script src="js/jquery-1.11.0.min.js"></script> <style> #area{ width:420px;height:320px;text-align:center;background:gray; } </style> </head> <body> <div id="area"><br><img src='slideshow/photo0.jpg'></div> <button id="move">PLAY</button> <script> time=200;lastcode=10; count=0; $("#move").mouseover(function(){ anime=setInterval(nextfilm,time); }) .mouseout(function(){ clearInterval(anime); }); nextfilm=function() { if(count==lastcode)count=0 else{count++;} ; // count=(count==lastcode)? 0 : count+1; bufa="<br><img src='slideshow/photo"+count+".jpg'>"; $("#area").html(bufa); } </script> </body> </html> slideshowフォルダにphoto0～10.jpg（400×300px）という画像を用意し、カーソルをPLAYボタンに乗せると0.2秒間隔で次々に画像を見せるクレイアニメ及びスライドショー再生プログラムをごくシンプルに作ってみました。 実行してみると、けっこうチカチカします。画像タイプの問題かなとも思いアニメーションによく使われるgifファイルも作って試しましたが、変わりません。よく見たら、同じ画像をgifにしたらデータ量が倍以上あるんですね。 このちらつき現象、時折チカチカせずスムーズになることもあり、常時スムーズだといいのにと思うのですが、ではこれはハード的な問題でプログラムで抑止することは不可能ということでしょうか？抑止できるとしたらどんな書き方があるのでしょうか？ チカチカさせる効果の紹介はネット上でも多いのですが、逆にチカチカしてしまうのを抑えたいとなると参考にできるページに行き当たらず、ここで質問に思い立った次第です。 どなたかご教示お願いします。

  • オブジェクト指向のsetTimeoutの呼び出し方法

    オブジェクト指向を勉強中です しかし今一しっくりきません。 setTimeoutの呼び出し部分の記述は、これでいいのでしょうか？ やりたいことは、沢山の画像を一度に違ったタイミングでフェードアウト・インをすることです。 <html> <body> <img src="./img/1.gif" width="50" height="50" id="a"> <img src="./img/2.gif" width="50" height="50" id="b"> <input type="button" value="pp" onClick="img2.fin(10,50)"> <script> var img1 = new ImageEffect( 'a',100 ); img1.fout(10,30); var img2 = new ImageEffect( 'b',100 ); img2.fout(5,30); function ImageEffect( id,val1 ){ var func=[]; this.obj = document.getElementById( id ); this.opacity=(val1==undefined)? 100:val1; this.opacitySet = function(n){ this.obj.style.filter='alpha(opacity='+n+')'; this.obj.style.MozOpacity=n/100; this.obj.style.opacity=n/100; this.opacity = n; } this.fout = function(step,wtime){ func[id] = this; this.opacity-=step; if(this.opacity<1) this.opacity = 0; this.opacitySet(this.opacity); if( this.opacity ) setTimeout( function(){ func[id].fout( step, wtime);}, wtime);//ここの呼び出し } this.fin = function(step,wtime){ func[id] = this; this.opacity+=step; if(this.opacity>100) this.opacity = 100; this.opacitySet(this.opacity); if( this.opacity ) setTimeout( function(){ func[id].fin( step, wtime);}, wtime);//ここの呼び出し } }

  • 時間差で画像を動作させたいjavascriput

    時間差で画像にあれこれさせる！javascriput (1)HPが開かれたと同時に「wakuwaku.gif」がフェードインし、すぐにフェードアウトさせる。（できれば速度調整できるとうれしいです） ↓ (2)フェードアウト後「ｕｋｉｕｋｉ.gif」を50px下に動かし止める（できれば速度調整できるとうれしいです）。 これと同時にmogemoge028○.jpgをフェードインさせる。 自分では以下まで作成しましたが。setTimeOutのいい使い方や もっと早く動作するのあるだろ！ 等、良案をよろしくお願い致します。 あまり時間が作れなく、基礎等も毎日勉強しているのですがおっつきせん＾＾； もちろん教えて下さったのを元に勉強させていただきたいと思っております。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <HTML> <HEAD> <TITLE></TITLE> </HEAD> <BODY> <DIV style="top : 100px;left : 106px; position : absolute; z-index : 2; " id="Layer1"><IMG src="wakuwaku.gif" width="1050" height="610" border="0"></DIV> 　//画像１つ目 <DIV style="top : 153px;left : 198px; position : absolute; z-index : 3; " id="Layer2"><IMG src="ｕｋｉｕｋｉ.gif" width="445" height="495" border="0"></DIV> 　//画像２つ目 <DIV style="top : 170px;left : 200px; position : absolute; z-index : 1; " id="Layer3"> <script language="JavaScript" type="text/javascript"> <!-- var randimg = new Array(); var randimg_count = 0; randimg[randimg_count++] = "mogemoge0287.jpg" randimg[randimg_count++] = "mogemoge0288.jpg" randimg[randimg_count++] = "mogemoge0289.jpg" randimg[randimg_count++] = "mogemoge0280.jpg" document.write("<img src=\"" +randimg[Math.floor(Math.random() * randimg.length)]+ "\">"); //--> </script> </DIV>//画像３つ目（ランダム表示） </BODY> </HTML>

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する