JavaScriptで画像情報の表示と文字情報表示を連動する方法について

解決済

質問者：aquas412
質問日時：2008/11/22 15:37
回答数：1件

最近自分でＨＰを作成しようと思い、チャレンジ中です。
写真等複数の画像情報を一定時間ごとに画面に表示しながら、１枚の画像毎に文字情報を１文字単位に表示させて一連の文章を表示して見せたいという思いがあるのですが、素人には方法の取っ掛かりがつかめません。
JavaScriptのサンプル集に複数の画像を一定時間ごとに次々に表示するというものはありました。
これに加え、画像が変わるごとに画像に連動した文章を１文字毎に表示させて見せるということを繰り返し行う方法について知りたいのです。
何か良い方法なり、サンプル等はないでしょうか？
どなたか、わかる方がおられましたらご教示頂きたく。
よろしくお願いいたします。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： _pipi_
回答日時：2008/11/22 19:13

今日はちょっと冴えてるかもしれない！解説なし！

<html><head><style>
.fcscol{color:white; background-color:#f00}
.blrcol{color:green}
.defcol{color:#800}
</style></head>
<body>
<img src="" id="photo" width="320" height="240" alt="PhotoImage"><div id="mess"></div>
<img src="" id="photo2" width="320" height="240" alt="PhotoImage"><div id="mess2"></div>

<script>

var n=[ './img/0.gif 80 最初から目指すものがおおきかもしれない。すこし実現するために悩んだ。 defcol fcscol blrcol',
'./img/1.gif 80 最近オブジェクト指向のプログラムを勉強中！なのでその応用ということで defcol fcscol blrcol',
'./img/2.gif 80 解説は微妙だ～！一日経てば自分でもわからなくなることだろう！^^; defcol fcscol blrcol',
'./img/3.gif 80 オブジェクト指向のメリットは体験したものでなければ理解できない？ defcol fcscol blrcol',
'./img/4.gif 80 複数動作が同時に可能だということを応用できるかな？ defcol fcscol blrcol' ];

new change( 'photo', 'mess', n, 4000 );
new change( 'photo2', 'mess2', n, 5000 );

function change( imgId, txtId, n, wtime){
this.go = function(){
tmp = this.n[ this.cnt ].split(' ');
this.imgelm.src = this.imgelm.alt = tmp[0];
new setDisplayString( this.txtelm, tmp[2],tmp[3],tmp[4],tmp[5], tmp[1]);
this.cnt = (this.cnt + 1) % this.n.length;
}
this.imgelm = document.getElementById( imgId );
this.txtelm = document.getElementById( txtId );
this.n = n; this.cnt = 0; this.go();
setInterval( (function(f_){ return function(){ f_.go.call(f_);}})(this), wtime);
}

function setDisplayString(elementId, str, css0, css1, css2, wtime){
this.element = ( typeof( elementId ) == 'string' )? document.getElementById( elementId ): elementId;
while( this.element.hasChildNodes() ) this.element.removeChild( this.element.lastChild );

for( var i=0, m=str.length; i<m; ){ var newobj = document.createElement('span');
with( newobj ){ className = css0; appendChild( document.createTextNode( str.substr( i++, 1) ) ) }
this.element.appendChild( newobj )}
this.cnt = 1; this.element.childNodes[0].className = this.css1 = css1; this.css2 = css2;
this.tmid = setInterval((function(f_){ return function(){ f_.go.call(f_);}})(this), wtime);

this.go = function(){
if(this.element.childNodes.length>this.cnt) this.element.childNodes[ this.cnt ].className = this.css1;
this.element.childNodes[ this.cnt-1 ].className = this.css2;
if(++this.cnt>this.element.childNodes.length) clearInterval( this.tmid );
}
}
</script>