發表者討論內容

冷日
(冷日) 發表時間：2008/11/13 9:30

Webmaster

註冊日: 2008/2/19
來自:
發表數: 15771

[自創]論壇或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相片集

先說到這，希望對大家有些幫助！
下課！

回覆

主題一覽的下方

討論串

前一個主題 | 下一個主題 | 頁首 |

| |

發表新主題

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