茫茫網海中的冷日
         
茫茫網海中的冷日
發生過的事,不可能遺忘,只是想不起來而已!
 恭喜您是本站第 1664615 位訪客!  登入  | 註冊
主選單

Google 自訂搜尋

Goole 廣告

隨機相片
IMG_60D_00042.jpg

授權條款

使用者登入
使用者名稱:

密碼:


忘了密碼?

現在就註冊!

網頁設計 : [自創]論壇或Blog的圖片寬度自動處理機制!

發表者 討論內容
冷日
(冷日)
Webmaster
  • 註冊日: 2008/2/19
  • 來自:
  • 發表數: 15766
[自創]論壇或Blog的圖片寬度自動處理機制!
論壇或Blog的圖片寬度自動處理機制!

不知道大家在論壇或部落格發文的時候,很想要貼圖,但又發現貼圖上去以後會把畫面撐開,搞得非常難看呢?
冷日在這邊提供一個小小的技巧,希望可以幫大家解決這個問題!

現今大多數論壇或是Blog,大部分都可以支援html的語法,那我們就用一下JavaScript的概念與標準Html語法裡的onload、onclick!
首先,一般圖片的標籤如下:
<IMG src="圖片網址" />

最蠢的方法,我們可以替她加上寬度,強制把圖片給變『窄』:
<IMG src="圖片網址" width="你想限定的寬度"/>

這樣是不是圖檔就便限制住寬度了呢?
可是光這樣的話,圖片變形、馬賽克出場,還真的蠻糟的!
我們要給人家看的是美美的圖ㄚ!?那加個連結吧:
<a href="圖片網址" target="_blank"><IMG src="圖片網址" width="你想限定的寬度"/></a>

這樣就可以讓客人點選圖片以後開啟原圖連結,反正整個瀏覽器裡面就只有這張圖,不管多大就不會有破畫版面的問題啦!
可是這樣還會有一個醜醜的框!?看了就很悶,我們也來把她解決掉吧:
<a href="圖片網址" target="_blank"><IMG border="0" src="圖片網址" width="你想限定的寬度"/></a>

這樣好像好一點了!可是客人不知道可以點選照片看全圖ㄌㄟ!?
那,我們再加一個提示給客人好了:
<a href="圖片網址" target="_blank"><IMG alt="點圖看全圖" border="0" src="圖片網址" width="你想限定的寬度"/></a>

這樣總可以了吧!?有沒有覺得還蠻複雜的?好像給她有點累?
冷日你不是說是『小小』的技巧嗎?搞得這麼複雜,哪裡小了!?

來~~~
冷日這裡就告訴你,上面那一堆都可以拿去丟掉了!
我們讓JavaScript來幫我做上面那一堆事:
<IMG onclick="if(this.width>=650) window.open(this.src);"
		 onload="if(this.width>'650')this.width='650';"
		 alt="點圖看全圖"
		 src="圖片網址"/>

說明:
先來看我們少掉哪些東西:
<a href="圖片網址" target="_blank">
<IMG border="0" width="你想限定的寬度"/>
</a>

我們不再需要A標籤,所以也就不用擔心圖的外面有框,當然也不再是用IMG標籤裡的WIDTH來限定寬度了!

那我們加入了哪些東西呢:
onclick="if(this.width>=650) window.open(this.src);"
onload="if(this.width>'650')this.width='650';"

基本上就是這兩個東西!
一個是onclick,就是當圖檔被滑鼠點擊的時候,我們執行的動作:如果圖檔寬度大於650的話,我們就取這個物件(就是IMG自己)的SRC(圖檔位置)來丟給Window.open。
簡單的說,就是滑鼠點下去,就在新視窗開出你點擊的圖檔啦!
另一個onload,就是當圖檔被載入的時候,我們執行的動作:如果圖檔寬度大於650的話,我們就把這個物件(就是IMG自己)的WIDTH(圖檔寬度)設成650。
簡單的說,就是如果圖檔大於我們設定的650的時候,她就會自己變成寬度650啦!

這樣做有啥麼好處呢!?
1.不用管圖檔的原來位置!
你用原本的寫法的話,還要把圖檔的位置Copy進到A標籤裡面,圖檔數量一大的話,還真的蠻煩人的。
2.不用管圖檔的大小!
反正是給JavaScript判斷,圖檔過大的時候,她就會自動縮小,圖檔沒那麼大的時候,她就不縮圖也不會被點擊開新視窗。
3.可以一次取代!
冷日的作法都是:
找尋:<img
取代:<IMG onclick="if(this.width>=650) window.open(this.src);" onload="if(this.width>'650')this.width='650';" alt="點圖看全圖" 

這樣就不用管多少張圖、有哪些過大、有沒有邊框、會不會忽略等等的問題,一勞永逸!

這裡給大家一個範例:SEAT Leon Linea:SEAT Leon Linea R相片集

先說到這,希望對大家有些幫助!
下課!
前一個主題 | 下一個主題 | 頁首 | | |



Powered by XOOPS 2.0 © 2001-2008 The XOOPS Project|