插入圖片

在頁面中置入圖片

要在頁面中置入圖片，直接輸入圖片的網址(url)即可。圖片的替代文字（當瀏覽器無法開啟圖片時所顯示的文字）前後用雙引號（"）框起來，接在圖片網址後面。

http://www.pmichaud.com/img/misc/pc.jpg"Paper clips"
Paper clips are fun to work with.

Paper clips are fun to work with.

亦可將上傳的圖片檔置入頁面中（例如：Attach:image.jpg），或者使用InterMap ?連結。任何以 .gif, .jpg, .jpeg, 以及 .png 結尾的位罝（網址）會自動辨認成圖片。（開於其它附檔名的圖片，請參照底下的Notes說明。）

若要製作超連結至圖檔，而不是將圖片顯示出來（例如http://www.pmichaud.com/img/misc/pc.jpg），則在網址的前後加上雙中括號，就像[[http://www.pmichaud.com/img/misc/pc.jpg]]還有這樣[[Attach:image.jpg]]。

製作圖形超連結的方法類似一般超連結，但要把link text換成圖形位置，如[[http://www.pmwiki.org | Attach:image.jpg"PmWiki"]]。

Captions and floating images（圖片標題與浮動圖片）

要使用圖片標題，在圖片位置後加上垂直線（|）後，再打上標題字即可。

http://www.pmichaud.com/img/misc/pc.jpg"Paper clips" | '''Figure 1'''

Figure 1

一般而言，圖片在段落中會佔據一行字的空間。若要使用文繞圖效果，在圖片前加上%lfloat%（圖片在左）或者是%rfloat%（圖片在右） WikiStyles。

%lfloat% http://www.pmichaud.com/img/misc/gem.jpg | '''Rock on!'''
The image is left-aligned, and the text wraps on the right side of the image.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Rock on!

The image is left-aligned, and the text wraps on the right side of the image.

使用%lframe%或者%rframe%不僅有文繞圖效果，並會在圖片與其標題外加上圖框。

%rframe% http://www.pmichaud.com/img/misc/gem.jpg | '''Rock on!'''
The image is right-aligned, and the text wraps on the left side of the image.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Rock on!

The image is right-aligned, and the text wraps on the left side of the image.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

使用%center%來將圖形置中。使用%right%將圖形靠右，且不具文繞圖效果。

%center%http://www.pmichaud.com/img/misc/pc.jpg"Paper clips" | Paper clips are fun to work with 

%right% http://www.pmichaud.com/img/misc/gem.jpg | Rock on!

Paper clips are fun to work with

Rock on!

Resizing images（調整影片大小）

使用%width=50px%與%height=50px%來調整圖片大小。%thumb%是個很有用的縮寫，其效果相當於%width=100px%。

%width=50px% http://www.pmichaud.com/img/misc/bubble.jpg \
%height=50px% http://www.pmichaud.com/img/misc/bubble.jpg \
%thumb% http://www.pmichaud.com/img/misc/bubble.jpg

圖片大小調整只會影響在瀏覽器中的顯示，並不會對原圖片造成任何影響。

%thumb%調整圖片大小時，可以和frame指令一同使用；也可以和超連結共同運作。

%lframe thumb% [[http://www.pmichaud.com/img/misc/bubble.jpg | http://www.pmichaud.com/img/misc/bubble.jpg"Burst the bubble"]] | [-Bubble-]
%lframe thumb% http://www.pmichaud.com/img/misc/pc.jpg"Clip the ticket" | [-Paper Clips-]
%lframe thumb% [[DocumentationIndex | http://www.pmichaud.com/img/misc/gem.jpg"Visit the Documentation Index"]] | [[DocumentationIndex | [-Rock On-]]]

Bubble

Paper Clips

Rock On

注意事項

缺乏適當副檔名的圖片可在其URL後頭加上參數來顯示。例如圖片http://www.example.com/script/tux，需要修改為http://www.example.com/script/tux?format=.png，以此類推。

其它文件

Cookbook:BackgroundImages - 遻明如何在divisions、表格以及表格欄位中設定背景圖。

誌謝

本頁面所使用的圖片源自於http://www.flickr.com，在創意公用授權下進行散佈。

<< 連結 | DocumentationIndex | Text formatting rules ? >>