![](" + gsDir + "space.gif){kind=small}
＜4. 角丸用背景色の設定＞
湘南フレームの角丸部分を表現するために、背景色を設定するクラスが必要です。
「湘南フレーム」を使うHTMLに、背景色のみを設定するためのCSSを用意してください。
下記のスタイルをHTMLファイルの〜に記述します。
以上です。
● 補足１：複数のHTMLで湘南フレームを使いたい場合
＜1. 湘南フレームJavaScriptの設定項目を修正する＞
湘南フレームJavaScriptファイル（frame/shonan_frame.js)を
テキストファイルで開き（今読んでいるファイルが、shonan_frame.jsです）、
このファイルの上部にある、「湘南フレームURL」を、修正します。
【修正前】var gsDir = "frame/";
【修正後】var gsDir = "http://xxxx.com/yyyyy/frame/";
もともとあった"frame/"というHTMLファイルから湘南フレームディレクトリへの
相対パスを、"http://"から始まる絶対パスに修正してください。
＜2. 湘南フレームJavaScriptの読み込み部分を修正する＞
湘南フレームを読み込みたいHTMLファイルをテキストエディタで開き、
の"shonan_frame.js"の部分を
共通で利用する湘南フレームのパスに変更します。
（"http://"から始まる絶対パスでも、相対パスでも可能です）
● 補足２：背景色を指定するクラス名を「BgColor」以外にしたい場合
湘南フレームJavaScriptファイル（frame/shonan_frame.js)を
テキストファイルで開き（今読んでいるファイルが、shonan_frame.jsです）、
このファイルの上部にある、「背景色設定クラス」を、修正します。
******************************************************************************/
/******************************************************************************
ユーザー設定項目
******************************************************************************/
/* 背景色設定クラス名 ********************************************************/
var gsBackgroundClass = "BgColor";
/* 湘南フレームURL ********************************************************/
var gsDir = "http://www.maikaiohana.com/js/frame/";
/******************************************************************************
プログラム設定 ↓↓ここから下はいじらないでください↓↓
******************************************************************************/
var giZIndex = 2;
var giTimer = 1000;
/******************************************************************************
関数名 SetShonanFrameTimer
機能 湘南フレームタイマーを設定する
入力 なし
出力 なし
処理フロー 1. 1秒後にSetShonanFrameを実行する
******************************************************************************/
function SetShonanFrameTimer(sBgColor){
// MacIEの場合
if(CheckBrowserMode() == 3){
// 何もせずに終了する
return;
}
// 湘南オブジェクトリストを作成する
SaveShonanFrameObject();
// 湘南フレームをセットする（湘南フレームが存在しない場合は、作成する）
SetShonanFrame(sBgColor);
// 1秒後にSetShonanFrameを実行する
window.setInterval("SetShonanFrame('" + sBgColor + "');", giTimer);
}
/********************************************************************************
関数名 SaveShonanFrameObject
機能 ページに含まれる湘南オブジェクトをすべてリストに格納する
入力 なし
G出力 gaShonanObject 湘南オブジェクト
goLastShonanObject 最後の湘南オブジェクト
処理概要 1. 湘南クラスに対して繰り返す
1.1. 対象のクラスのオブジェクトを配列に追加する
2. 最後の湘南オブジェクトを返して終了する
********************************************************************************/
gaShonanObjects = new Array();
gaShonanClass = new Array();
var giLastPositionTop;
var giLastPositionLeft;
var goLastShonanObject;
function SaveShonanFrameObject(){
// 湘南クラス
aShonanClass = new Array("ShonanRound1","ShonanRound2","ShonanRound3",
"ShonanPhoto","ShonanPola","ShonanShadow","ShonanRShadow",
"ShonanCell", "ShonanPhotoCell");
var iShonanCnt = 0;
aClassObjects = new Array();
var iClassCnt = 0;
// 湘南クラスに対して繰り返す
for(iShonanCnt = 0; iShonanCnt < aShonanClass.length; iShonanCnt++){
// 対象のクラスのオブジェクトを取得する
aClassObjects = document.GetElementsByClass(aShonanClass[iShonanCnt]);
// 対象クラスに対して繰り返す
for(iClassCnt = 0; iClassCnt < aClassObjects.length; iClassCnt++){
// G配列に対象のクラスオブジェクトリストを追加する
gaShonanObjects[gaShonanObjects.length] = aClassObjects[iClassCnt];
// G配列に対象のクラス名を追加する
gaShonanClass[gaShonanClass.length] = aShonanClass[iShonanCnt];
}
}
// 最後の湘南オブジェクトの位置をG情報に格納する
giLastPositionTop = GetObjectPosition(gaShonanObjects[gaShonanObjects.length - 1], "top");
giLastPositionLeft = GetObjectPosition(gaShonanObjects[gaShonanObjects.length - 1], "left");
goLastShonanObject = gaShonanObjects[gaShonanObjects.length - 1];
return;
}
/******************************************************************************
関数名 SetShonanFrame
機能 湘南フレームクラスに対して湘南フレームをセットする
入力 sBgColor 背景色設定クラス名
bInitFlg はじめての起動フラグ(1:初期起動 0:2回目以降）
出力 なし
処理概要 ・対象オブジェクトに対するフレームが設定されていない場合は
フレームオブジェクトを生成する
・対象フレームを対象オブジェクトにマッチさせる
処理フロー 0. 2回目以降の処理の場合
0.1. 最後の湘南オブジェクトの位置を取得する
0.2. 前回のチェック位置と同じ場合
0.2.1. 終了する
1. 湘南オブジェクトリストに対して繰り返す
1.1. 対象の湘南フレームが存在しない場合
2.1.1. 対象オブジェクト配列に対してMakeObjectFrameを実行する
******************************************************************************/
var gbInitFlg = 1;
function SetShonanFrame(sBgColorClass){
// 最終オブジェクト位置
var iLastPositionTop, iLastPositionLeft;
// カウンタ
var iObjectCnt = 0;
// 湘南フレームID
var sShonanId;
var iObjectsCnt;
var sFrameObjectName;
var oFrameObject;
// 2回目以降の処理の場合
if(gbInitFlg != 1){
// 最後の湘南オブジェクトの位置を取得する
iLastPositionTop = GetObjectPosition(goLastShonanObject, "top");
iLastPositionLeft = GetObjectPosition(goLastShonanObject, "left");
// 前回チェックしたときと、位置が等しい場合
if (iLastPositionTop == giLastPositionTop && iLastPositionLeft == giLastPositionLeft){
// 何もしないで終了する
// return;
// 前回と位置が異なる場合
} else {
// 最終位置を更新する
giLastPositionTop = iLastPositionTop;
giLastPositionLeft = iLastPositionLeft;
// 画像サイズを調整する
}
}
// 湘南オブジェクトリストに対して繰り返す
for(iObjectsCnt = 0; iObjectsCnt < gaShonanObjects.length; iObjectsCnt++){
// 対象の湘南フレームIDを作成する
sShonanId = "Shonan_" + iObjectsCnt;
// 対象の湘南フレームが存在する場合
if(document.getElementById(sShonanId)){
// 対象オブジェクト用のフレームをオブジェクトにマッチさせる
SetFramePosition(gaShonanObjects[iObjectsCnt], document.getElementById(sShonanId), gaShonanClass[iObjectsCnt]);
// 角丸シャドウの場合
if(gaShonanClass[iObjectsCnt] == "ShonanRShadow"){
// 角丸オブジェクト名を作成する
sShonanId = sShonanId + "R";
// 角丸もマッチさせる
SetFramePosition(gaShonanObjects[iObjectsCnt], document.getElementById(sShonanId), "ShonanRound1");
}
// 対象の湘南フレームが存在しない場合
} else {
// safariの場合
if(CheckBrowserMode() == 2){
// 対象画像がダウンロード済みの場合
if(gaShonanObjects[iObjectsCnt].width > 10){
// フレームオブジェクトを作成する
MakeFrame(gaShonanObjects[iObjectsCnt], gaShonanClass[iObjectsCnt], sBgColorClass, sShonanId);
}
// Safari以外のブラウザの場合(img.completeがundefinedでないブラウザの場合）
} else {
// 対象画像がダウンロード済みの場合
if(gaShonanObjects[iObjectsCnt].complete == true){
// フレームオブジェクトを作成する
MakeFrame(gaShonanObjects[iObjectsCnt], gaShonanClass[iObjectsCnt], sBgColorClass, sShonanId);
}
}
}
}
gbInitFlg = 0;
return;
}
/******************************************************************************
関数名 MakeFrame
機能 フレームを作成する
入力 oElement 対象オブジェクト
sClassName クラス名
sBgColorClass 背景色設定クラス名
sFrameId フレームオブジェクト名
出力 なし
G出力 oDiv divオブジェクト
処理概要 1. 角丸の場合
1.1. 角丸オブジェクトを出力する
2. フレームの場合
2.1. フレームオブジェクトを出力する
******************************************************************************/
function MakeFrame(oElement, sClassName, sBgColorClass, sFrameId){
var iRoundNum;
// 角丸の場合
if(sClassName.search(/ShonanRound/) == 0){
// 角丸番号を取得する
iRoundNum = sClassName.substr(11,1);
// 角丸を表示する
StyleRound(oElement, sBgColorClass, iRoundNum, sFrameId);
// 写真フレームの場合
} else if (sClassName == "ShonanPhoto"){
// 写真フレームを表示する
StyleFrame(oElement, "PHOTO", sBgColorClass, sFrameId);
// POLAフレームの場合
} else if (sClassName == "ShonanPola"){
// POLAフレームを表示する
StyleFrame(oElement, "POLA", sBgColorClass, sFrameId);
// シャドウフレームの場合
} else if (sClassName == "ShonanShadow"){
// シャドウフレームを表示する
StyleFrame(oElement, "SHADOW", sBgColorClass, sFrameId);
// 角丸シャドウフレームの場合
} else if (sClassName == "ShonanRShadow"){
// 角丸シャドウフレームを表示する
StyleFrame(oElement, "RSHADOW", sBgColorClass, sFrameId);
// セロファンの場合
} else if (sClassName == "ShonanCell"){
// セロファンを表示する
ShowAccessory(oElement, "CELLOPHANE", sFrameId);
// PHOTOセロファンの場合
} else if (sClassName == "ShonanPhotoCell"){
// セロファンを表示する
ShowAccessory(oElement, "PHOTOCELLOPHANE", sFrameId);
}
}
/******************************************************************************
関数名 SetFramePosition
機能 フレームオブジェクトを対象のオブジェクトにフィットさせる
入力 oElement 対象オブジェクト
oFrameObject フレームオブジェクト
sShonanClass 湘南フレームクラス名
出力 なし
処理概要 1. 対象オブジェクトの位置を取得する
2. フレームオブジェクトの位置を移動する
******************************************************************************/
function SetFramePosition(oElement, oFrameObject, sShonanClass){
// 対象オブジェクトの位置を取得する
var iTop = GetObjectPosition(oElement, "top");
var iLeft = GetObjectPosition(oElement, "left");
// 湘南クラスがPhotoの場合
if(sShonanClass == "ShonanPhoto" || sShonanClass == "ShonanPola"){
// 位置を調整する
iTop = iTop - 15;
iLeft = iLeft - 15;
} else if (sShonanClass == "ShonanShadow" || sShonanClass == "ShonanRShadow"){
iTop = iTop - 2;
iLeft = iLeft - 2;
} else if (sShonanClass == "ShonanCell"){
iTop = iTop - 20;
iLeft = iLeft + oElement.width / 2 - 52;
} else if (sShonanClass == "ShonanPhotoCell"){
iTop = iTop - 30;
iLeft = iLeft + oElement.width / 2 - 52;
}
// フレーム位置を移動する
oFrameObject.style.top = iTop + "px";
oFrameObject.style.left = iLeft + "px";
}
/********************************************************************************
関数名 GetObjectPosition
機能 対象オブジェクトの位置を取得する
入力 oObject 対象オブジェクト
sMode 取得座標 (top|left)
********************************************************************************/
function GetObjectPosition( oObject, sMode ) {
var iLeft = 0;
var iTop = 0;
var sPosition = "";
while( oObject.offsetParent != null ) {
iLeft += oObject.offsetLeft;
iTop += oObject.offsetTop;
oObject = oObject.offsetParent;
}
iLeft += oObject.offsetLeft;
iTop += oObject.offsetTop;
// Left座標を取得する場合
if(sMode == "left" || sMode == "LEFT"){
return iLeft;
} else {
return iTop;
}
}
/********************************************************************************
関数名 ShowRoundPixel
機能 角丸用のピクセルを表示する
入力 sClass 背景色を設定したクラス名
iRoundType 角サイズモード
iTop ポジション
iBottom ポジション
iWidth 画像横幅
iHeight 画像高さ
sId オブジェクト名
出力 なし
********************************************************************************/
function ShowRoundPixel(sClass, iRoundType, iTop, iLeft, iWidth, iHeight, sId){
var sHtml = "";
var oDiv = document.createElement('div');
oDiv.id = sId;
var iInnerWidth, iInnerHeight;
var iRoundSize;
// 表示オブジェクトの位置を設定する
oDiv.style.top = iTop + "px";
oDiv.style.left = iLeft + "px";
oDiv.style.position = "absolute";
oDiv.style.zIndex = giZIndex;
giZIndex++;
// 角サイズ1の場合
if(iRoundType == 1){
// 角丸サイズを設定する
iRoundSize = 1;
// 画像のフレーム抜き横幅、高さを作成する
iInnerWidth = iWidth - iRoundSize * 2;
iInnerHeight = iHeight - iRoundSize * 2;
sHtml += " | ";
sHtml += " | ";
sHtml += " | ";
sHtml += "
| ||
| ";
sHtml += " | ";
sHtml += " | ";
sHtml += "
| ";
sHtml += " | ";
sHtml += " | ";
sHtml += "
| ";
sHtml += " | ";
sHtml += " | ";
sHtml += "
| ";
sHtml += " | ";
sHtml += " | ";
sHtml += "
| ";
sHtml += " | ";
sHtml += " | ";
sHtml += "
| ";
sHtml += " | ";
sHtml += " | ";
sHtml += "
| ";
sHtml += " | ";
sHtml += " | ";
sHtml += "
| ";
sHtml += " | ";
sHtml += " | ";
sHtml += "
| ";
sHtml += " | ";
sHtml += " | ";
sHtml += "
| ";
sHtml += " | ";
sHtml += " | ";
sHtml += "
| ";
sHtml += " | ";
sHtml += " | ";
sHtml += "
| '; sHtml += ' | '; sHtml += ' | '; sHtml += ' | ||||||
| '; sHtml += ' | ';
sHtml += '
| ';
sHtml += ' '; sHtml += ' | ||||||
| '; sHtml += ' | '; sHtml += ' | '; sHtml += ' |
| '; sHtml += ' | '; sHtml += ' | '; sHtml += ' | ||||||
| '; sHtml += ' | ';
sHtml += '
| ';
sHtml += ' '; sHtml += ' | ||||||
| '; sHtml += ' | '; sHtml += ' | '; sHtml += ' |
| '; sHtml += ' | '; sHtml += ' | '; sHtml += ' | ||||||
| '; sHtml += ' | ';
sHtml += '
| ';
sHtml += ' '; sHtml += ' | ||||||
| '; sHtml += ' | '; sHtml += ' | '; sHtml += ' |
| '; sHtml += ' | '; sHtml += ' | '; sHtml += ' | ||||||
| '; sHtml += ' | ';
sHtml += '
| ';
sHtml += ' '; sHtml += ' | ||||||
| '; sHtml += ' | '; sHtml += ' | '; sHtml += ' |
| '; sHtml += ' | '; sHtml += ' | '; sHtml += ' |
| '; sHtml += ' | '; sHtml += ' | '; sHtml += ' |
| '; sHtml += ' | '; sHtml += ' | '; sHtml += ' |
| '; sHtml += ' | '; sHtml += ' | '; sHtml += ' |
| '; sHtml += ' | '; sHtml += ' | '; sHtml += ' |
| '; sHtml += ' | '; sHtml += ' | '; sHtml += ' |
| '; sHtml += ' | '; sHtml += ' | '; sHtml += ' |
| '; sHtml += ' | '; sHtml += ' | '; sHtml += ' |
| '; sHtml += ' | '; sHtml += ' | '; sHtml += ' |
| '; sHtml += ' | '; sHtml += ' | '; sHtml += ' |
| '; sHtml += ' | '; sHtml += ' | '; sHtml += ' |
| '; sHtml += ' | '; sHtml += ' | '; sHtml += ' |
| '; sHtml += ' | '; sHtml += ' | '; sHtml += ' |
| '; sHtml += ' | '; sHtml += ' | '; sHtml += ' |
| '; sHtml += ' | '; sHtml += ' | '; sHtml += ' |
| '; sHtml += ' |
| '; sHtml += ' |