画像をドラッグしてみよう！～応用・音量調節～（DHTML関連） | 小技集

画像をドラッグしてみよう！～応用・音量調節～

トップ > 小技集 > （DHTML関連）画像をドラッグしてみよう！～応用・音量調節～

ドラッグできる画像の小技を応用すると、こんなものも作れます。

　下の音量調節はドラッグできます。（IE、Safari動作確認。FireFoxでは残念ながら動きません。また、ドラッグできるだけで、実際にパソコンの音量が調節されるわけではありません。）

　ソースは以下のようになります。

<?xml version="1.0" encoding="Shift_JIS"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<title>音量調節</title>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<style type="text/css">
.drag{
position:relative;
cursor:pointer;
}
.measure{
background-image:url(/img/measure.gif);
background-repeat:no-repeat;
background-position:center;
}
</style>
<script type="text/javascript"><!--
var dragobject={
  x : 0, offsetx : null, targetobj : null, dragapproved : 0,
  initialize:function(){
    document.onmousedown=this.drag
    document.onmouseup=function(){this.dragapproved=0}
  },
  drag:function(){
    var evtobj=window.event;
    this.targetobj=event.srcElement;
    if (this.targetobj.className=="drag"){
      this.dragapproved=1
      if (isNaN(parseInt(this.targetobj.style.left))){this.targetobj.style.left=0}
      this.offsetx=parseInt(this.targetobj.style.left)
      this.x=evtobj.clientX
      if (evtobj.preventDefault)
        evtobj.preventDefault()
      document.onmousemove=dragobject.moveit
    }
  },
  moveit:function(){
    var evtobj=window.event;
    if (this.dragapproved==1){
        this.targetobj.style.left=this.offsetx+evtobj.clientX-this.x+"px"
      if (parseInt(this.targetobj.style.left)<0){
        this.targetobj.style.left="0px"
      }
      if (parseInt(this.targetobj.style.left)>300){
        this.targetobj.style.left="300px"
      }
      return false
    }
  }
}
dragobject.initialize();
//--></script>
</head>
<body>
<table><tr><td width="320" class="measure">
<img src="/img/slider.gif" class="drag" />
</td></tr></table>
</body>
</html>

ソース解読のためのヒント

ポイント１：垂直方向には移動させない
	「画像をドラッグしてみよう！」で紹介したソースから、垂直方向（y方向）に移動させるためのコードを削除します。

ポイント２：水平方向の移動を制限する
	１～５の目盛り上だけを移動するように、水平方向（x方向）の移動を制限します。音量調節のつまみの画像の左側のx座標が０（目盛りの一番左端）未満になったときは強制的に０に戻し、３００（目盛りの一番右端）を超えたときは強制的に３００に戻します。

ポイント３：目盛りの画像はテーブルのセルの背景とする
	テーブルのtdタグにCSSのクラスを適用し、tdタグの背景画像を指定します。

ポイント４： z方向のコードを削除する
	今回はドラッグする画像が一つだけなので、重なりは問題とならないため、z方向のコードは削除します。

トップ > 小技集 > （DHTML関連）画像をドラッグしてみよう！～応用・音量調節～

トップ | このサイトについて | 管理者へメール | サイトマップ