Images China
Placing images in pages
要在页面中置入图片，直接输入图片的网址(url)即可。图片的alternate text（当浏览器无法开启图片时所显示的文字）前后用双引号（"）框起来，接在图片网址後面。
http://www.pmichaud.com/img/misc/pc.jpg"Paper clips" Paper clips are fun to work with. |
 Paper clips are fun to work with. |
Images can also be specified as uploaded? files (i.e., Attach:image.jpg) and using InterMap links. Any file that ends in .gif, .jpg, .jpeg, or .png will be automatically treated as an image. (See Notes below for image files that lack extensions.)
也可指定图片为uploaded?的图片文件（例如：Attach:image.jpg）, 或者使用InterMap连结。任何以 .gif, .jpg, .jpeg, 以及 .png 结尾的网址会自动辨认成图片. （请参照底下的Notes说明,查看附件图片方式.）
若要建立到图片的link?，而不将图片显示出来（例如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!''' 图片左对齐,文字在图片右边环绕 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! 图片左对齐,文字在图片右边环绕 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. |
这个标志[[<<]] 分割浮动文本, 后续文本在图片底部继续
%lfloat% http://www.pmichaud.com/img/misc/gem.jpg 图片左对齐,文字在图片右边环绕. 在标志 ''[@[[<<]]@]''之后的文本在图片底部继续. [[<<]] 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. |
图片左对齐,文字在图片右边环绕. 在标志 |
使用%lframe%或者%rframe%不仅有文绕图效果,并会在图片与其标题外加上图框｡
%rframe% http://www.pmichaud.com/img/misc/gem.jpg | '''Rock on!''' 图片右对齐,文字在图片左边环绕. 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. %cframe width=100px bgcolor=lightblue% http://www.pmichaud.com/img/misc/gem.jpg |
Rock on! 图片右对齐,文字在图片左边环绕. 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 |
Notes
- An image file that lacks a correct extension can be displayed by addition of a "false" extension to the URL. For example, if the url is
http://www.example.com/script/tux, add a fake query string on the end with the desired extension (e.g.,http://www.example.com/script/tux?format=.png). If query strings are unsuitable, a fragment identifier should work, e.g.http://www.example.com/script/tux#file.png.
See also
- Cookbook:BackgroundImages - adding background images to divisions, tables and table cells.
Credits
The images on this page were obtained from http://www.flickr.com and are redistributed under a Creative Commons License.
<< | DocumentationIndex? | >>