サイトで宣伝したいすべての画像を紹介するには、1つの画像だけでは不十分な場合があります。 いくつかのサイトがいくつかの画像を回転させる方法を疑問に思ったことがあり、それを自分でやりたいのであれば、まあ、これ以上不思議ではあ 私はそれがどのように行われているかをお見せするためにここにいます。 また、追加の利点として、私はあなたが一つの場所にあなたの画像を更新し、それらの更新があなたのサイト上でグローバルに表示させることができ
あなたが料理サイトを持っていて、あなたがバナーで回転するように紹介した5つの最新の食事の写真が欲しいとしましょう。 または、不動産の場所を有し、あなたのページすべての特定の点で回るようにあなたの10の最近のリストの映像がほしいと思うことを言おう。 機能を追加するには、各画像を別のページにリンクする必要があります。 このすべては、次のコードでは問題ありません。
まず、整理する必要があります。 同じフォルダにすべての画像を収集し、それらが同じサイズであることを確認してください。 それらが同じサイズではなく、それらを歪ませたくない場合は、各画像のキャンバスのサイズを変更し、画像自体のサイズを変更しないでください。 このようにして、画像が表示されるプレースホルダーは、新しい画像が表示されるたびに形状が変更されません。
次に、画像に関連付けたいすべてのリンクを収集し、後でコピーして貼り付けることができるように便利な場所に保存します。
次に、イメージローテータを表示する各ページのヘッダーに次のものを貼り付ける必要があります:
<script language="JavaScript1.2″>var howOften = 5; //number often in seconds to rotate
var current = 0; //start the counter at 0
var ns6 = document.getElementById&&!document.all; //detect netscape 6// place your images, text, etc in the array elements here
var items = new Array();
items="<a href='link.htm' ><img alt='image0 (9K)' src=' /Images/image0.jpg' height='300′ width='300′ border='0′ /></a>"; //a linked image
items="<a href='link.htm'><img alt='image1 (9K)' src='/Images/image1.jpg' height='300′ width='300′ border='0′ /></a>"; //a linked image
items="<a href='link.htm'><img alt='image2 (9K)' src='/Images/image2.jpg' height='300′ width='300′ border='0′ /></a>"; //a linked image
items="<a href='link.htm'><img alt='image3 (9K)' src='/Images/image3.jpg' height='300′ width='300′ border='0′ /></a>"; //a linked image
items="<a href='link.htm'><img alt='image4 (9K)' src='/Images/image4.jpg' height='300′ width='300′ border='0′ /></a>"; //a linked image
items="<a href='link.htm'><img alt='image5 (18K)' src='/Images/image5.jpg' height='300′ width='300′ border='0′ /></a>"; //a linked image
function rotater() {
document.getElementById("placeholder").innerHTML = items;
current = (current==items.length-1) ? 0 : current + 1;
setTimeout("rotater()",howOften*1000);
}function rotater() {
if(document.layers) {
document.placeholderlayer.document.write(items);
document.placeholderlayer.document.close();
}
if(ns6)document.getElementById("placeholderdiv").innerHTML=items
if(document.all)
placeholderdiv.innerHTML=items;current = (current==items.length-1) ? 0 : current + 1; //increment or reset
setTimeout("rotater()",howOften*1000);
}
window.onload=rotater;
//–>
</script>
一見すると、このコードは威圧的に見えることがあります。 しかし、あなたがしなければならないのは、画像ファイルへのパスを更新し、リンクのUrlを入力することだけです。 もちろん、サイトに合わせて高さと幅の属性も更新する必要があります。
4つの画像だけを回転させたい場合は、項目行の1つを削除するだけです。 追加する場合は、項目をコピーして貼り付けて、項目などに更新します。
あなたは今、あなたのサイトにこの画像回転子を追加するための地面の仕事を築いてきました。 しかし、あなたの画像がページに表示されるためにあなたがする必要があるもう一つのステップがあります。 ページ上の画像をどこに表示してコピーするかを把握します:
<layer id="placeholderlayer"></layer><div id="placeholderdiv"></div>
それはそれにあるすべてです。 私が最初に自分のサイトに画像回転子を追加する作業を始めたとき、それはコピーして貼り付けるほど簡単ではありませんでした。 私はオンラインで見つけたコードのいくつかの異なる例を調べました。 それらのほとんどは動作しませんでした。 上記のコードも機能しませんでしたが、あちこちでいくつかの調整を行い、それを機能させることができました。 私はあなたのために難しい部分をしました。 今、あなたがしなければならないのは、あなたの画像やリンクを更新し、少しコピーと貼り付けを行い、離れて行くことです。
あなたの場所内の複数の異なったページのこのイメージの回転子を使用することにしたらそして後であなたが1つの位置からそうすることができる ただし、これには事前に計画する必要があります。 不動産サイトの例に戻りましょう。 画像を保存するときは、画像ごとに同じ規則を使用することをお勧めします。jpg”と”House2.jpg”など。 あなたは家の新しいシリーズを紹介したいときには、単に前と同じファイル名を使用して、新しい画像の名前を付けます。 そうすれば、ブラウザがキャッシュをクリアするか、ページを更新した後、すべてのページに新しい画像が表示されます。
同じことが各リンクで機能します。 私の推薦はそれぞれに名前を付けることです。htmファイル、”House1.htm”と”House2.htm”など。 このようにして、あなたがしなければならないのは、内のコンテンツを更新することだけです。htmファイルとimage rotator内のリンクは自動的に新しいコンテンツを指します。