防止圖片擠壞畫面彈出式視窗版

  • Posted by Beata on 十月 4th, 2005 filed in javascript


之所以會有這篇認真版呢，應該要拜Sullivan之賜，當初發表那篇簡易版的是為了方便一些習慣用貼圖語法的朋友們，所以使用了一個比較簡便的方式。
但想不到在TatterTools區討論中會有有朋友提出這個問題，於是趁著搬家伺服器調整的時間，另外做出了一份與TatterTools內建的 image_pop.php 有異曲同工之妙的一段Javascript。
它可以在圖片上點一下另開一個新視窗檢視圖片，在新視窗的圖中點一下就會自動關閉新開的視窗。

調出TatterTools根目錄下的 lib.js
將下面這段代碼貼在最後面的 –> 之前

javascript · [高亮] · [原始]

  1. function View(i){
  2. var winR = open(”,‘View’,‘resizable=no,menubar=no,status=no,scrollbars=no,top=30,left=30,toolbar=no,width=300,height=200′);
  3. var doc ="<html><head><meta http-equiv=’ImageToolBar’ content=’NO’></head><title>Photo</title><body style=’margin:0px;overflow:hidden’><img src=’"+i+"’ onclick=’self.close()’ onload=’resizeTo((this.width)+12,(this.height)+30)’></body></html>";
  4. winR.document.write(doc);
  5. winR.document.close();
  6. }
function View(i){
var winR = open(\'\',\'View\',\'resizable=no,menubar=no,status=no,scrollbars=no,top=30,left=30,toolbar=no,width=300,height=200\');
var doc ="<html><head><meta http-equiv=\'ImageToolBar\' content=\'NO\'></head><title>Photo</title><body style=\'margin:0px;overflow:hidden\'><img src=\'"+i+"\' onclick=\'self.close()\' onload=\'resizeTo((this.width)+12,(this.height)+30)\'></body></html>";
winR.document.write(doc);
winR.document.close();
}

[高亮] · [原始] · javascript

之後只要每次過大的圖片想要縮小點一下另開新視窗的話，就可以用在IMG標籤之內加上 onclick=”View(this.src)”，就像下面這樣。

html · [高亮] · [原始]

  1. <img src="url" width="200" onclick="View(this.src)">
<img src="url" width="200" onclick="View(this.src)">

[高亮] · [原始] · html


2 Responses to “防止圖片擠壞畫面彈出式視窗版”

  1. 幻夢狐 Says:
    十月 4th, 2005 at 10:50 下午

    太棒了!
    這樣子在貼縮圖時就方便多了
    感激不盡m(_ _)m

    PS.”,(this.height)+30)”我覺得改40比較好^^”

  2. Beata Says:
    十月 6th, 2005 at 1:06 上午

    多謝夢幻狐的提醒^^

    因為我的佈景主題有換過的原因
    所以在顯示上會跟原始的不太一樣
    就請有看到這篇回覆的朋友們順手改一改囉！

Leave a Comment