- ベストアンサー
JavaScriptで画像情報の表示と文字情報表示を連動する方法について
- JavaScriptを使用して、複数の画像情報を一定時間ごとに表示し、それに連動した文字情報を表示する方法について知りたいです。
- 自分で作成したHPで、画像が変わる度に画像に関連した文章を1文字ずつ表示させたいです。JavaScriptのサンプル集には画像を次々に表示する方法はありますが、文章との連動方法についてわかりません。
- 画像情報と文字情報を連動させる方法をJavaScriptで実装したいです。画像が切り替わるたびに、関連した文字情報を一文字ずつ表示したいです。サンプルやアドバイスがあれば教えてください。
- aquas412
- お礼率59% (32/54)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
- ベストアンサー
今日はちょっと冴えてるかもしれない！解説なし！ <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>
お礼
_pipi_様 こんなに早くご回答を頂けるとは思いませんでした。 本当にありがとうございます。 まだ、内容が確認できませんが、取あえずお礼を申し上げます。 これから内容を確認したいのですが、難しそうで自分だけでできるかどうか分かりません。とにかくやってみます。