HOME 　>>> 　HTML整理ノート 　>>> DHTML -- 基本編　　　応用編

Colorパレット

タイトルバーをドラッグすれば、Colorパレット、操作ボタンを移動できます。右上の[×]ボタンでパレットを閉じれます。色をクリックすれば、カラー名が表示される。色を選択し操作ボタンを押す。 ［Colorﾊﾟﾚｯﾄを開く］

Colorパレット


カラー名は

                     
                     
                           
                           
                           
                           
                           

　

操作ﾎボタン

　

　

　

　

　

　

　

HTML Source......................................................................>>>

<style TYPE="text/css"><!--
    .off {width:25;height:20;
            border-left:1px solid white;
            border-top:1px solid white;
            border-right:1px solid black;
            border-bottom:1px solid black;
            cursor:hand;}
    .over {width:25;height:20;
            border-left:1px solid black;
            border-top:1px solid black;
            border-right:1px solid white;
            border-bottom:1px solid white;
            cursor:hand;}
    .on {width:25;height:20;
            border:3px solid black;
            cursor:hand;}
--></style>
<script language="JavaScript"><!--
var old_Ele = null;    //1つ前のｲﾍﾞﾝﾄ要素を記憶
function Over(){    //ﾏｳｽｵｰﾊﾞｰされた場合
  if(old_Ele != null && old_Ele.className != "on")
      old_Ele.className = "off";
  var Ele = event.srcElement;    //ｲﾍﾞﾝﾄ要素を取得
  if(Ele.tagName == "SPAN" && Ele.className != "on"){
      Ele.className = "over";
      old_Ele = Ele;    //現在の要素を1つ前として記憶
  }
}

var old_EleON = null;//1つ前にｸﾘｯｸされた要素を記憶
function ColorON(){         //ｸﾘｯｸされた場合
    if(old_EleON != null)old_EleON.className = "off";
    var Ele = event.srcElement;     //ｲﾍﾞﾝﾄ要素を取得
    if(Ele.tagName == "SPAN"){
        colorName.value = Ele.style.backgroundColor;
        Ele.className = "on";
        old_EleON = Ele;//現在の要素を1つ前として記憶
    }
}

var flg = 0;
var x1,x2,y1,y2;
var el = null;        //ﾄﾞﾗｯｸﾞする対象要素
function Down(){
    el = event.srcElement;//ｲﾍﾞﾝﾄ対象の要素
    x1 = event.x;    //mouseﾀﾞｳﾝ時のX座標
    y1 = event.y;      //mouseﾀﾞｳﾝ時のY座標
    flg = 1;
}

function Drag(){
  if(flg == 1){
    y2 = event.y;        //現在のﾏｳｽY座標
    x2 = event.x;        //現在のﾏｳｽX座標
   
    if(el.id=="title"){  //[Colorﾊﾟﾚｯﾄ]のﾀｲﾄﾙﾊﾞｰの場合*/
        panel.style.pixelLeft += x2 - x1;
        panel.style.pixelTop += y2 - y1;
    }else if(el.id=="btntitle"){ //[操作ﾎﾞﾀﾝ]のﾀｲﾄﾙﾊﾞｰの場合
        btn.style.pixelLeft += x2 -x1 ;
        btn.style.pixelTop += y2 -y1;
    }
    y1 = y2;
    x1 = x2;
  }
    event.returnValue = false;//ｲﾍﾞﾝﾄの標準動作を無効する
    event.cancelBubble = true;
        //このｲﾍﾞﾝﾄがｲﾍﾞﾝﾄ階層を浮上(bubble up)するのを停止
}
document.onmousemove = Drag;

function BgChange(){    //[背景色の変更]ﾎﾞﾀﾝ
    document.bgColor = colorName.value;
}
function TxChange(){    //[文字色の変更]ﾎﾞﾀﾝ
    by.style.color = colorName.value;
}
//--></script>
</head>

<body id="by">

<div id="panel"
    style="position:absolute;top:130;left:30;
   width:250;height:100;
    background-color:gainsboro;
    border-right:thin solid gray;
    border-bottom:thin solid gray;
    border-left:thin solid white;
    border-top:thin solid white;">

  <span id="title"
    style="position:absolute;width:100%;height:20;
    background-color:navy;color:lime;font:11pt;
    text-align:center;cursor:hand;"
  onmousedown="Down();" onmouseup="flg = 0;">Colorﾊﾟﾚｯﾄ
  <button style="position:absolute;top:0;left:220;
     width:20;height:20;width:20;height:20;
     background-color:gray;color:yellow;
     font:11pt;cursor:hand;"
     onclick="panel.style.visibility='hidden';">
    ×</button>
  </span>

  <p>ｶﾗｰ名は<input type="text" name="colorName" size="15"
    style="color:red;font:14pt 'Times New Roman';
        text-align:center;"></p>

  <div onmouseover="Over();" onclick="ColorON();">
    <span class="off" style="background-color:white;">
        &nbsp;&nbsp; </span>
    <span class="off" style="background-color:azure;">
        &nbsp;&nbsp; </span>
･･･(途中省略)･･･
    <span class="off" style="background-color:purple;">
        &nbsp;&nbsp; </span>
  </div>
</div>

<div id="btn"
    style="position:absolute;top:130;left:300;width:114;">
  <span id="btntitle"
    style="position:absolute;width:100%;
    background-color:navy;color:lime;font:10pt;
    text-align:center;cursor:hand;"
  onmousedown="Down();" onmouseup="flg = 0;">操作ﾎﾞﾀﾝ</span>
  <button onclick="BgChange();">背景色の変更</button><br>
  <button onclick="TxChange();">文字色の変更</button>
</div>

end(最終更新:12/11/6)