ベストアンサー

トップ内にある画像を数秒間、大きく表示してから、通常表示状態にしたい

2009/06/11 09:50

はじめまして、初心者ですのでよろしくお願いします。自分が作成しているＨＰ（ホームページビルダー使用）ですが、閲覧者がトップ（index.html）を開いた時、トップ内に添付したある画像(jpeg)を数秒間、大きく表示してから、通常表示状態になるようなページを考えています。（その画像を皆さんに見てもらいたいので・・・）このやり方が説明されているＷＥＢや方法をご存じの方、是非とも御教示ください。

jj1lwi
お礼率94% (64/68)

HTML
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

fujillin
ベストアンサー率61% (1594/2576)

2009/06/11 17:55 回答No.1

◆大きい画像のページと通常表示のページを用意しておいて、大きいもの　をindex.htmlにしておき、metaでhttp-equiv="refresh" content="5" 　などで通常表示のページをロードするようにしておけばよいのでは？　（環境によっては、ロードする時間がプラスされますが…） ◆スクリプトを使ってもよいのなら、例えばこんな感じ？（『ある画像』はIDで指定。『数秒間』は5秒に設定してあります。　サンプルなので、幅・高さ・座標計算などは少々いい加減です。） <html> <head> <script type="text/javascript"> var d = 30, spd = 15, stopt = 5000; ID='special_image'; var tID,img,ew,eh,dw,dh,ex,ey,dx,dy; window.onload = function() { var e = document.getElementById(ID); if (e){ img = e.cloneNode(true); img.style.zIndex = 100; img.style.position = 'absolute'; img.style.display = 'none'; ew = e.offsetWidth; eh = e.offsetHeight; ex = e.offsetLeft + ew/2; ey = e.offsetTop + eh/2; while (e.offsetParent){ e = e.offsetParent; ex += e.offsetLeft; ey += e.offsetTop; } var w = window.innerWidth; var h = window.innerHeight; if (!w) { w = document.body.clientWidth; h = document.body.clientHeight; } dx = (w/2-ex)/d; dy = (h/2-ey)/d; if (ew<1 || eh<1) return; var n = Math.min(w/ew, h/eh)-1; dw = n*ew/d; dh = n*eh/d; document.getElementsByTagName('BODY')[0].appendChild(img); move(1); } } function move(){ var s = (move.arguments.length)?stopt:spd; if (d>0){ var w = ew + dw*d; img.style.left = ex + dx*d -w/2; var h = eh + dh*d; img.style.top = ey + dy*d - h/2 img.style.width = w; img.style.height = h; img.style.display = 'block'; d--; tID = setTimeout(move, s); } else { img.parentNode.removeChild(img); } } </script> </head> <body> <div style="float:right;"> <p> <img id="special_image" src="A.jpg"> </div> </body> </html>

質問者