【Javascript】DOM Samples /Core　Node/removeChild()

ここに H E L P を書くのです

<script type="text/javascript">
<!--

  //ホーバーヘルプ出す
  function helpon(e,text){
    if(document.getElementById)
      apendTextData(document.getElementById('helptext'),text)
    clearTimeout(slideID['help']);mvFlag['help']=false 
    slideLAYERs('help', (getMouseX(e)+10) ,-300,(getMouseX(e)+10), (getMouseY(e)-20) ,10,20)
  }

  //ホーバーヘルプ隠す
  function helpout(e,text){
    clearTimeout(slideID['help']);mvFlag['help']=false 
    slideLAYERs('help',(getMouseX(e)+10),(getMouseY(e)-20),(getMouseX(e)+10),-300,5,20)
  }

  //文字の書き換え処理
  function apendTextData(oj,text){
  
    removeText( oj , oj.lastChild )
    appendText( oj,text )
  
  }
  
  // 文字列を追加する 
  function appendText( oj , text )
  { 
    if(document.implementation)
      return oj.appendChild( document.createTextNode(text) )
  }
  
  // 文字列を削除する 
  function removeText( oj , oldNode )
  { 
    if(document.implementation)
      return oj.removeChild( oldNode )
  }

  ///////////////////
  //マウスXY座標get

  //--マウスX座標get 
  function getMouseX(e){
    if(window.opera)                            //o6用
        return e.clientX
    else if(document.all){
      if(document.compatMode == "CSS1Compat")   //e6用
        return document.documentElement.scrollLeft+event.clientX
      else                                      //e4,e5用
        return document.body.scrollLeft+event.clientX
    }
    else if(document.layers||document.getElementById)
        return e.pageX                          //n4,n6,m1用
  }

  //--マウスY座標get 
  function getMouseY(e){
    if(window.opera)                            //o6用
        return e.clientY
    else if(document.all){
      if(document.compatMode == "CSS1Compat")   //e6用
        return document.documentElement.scrollTop+event.clientY
      else                                      //e4,e5用
        return document.body.scrollTop+event.clientY
    }
    else if(document.layers||document.getElementById)
        return e.pageY                          //n4,n6,m1用
  }

  ///////////////////
  //レイヤ?スライド 
  var wx=new Array(),wy=new Array(),count=new Array()
  var ex=new Array(),ey=new Array(),spd=new Array()
  var step=new Array(),stepX=new Array(),stepY=new Array()
  var mvFlag=new Array(),slideID=new Array()
  function slideLAYERs(layName,startX,startY,endX,endY,speed,stpx){

    //--移動初期化
    if(!mvFlag[layName]){
     if(document.layers)clearTimeout(slideID[layName])
      count[layName]=0        //--移動回数カウント
      var ofX=(endX-startX)   //--移動距離x
      var ofY=(endY-startY)   //--移動距離y
      step[layName]=stpx      //--ステップ数
      stepX[layName]=ofX/stpx //--移動量x
      stepY[layName]=ofY/stpx //--移動量y
      wx[layName]=startX      //--移動中のx座標
      wy[layName]=startY      //--移動中のy座標
      ex[layName]=endX        //--到着場所のx座標
      ey[layName]=endY        //--到着場所のy座標
      spd[layName]=speed      //--移動スピ?ド(間隔)
      mvFlag[layName]=true    //--移動中ならtrue
    }
    if(mvFlag[layName]&&(count[layName]<=step[layName]-1)){
      count[layName]++
      wx[layName]+=stepX[layName]
      wy[layName]+=stepY[layName]
      if(document.getElementById){ //--移動
        document.getElementById(layName).style.left=wx[layName]
        document.getElementById(layName).style.top=wy[layName]
      } else if(document.layers) {
        document.layers[layName].moveTo(wx[layName],wy[layName])
      } else if(document.all){
        document.all(layName).style.pixelLeft=wx[layName]
        document.all(layName).style.pixelTop=wy[layName]
      }
      if(document.layers)clearTimeout(slideID[layName])
      slideID[layName]=setTimeout('slideLAYERs("'+layName+'")',spd[layName])
    }else{ //--停止
      wx[layName]=ex[layName]
      wy[layName]=ey[layName]
      clearTimeout(slideID[layName]);mvFlag[layName]=false
    }
  }


  //--layNameで指定したオブジェクトを返す
  //  (必ずonload後に実行すること)
  function getLayOj(layName){  
    if(document.getElementById) 
      return document.getElementById(layName)                //e5,e6,n6,n7,m1,o6用
    else if(document.all)   return document.all(layName)     //e4用
    else if(document.layers)return document.layers[layName]  //n4用
  }

//-->
</script>

<body bgcolor="#ffffff">

↓このリンクに触るとヘルプが出ます
<br><br>
<a href="#" id="test0" 
   onmouseover="helpon(event,'これはリンク0のヘルプです。◎◎◎◎◎')"
   onmouseout ="helpout(event)">★リンク0</a>
<br><br>
<a href="#" id="test1" 
   onmouseover="helpon(event,'これはリンク1のヘルプです。▲▲▲▲▲')"
   onmouseout ="helpout(event)">★リンク1</a>
<br><br>
<a href="#" id="test2" 
   onmouseover="helpon(event,'これはリンク2のヘルプです。◆◆◆◆◆')"
   onmouseout ="helpout(event)">★リンク2</a>


<div id = "help" 
     style = "position         : absolute          ;
              top              : -300px            ;
              left             : 100px             :
              width            : 200px             ;
              height           : 200px             ;
              padding          : 8px               ;
              background-color : #9acd32           ;
              border-top       : 1px solid #dddddd ;
              border-right     : 1px solid #444444 ;
              border-bottom    : 1px solid #000000 ;
              border-left      : 1px solid #bbbbbb ;">
<img src="//img.allabout.co.jp/gm/article/24078/help.gif" width="60" height"60" border="0">
<p id="helptext" style="overflow:visible;width:200px">
ここに H E L P を書くのです
</p>
</div>