Javascriptの最近のブログ記事

Coda-Slider 1.1.1を使ったスライドショー

Coda-Slider 1.1.1を入手

 

Coda-Slider 1.1.1から一式をダウロード

 

 

Coda-Slider 1.1.1の設置

 

ファイル構成は

 

index.html
images
coda-slider.1.1.1.js
coda-slider.1.1.1.pack.js
jquery-1.2.1.pack.js
jquery-easing.1.2.js
jquery-easing.1.2.pack.js
jquery-easing-compatibility.1.2.js
jquery-easing-compatibility.1.2.pack.js

 

となっている。

 

スタイルシートはinde.x.htmlへ直接書かれている。

 

そのままサーバへアップロードするだけで動いていまうが
最低でもjsフォルダの作成CSSの外部ファイル化はしておこう。

 

<div class="panel" title="Panel 1">?</div>
の部分を繰り返すと、表示されるパネルの数も増える。

 

パネルを増やした場合は忘れずに
<p id="cross-links">?</p>
内の | <a href="#2" class="cross-link">Panel 2</a>
も追加しておく。

それともう1つ

私の場合タブ部分をCSSボタンに背景画像を入れているので

パネルを追加した場合は「show.css」にも追加が必要。

 

 

サンプル

 

 別にもう一つスライドするパネルを表示させる場合には、
<head>内の<script>部分の"jQuery("div#xxxxx")"で、idを指定し、
<body>タグ内で<div id="slider#" class="csw">と指定する。

 

 

 

 

 

リッチテキストエディターTinyMCEを使う

TinyMCEからtinymceをDLし

適当なディレクトリへアップロード。


同じディレクトリ内に
tinymceの入力部分を配置したHTMLファイル(PHP)を
アップロード。

ファイルのheader部分へ
下記Javascriptを記述し

<script language="javascript" type="text/javascript" src="./jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">

tinyMCE.init({
    theme : "advanced",
    mode : "exact",
    elements : "edit-body",
    plugins : "save,preview,contextmenu",
    plugin_preview_width : "500",
    plugin_preview_height : "600",
    width: "600",
    theme_advanced_toolbar_location : "top",
//    theme_advanced_layout_manager : "SimpleLayout",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    theme_advanced_resizing : true,
    theme_advanced_resizing_use_cookie : true,
    theme_advanced_buttons1 : "newdocument,formatselect,fontselect,fontsizeselect,cut,copy,paste",
    theme_advanced_buttons2 : "undo,redo,separator,bold,separator,justifyleft,justifycenter,justifyright,justifyfull,separator,numlist,bullist,separator,outdent,indent,separator,forecolor,separator,preview,separator,cleanup,save,separator,code,link,unlink",
    theme_advanced_buttons3 : "",
    save_enablewhendirty : true,
    save_callback : "mySave",
    content_css : "styles-content.css",    // テキストエリアのフォントサイズを指定
    popups_css  : "styles-popups.css",    // ポップアップウィンドウのフォント名を指定
    apply_source_formatting : true,        // 出力する HTML を整形してくれる。デフォルトはオフ。
    language    : "ja_utf-8"            // 日本語対応
});

</script>

 

dody部分に

<form action="makefile.php" method="POST">
<p align="center">
<textarea id="edit-body" name="edit-body" rows="30" cols="22">
<?php
print $_POST['edit-body'];
?>
</textarea><br />
<input type="submit" value="送信" />

</p>
</form>

と記述すればひとまず動く。

赤字の部分が各ボタンの設定項目だ。

Javascriptで簡単ロールオーバー

スクリプトはこんな感じ。

 

function smartRollover() {
    if(document.getElementsByTagName) {
        var images = document.getElementsByTagName("img");

        for(var i=0; i < images.length; i++) {
            if(images[i].getAttribute("src").match("_off."))
            {
                images[i].onmouseover = function() {
                    this.setAttribute("src", this.getAttribute("src").replace("_off.", "_on."));
                }
                images[i].onmouseout = function() {
                    this.setAttribute("src", this.getAttribute("src").replace("_on.", "_off."));
                }
            }
        }
    }
}

if(window.addEventListener) {
    window.addEventListener("load", smartRollover, false);
}
else if(window.attachEvent) {
    window.attachEvent("onload", smartRollover);
}

 

 

HTML部分

 

<a href="×××.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image12','','img/〇〇〇_on.jpg',1)"><img src="img/〇〇〇_off.jpg" alt="×××" name="Image12" width="100" height="100" border="0"  /></a>

 

あとはロールオーバーさせる画像名の最後に「_off」「_on」を付け加えるだけ。

〇〇〇_off.jpg

〇〇〇_on.jpg

1  2