顯示具有 Image 圖片特效 標籤的文章。 顯示所有文章
顯示具有 Image 圖片特效 標籤的文章。 顯示所有文章

2008年3月14日 星期五

禁止IE Image Toolbar儲存圖片

支援的瀏覽器:IE6+

簡介:禁止IE Image Toolbar儲存圖片

方法一:

加到<head>與</head>之間
<META HTTP-EQUIV="imagetoolbar" CONTENT="no">

方法二:
修改img標籤
例子:<img src="test.gif" GALLERYIMG="no">

禁止右鍵點選圖片

支援的瀏覽器:FF1+ IE5+
簡介:禁止右鍵點選圖片

加到網頁最後,</body>之前

<script language="JavaScript1.2">



var
clickmessage="Right click disabled on images!"



function
disableclick(e) {

if (document.all) {

if
(event.button==2event.button==3) {

if
(event.srcElement.tagName=="IMG"){

alert(clickmessage);

return
false;

}

}

}

else if (document.layers) {

if
(e.which == 3) {

alert(clickmessage);

return
false;

}

}

else if (document.getElementById){

if
(e.which==3&&e.target.tagName=="IMG"){

alert(clickmessage)

return
false

}

}

}



function
associateimages(){

for(i=0;i<document.images.length;i++)

document.images[i].onmousedown=disableclick;

}



if
(document.all)

document.onmousedown=disableclick

else if
(document.getElementById)

document.onmouseup=disableclick

else if
(document.layers)

associateimages()

</script>

透明圖片

步驟一、複製到網頁中欲呈現特效的位置

<IMG src="圖址" style="filter:Alpha(opacity=50,style=0)">


修改事項:
圖片網址

震動圖片

步驟一、複製程式碼至<head></head>之間

<style>

.shakeimage{

position:relative

}

</style>

<script language="JavaScript1.2">



var rector=3



var stopit=0

var a=1



function init(which){

stopit=0

shake=which

shake.style.left=0

shake.style.top=0

}



function rattleimage(){

if ((!document.all&&!document.getElementById)||stopit==1)

return

if (a==1){

shake.style.top=parseInt(shake.style.top)+rector

}

else if (a==2){

shake.style.left=parseInt(shake.style.left)+rector

}

else if (a==3){

shake.style.top=parseInt(shake.style.top)-rector

}

else{

shake.style.left=parseInt(shake.style.left)-rector

}

if (a<4)

a++

else

a=1

setTimeout("rattleimage()",50)

}



function stoprattle(which){

stopit=1

which.style.left=0

which.style.top=0

}



</script>

 


步驟二、複製到網頁中欲呈現特效的位置
<img src="logo.gif" class="shakeimage" onMouseover="init(this);rattleimage()"
onMouseout="stoprattle(this)">


修改事項:
如果要增加多個圖片只要直接增加步驟二的語法,在修改圖片檔名。
<img src="logo.gif" ...

移動圖片特效

步驟一、複製程式碼至<head></head>之間

<style>

.drag{position:relative;cursor:hand}

</style>


步驟二、複製程式碼至<body>下方

<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>

 


步驟三、複製到網頁中與呈現圖片的位置
<img src="10.gif" class="drag" width="242" height="36">

 

修改事項:
可省略步驟三:當您將圖片放入網頁上後,只要在圖片標籤加入class="drag"就可移動了。