ナビの上または下に画像を追加

時間により画像入替え

No.H04 ナビの上に時間により切り替わる画像を表示したい

CSSを変更することで、ヘッダとナビの間に画像を挿入します。元のヘッダはそのまま表示されます。またimgchangerプラグインを導入して時間または日付指定により指定した画像を表示します。
この方法はjQueryは使用していません。
◆手順

  1. imgchangerプラグインをD++のサイトからダウンロードします。
  2. ダウンロードしたプラグインを一部修正します。paddingをゼロに設定します。
    ソースの上の行が修正前、下の行が修正後です。一応修正前のものは、コメントにして残しておきます。
    注意:保存するとき、文字コードはUTF-8で保存してください。
    imgchanger.inc.phpのソース
    /* return "<div style=\"" . $align . "padding:.5em 1.5em .5em 1.5em\"><img src=\"$uri\" alt=\"\" /></div>";*/
       return "<div style=\"" . $align . "padding:0\"><img src=\"$uri\" alt=\"\" /></div>";
  3. imgchanger.inc.phpを自分のサイトの /plugin のフォルダ配下にアップロードします。
  4. 横750px縦70pxの画像を3つ作成します。(サイズは適当に変更してください)
    0時から6時まで:head_3.jpg画像の説明
    6時から12時まで:head_1.jpg画像の説明
    12時から24時まで:head_2.jpg画像の説明
  5. SWFUで画像を全部アップロードします。
    以下のコードをナビ2に入れます。これで全ページのヘッダに画像が入るようになります。
#beforescript{{
<style type="text/css">
#wrapper{
  position: relative;
}
.headinf {
width: 750px;
height: 70px;   <--- 挿入する画像の高さに調整 A=70
position: absolute;
top: 40px;    <--- 使用しているデザインの高さに調整 B=40
left: 0px;
}
#logo_text {
height:110px;  <--- 高さを調整 A+B=110
}
</style>
}}
#html2(<div class="headinf">)
#imgchanger(Hi,swfu/d/,L,0000,swfu/d/head_3.jpg,0600,swfu/d/head_1.jpg,1200,swfu/d/head_2.jpg)
#html(</div>)

◆解説

  • 使用しているデザインのヘッダの高さと作成した画像の高さを調整してください。
    main.cssの #logo_text を探すと 使用しているヘッダのheight がわかります。
  • #logo_text のheightを大きくして挿入する画像が入る領域を確保しています。
  • imgchangerは画像の数だけ、パラメータを増やしてください。
  • imgchangerの使い方は、imgchanger.inc.phpのソース内に書いてありますが、その通りにしても表示されませんでした。この方法では確認済です。

powered by Quick Homepage Maker 4.91
based on PukiWiki 1.4.7 License is GPL. QHM

最新の更新 RSS  Valid XHTML 1.0 Transitional