首頁 教學程式分享 網頁白板 (IE Only)

香港天氣


上 午 2 時 天 文 台 錄 得:
氣 溫 : 29 度
相 對 濕 度 : 百 分 之 85
天 氣 : 大 致 多 雲

專題內容連結

訪客資料

mod_vvisit_countermod_vvisit_countermod_vvisit_countermod_vvisit_countermod_vvisit_countermod_vvisit_countermod_vvisit_counter
mod_vvisit_counter今天129
mod_vvisit_counter昨天764
mod_vvisit_counter本星期893
mod_vvisit_counter上星期6176
mod_vvisit_counter本月4938
mod_vvisit_counter上月31146
mod_vvisit_counter總人次610589

20 分鐘內到訪人數 21
您的 IP : 38.107.191.83
網頁白板教學

網頁白板教學

電子白板在教學上的而且確很方便,但每次上課都要作此「大動作」,或多或少都會浪費寶貴的上課時間。

其實,只要在網頁中加入DHTML,即可把普通網頁改變為互動白板。雖然不能說能完全替代「電子白板」,不過某程度上確實有一定的實用價值。

雖然,使用 「Layer」 也可以做到相同效果,而且,也不用受 DHTML 的限制。只是,不但使用上來麻煩、對位困難,也不能對「Text box」有所支援。

 

網頁白板:動物細胞
網頁白板:植物細胞

 

若各位想看看「Layer」的效果,可查看本站「教授學生腦圖概念」的環節,此頁便是以「Layer」作成。

 

教授學生腦圖概念

 

由於以下程式必須使用到 DHTML,因此只能使用 Microsoft Internet Explorer 或同樣程式核心的瀏覽器才能正常瀏覽本頁!

 

使用方法及參考資料

 

使用方法及參考資料
源碼下載: http://www.dynamicdrive.com/
稱: Dragable elements Script IE
簡介: A versatile script that enables any image(s) and text on a page to be dragable.
使用步驟: 把以下 html 碼加在網頁 <head> 的當中
備忘錄: 若不清楚,可查看附例的源碼

 

<!--
.drag{position:relative;cursor:hand}
-->
< /style>
< script language="JavaScript1.2">
< !--

/*
Drag and Drop Script-
?Dynamic Drive (www.dynamicdrive.com)
For full source code, installation instructions,
100's more DHTML scripts, and Terms Of
Use, visit dynamicdrive.com
*/

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")
//-->

 

若要產生可拿移的網頁圖片
  可在圖片後加入 class="drag"
  例如:<img src="/picture.gif" class="drag">

 

若要產生可拿移的網頁文字
  可在文字前加入 <b class="drag">
  例如:<b class="drag">Hi there</b>
 
VALID CSS   |   VALID XHTML