匿名使用者
匿名使用者 發問時間: 電腦與網際網路程式設計 · 1 0 年前

用Javascript,把圖片拖曳放到一個框框裡

如何將一個圖片在網頁上移動,

當觸碰到一個設訂好的框框時,

自動把圖片放到那個框框裡,

並可以知道放進去的是哪一張圖。

麻煩給我程式碼

1 個解答

評分
  • 1 0 年前
    最佳解答

    下方網址請參考可以任意移動圖片到網頁中任何位置也可放到框框中

    而圖片只要滑鼠移到圖片就有圖片註解

    http://fanlucy2.myweb.hinet.net/moveimeg.htm

    製作語法如下

    步驟一

    將下方語法放到網頁程式碼中</head>之上

    <SCRIPT Language="JavaScript">

    <!--

    Image1 = new Image();

    Image1.src = "圖片網址";

    // -->

    </SCRIPT>

    <style>

    .drag{position:relative;cursor:hand}

    </style>

    步驟二

    將下方語法放到網頁程式碼的<body>與</body>之間

    <A HREF="#"

    onMouseOver="if(document.images) myImage.src='圖片網址'"

    onMouseOut="if(document.images) myImage.src='圖片網址'"><IMG SRC="圖片網址"alt="圖片註解文字" BORDER="0" name="myImage"class="drag">

    </A><script language="JavaScript1.2">

    <!--

    var dragapproved=false

    var z,x,y

    function move(){

    if (event.button==1&&dragapproved){

    z.style.pixelLeft=temp1+event.clientX-x

    z.style.pixelTop=temp2+event.clientY-y

    return false

    }

    }

    function drags(){

    if (!document.all)

    return

    if (event.srcElement.className=="drag"){

    dragapproved=true

    z=event.srcElement

    temp1=z.style.pixelLeft

    temp2=z.style.pixelTop

    x=event.clientX

    y=event.clientY

    document.onmousemove=move

    }

    }

    document.onmousedown=drags

    document.onmouseup=new Function("dragapproved=false")

    //-->

    </script>

    參考資料:

    圖片參考:http://fanlucy2.myweb.hinet.net/0783.gif

還有問題?馬上發問,尋求解答。