忍者ブログ

CriCri

クリエイティブになりたいクリクリ工房

   

[PR]

×

[PR]上記の広告は3ヶ月以上新規記事投稿のないブログに表示されています。新しい記事を書く事で広告が消えます。

デモランキングバナー

画像のループ文

今回は猫テンプレで使用している、画像のループ文です。
数種類あるタイトルの画像が繰り返して表示されます。
完成品を探したけどそのまま使用できるものがなくて、改変や切り張りをしました。

このスクリプトは<head>と</head>の間、<title></title>の次に入れます。
    <head>
    ・
    ・
    ・
    <script type="text/javascript">
    <!--
    function changeBack(){
            j=0;
            divObj = document.getElementsByTagName("div");
            if(!divObj)return;
            for(i=0;i<divObj.length;i++){
                if(divObj[i].className=="EntryTitle"){
                    if (j%3) {
                        divObj[i].className = "EntryTitle" + (j%3)
                    }
                    j++;
                }
            }
        }
    -->
    </script>
    </head>
    <body onload="javascript:changeBack();">

これは記事のタイトル用に作ったものです。
プラグインの場合は"EntryTitle"のところを"PluginTitle"に変えてください。
ピンク色の箇所は画像の数です。画像の数をここに入れてください。
これで、クラスのEntryTitleがEntryTitle1、EntryTitle2というように変化していきます。
そしてJava Script をページの読み込み時に行使させるために、<body>に上記の緑色の部分を加えます。

あとCSSに画像を入れますが、0から数字が始まるので、EntryTitle {}、EntryTitle1 {}、EntryTitle2 {} というように番号を付けて、画像の数だけ指定をしください。
JavaScript が効かないブラウザは、最初のEntryTitle だけを表示します。
プラグインのタイトルの場合はPluginTitle {}、PluginTitle1 {}、PluginTitle2 {}といように番号を付けてください。

詳しい使用例は猫テンプレのソースを見ていただくとはっきり分かると思います。
機能の保障はしませんので、自己責任でお願いしますね。

拍手[1回]

デモランキングバナー
  

COMMENT

NAME
TITLE
MAIL (非公開)
URL
EMOJI
Vodafone絵文字 i-mode絵文字 Ezweb絵文字
COMMENT
PASS (コメント編集に必須です)
SECRET
管理人のみ閲覧できます
 

TRACKBACK

TrackbackURL

カレンダー

07 2017/08 09
S M T W T F S
1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31

AD

PR

ブログ内検索

素材サイト様

White Board様
White Board Banner
妙の宴様
妙の宴 Banner
もずねこ様
Mozneko Banner
押し花とアイコン様
押し花 バナー
petit sozai emi様
petit sozai emi
幕末維新新選組様
幕末維新新選組
The Heart of Eternity 様
thoe バナー
Crambon様
Crambon バナー
DragonArtz Design 様

プロフィール

メール de コンタクト

このブログへのリンク

Firefoxを支援しています

管理人はFirefoxの愛好者です。Internet Explorer は大嫌い。IEよりはるかに優れたFirefoxをお試しあれ。ダウンロードは下のバナーから無料でできます。
Firefox ブラウザ無料ダウンロード

現在の閲覧者

Copyright ©  -- CriCri --  All Rights Reserved

Design by CriCri / material by DragonArtz Desighns / powered by NINJA TOOLS / 忍者ブログ / [PR]