设万维读者为首页 万维读者网 -- 全球华人的精神家园 广告服务 联系我们 关于万维
 
首  页 新  闻 视  频 博  客 论  坛 分类广告 购  物
搜索>> 发表日志 控制面板 个人相册 给我留言
帮助 退出
 
白凡的博客  
一个平凡人的雪泥鸿爪  
网络日志正文
两全其美贴图法 2011-04-16 15:50:58
万维贴图有个两难的问题。如果图片太大,那么loading时间太长。而且显示起来会溢出太多,不是很好看。但是如果图片太小,像素太少,照片会失去品质。失去了贴图的本意。 

我解决的办法,是用两张照片。一张用来显示,另外一张,当读者有兴趣时点击较小的一张,可显示较大的一张。

具体的做法,是将同一照片制作一张压缩后的拷贝,然后使用下面的代码:

《a href="http://jimyoung.homelinux.com/wp-content/uploads/2011/04/town2.jpg" target="_blank"》《img class="aligncenter size-full wp-image-2117" title=town2 alt="较小照片" src="http://jimyoung.homelinux.com/wp-content/uploads/2011/04/town2-1.jpg" width="100%"》《/a》(注意代码中的《》,请换成<>.)

显示出来的效果是这样:
 
 

这个代码就是在通常显示图片的《img》部分之外,多加一个表示链接的部分(蓝色部分)。注意其中href指向那个较大的文档town2.jpg。那个img src指向较小的文档town2-1.jpg。是文章中开始时显示的文档。因为较小,所以初始显示会比较快。注意那个width=”100%“,指示系统按照可能的宽度显示,而不溢出。href是连接的意思,当读者点击较小的图片时,系统会按照链接显示那个较大的图片。 

当然,这样做时,您得要先把你的两张图片都上传到您的图片伺服器上去,而且万维可以找得到。自然您也可以就像您平时上传照片一样将图片上传到万维。然后改到代码模式,按上面的方法编译您的代码就可以了。 

 所谓图片伺服器,简单地讲,就是你保存照片的机器。一般的万维博主当然用的是万维的机器。比方说,老冬儿上传了两幅图片,一幅“野树丛”图片较小,当冬儿上传图片时,万维系统将图片命名为名为20110416110539210962.jpg(野树丛),另外一幅“山花”较大,命名为20110416110719012843.jpg(山花)。如果老冬儿希望显示较小的"野树丛"图片,当读者点击这个"(野树丛)"小图时,再显示"(山花)"大图,就可以将上面的代码改写成下面的样子: 

《a href="http://blog.creaders.net/upfile/201104/20110416110719012843.jpg"  target="_blank"》《img src="http://blog.creaders.net/upfile/201104/20110416110539210962.jpg" width="100%》《/a》 (注意代码中的《》,请换成<>.)

 其效果如下:
 

您可以注意到,这个”小树丛”图片因为代码中那个width="100%"的缘故,比其实际大小放大了,但不会溢出。点击这个小树丛的图片,应当显示另一幅山花的大图片。

代码中蓝色的部分,指令系统链接到大图。白色部分,是万维原先的有关显示小图的原代码,只是将原有关于图片大小的指令改成了一个width="100%“。

归纳起来,步骤如下: 

1.  制作一大一小两幅图片。 
2.  用普通贴图法上传两图至万维。 
3.  找出图片的万维名称地址(比如 href="http://blog.creaders.net/upfile/201104/20110416110539210962.jpg之类。其中20110416110539210962.jpg是图片名称。可以通过用右鼠标点击图片,然后选择copy image URL得到)。
4.  将万维编译器改为代码形式 
5.  按照上面的方法修改代码。 
6.  保存修改后的代码。
浏览(1892) (0) 评论(18)
发表评论
文章评论
作者:老冬儿 留言时间:2011-05-06 15:32:25
谢谢白凡,明白了。

我也不会去看旧帖,但是如果旧帖上有新评论,会在博客主页(不是在文章里)的
“最新评论”那里显示出来。

周末快乐!
回复 | 0
作者:白凡 留言时间:2011-05-06 12:15:30
冬儿你好!不好意思,今天才看到你的留言,迟复为欠!虽然我一般会尽量回复每一个评论,但我很少回来看过去的文章。以为没有人会关心和留言了。

很高兴你把这个弄清楚了。在html语言中《a 。。。》与《/a》配成一对,是用来给出链接信息的。不一定专用于图片,但是也可以用于图片。我这个办法就是当读者点击小图片时,链接到大图片去。比如这个例子,当你使用《a 。。。》与《/a》格式时,中间的那个“与”字就变成可点击的了。读者点击它,就会被链接到第一个尖括号里规定的地址或图片去。

问题1) 万维上传图片一般不能超过500K,那大图和小图实际上都一样,只是小图上传时大小有限制,而大图不加限制,对吗?

我不知道万维只能上传500k的图片。如果是那样的话。500看应该是最大限制量。这样一来,我的办法就不大灵光了。除非你把大图传到别的服务器上,比如Google的图片服务器上去。我可以做是因为我的图片是在我自己的服务器上。原理完全是一样的。不管图片在那里,只要你知道图片的地址(url),在编码上完全是一样的。

问题2) 如果我上传一个图片后又把它取下,它还会在万维的SERVER里吗?换句话说,我是不是还可以用那个图片的地址啊?

如果说你的“取下”指的是从你的代码里删除,那图片应该还是在万维的SERVER里。所以那个旧的地址应该还是可以使用的。但是如果你用万维的editor编辑,使用delete功能,那有可能整个图片都会被删除了。这样万维可以节省空间。当然这也不一定。只要试验一下就可以知道了。

周末快乐!
回复 | 0
作者:老冬儿 留言时间:2011-04-30 13:24:12
谢谢白凡。我照你的代码操作,终于工作了 (乌拉!!!)。把图片换调后,也工作了。我理解《/a》是用来给图片加[标题的,比如《点击看大图》。 对吗?

再请教两个问题:
1) 万维上传图片一般不能超过500K,那大图和小图实际上都一样,只是小图上传时大小有限制,而大图不加限制,对吗?
2) 如果我上传一个图片后又把它取下,它还会在万维的SERVER里吗?换句话说,我是不是还可以用那个图片的地址啊?

你新写那段好像我又有关键字不懂。我就不去折腾了,免得浪费你好多时间。

周末快乐,再次谢谢!
回复 | 0
作者:白凡 留言时间:2011-04-26 11:35:08
冬兒你好。你可以試一下這樣:

--using FireFox,go to this post in my blog
--click View->Page Source
--search for the string 其效果如下:
--copy everything betweent 其效果如下:and 您可以注意到
--login to your blog and post a new blog
--paste the code you just copied into the 萬維 editor in 代碼 mode
--save it and check the post
--you should see what you see (the two pictures of yours) in my post.
--then research the post in 代碼 mode, hopefully you will understand it more.
回复 | 0
作者:老冬儿 留言时间:2011-04-25 12:19:53
好,我会再试试。只有把你的这个试通了,我才可以换其它的照片。

谢谢白凡耐心忍受我的问题。 :-)
回复 | 0
作者:白凡 留言时间:2011-04-24 15:57:54
冬兒,你的那個問題應該是在20110416110539210962.和jpg之間多了一個東西,很可能是你多敲了一個回車(Enter或者return鍵)。你可以試一試刪除掉這二者之間的任何東西。我知道這對於不懂計算機語言的人講來很沮喪。不要太在意。

周末快乐
回复 | 0
作者:白凡 留言时间:2011-04-24 11:23:58
你的那个错误有可能是因为中文软件的干扰。所以在编译代码时,最好将输入法改为英文模式(关闭exit中文输入软件)
回复 | 0
作者:白凡 留言时间:2011-04-24 11:20:19
代码应该是这样:
《a href="http://blog.creaders.net/upfile/201104/20110416110719012843.jpg" target="_blank"》《img src="http://blog.creaders.net/upfile/201104/20110416110539210962.jpg" width="100%"》《/a》

其中图片的名字应该是20110416110539210962.jpg而你的代码中的链接的图片名字好象是这样:20110416110539210962.%3Cbr%3Ejpg, 这个%3Cbr%3E是错的。将你的万维编译器改成代码模式。将%3Cbr%3E删除,并将所有的《换成<, 》换成>。而不是把《/a》换成<>。请再试一次。
回复 | 0
作者:老冬儿 留言时间:2011-04-24 10:50:41
白凡,谢谢你。我把你的例子代码《a href="http://blog.creaders.net/upfile/201104/
20110416110719012843.jpg" target="_blank"》《img src="http://blog.creaders.net/
upfile/201104/20110416110539210962.jpg" width="100%》《/a》

COPY到我那里上传(《/a》 改成了<>),怎么没有显示出图片?最后显示出来的是这个连接:<img src="http://blog.creaders.net/upfile/201104/20110416110539210962.
jpg" width="100%></a>

感觉自己好笨,像retarded :-)
周末快乐!
回复 | 0
作者:白凡 留言时间:2011-04-18 22:36:39
冬儿,我的图片没有存在万维。我只是给出一个地址而已。但是你的照片是在万维。当你上帖时将图片从硬盘传到文章里的时候,图片就传到万维的server了。“http://blog.creaders.net/upfile/201104/20110416110719012843.jpg"就是你的野花照片在万维的地址。所以我说你按你一贯的做法,将照片传到万维。然后找到每一照片的地址名称,再对代码进行适当的编译,就可以了。
回复 | 0
作者:老冬儿 留言时间:2011-04-18 22:11:39
仔细读了一下,感觉清楚多了。只是还是不清楚照片为什么会在万维上呢?我的照片都在我的电脑硬盘里,只有上帖时才从硬盘传到文章里。难道你们是先传到万维的什么SERVER上?

提前谢谢你解答我的问题!
回复 | 0
作者:老冬儿 留言时间:2011-04-18 22:05:00
白凡,谢谢你写出更详细的步骤,周末我一定照你的指示一步一步地操作,看能不能做成。你举例用的我这张照片是我压缩成了WEB FORMAT的,放大了之后效果很差,不清晰。
再次谢谢!
回复 | 0
作者:白凡 留言时间:2011-04-17 22:22:57
谢谢颂兄的补充。我已经在文中加入相应内容。
回复 | 0
作者:欢乐颂 留言时间:2011-04-17 18:20:57
补充一下,在link中加上target="_blank",图片会在新window/tab中打开。如:<a href="image url" target="_blank" >
回复 | 0
作者:白凡 留言时间:2011-04-17 00:20:58
冬儿,不客气。你先试试。不对的话,我们再讨论。

已经回来了。只是还在倒时差。成天昏头昏脑的。
回复 | 0
作者:老冬儿 留言时间:2011-04-16 20:24:00
白凡,太谢谢了。没想到你专门写一篇文章出来,咱一定要好好烟酒烟酒 (跟阿妞学舌,呵呵)。

博客里面的名堂好多,咱们这种不是搞电脑的有时很困惑,谢谢你们热心相助。上次我请教欢乐颂一个问题,害得他打了好多字,真不好意思。这不,又麻烦你了。
你还在意大利?周末快乐!
回复 | 0
作者:白凡 留言时间:2011-04-16 18:46:06
又及,代码中的alt="较小照片",可以删除。
回复 | 0
作者:白凡 留言时间:2011-04-16 18:44:24
本文是为了回答万维网友老冬儿的提问而写。想到对其他网友也可能有帮助,所以作为博文发出来。
回复 | 0
我的名片
白凡
注册日期: 2008-12-29
访问总量: 1,296,934 次
点击查看我的个人资料
Calendar
我的公告栏
敬告网友
最新发布
· “incapacity to do something”在
· 从评论看我所知道的花见草
· 媒体的言论自由等于公民的言论自
· 远行归来有感(七律一首)
· 也来秀一秀我的夫人(标题党。慎
· 转基因巨擘孟山都与美国政治
· 等闲花鸟莫相疑
友好链接
· 史语:史语的博客
· 别煮啦:别煮的博客
· 汤安:汤安的博客
· 法国刘学伟博士:法国刘学伟博士
· 居日华2011:居日华2011的博客
· 漂移:漂移的博客
· 山月歌:山月歌的博客
· 老冬儿:老冬儿的博客
· 5daziyou:五大自由的博客
· 方鲲鹏:方鲲鹏
· 令狐冲:拔剑四顾心茫然
· 山哥:山哥的文化广场
· 瀛洲大蟹:轻扣柴扉
· 信济:信济龙行
· 落基山人:落基山人的博客
· 欢乐诵:欢乐诵
· 舒林子:舒林子的博客
· 叶子:却道天凉好个秋
· 寄自美国:寄自美国的博客
· 丹奇:丹奇
· 椰子:椰风阵阵,思绪如河
· 芦鹤:芦鹤
分类目录
【随着小儿一道成长】
· 想起情窦初开的豆蔻年华
· 周末工程:为马自达MPV换车门把
· 与小儿一起成长:周末工程
【美国民主与政客】
· 美国政客的个人财产状况及生财之
· 美国人的轮流做庄v.s中国人的任
· 有关国会道德委员会的几件轶人轶
· 美国民主政治中的政客财产登记制
· 从“绑倒您(Bundling)”看美国政
【美国民主与院外游说】
· 石棉之祸:美国民主深度解析(下
· 石棉之祸:美国民主深度解析(上
· 说客与政客的利益共生关系
· 美国民主的第三院和第四权
· 华盛顿:K街上的利益掮客
· 美國民主的猪耳朵
【意大利印象:中部】
【微博】
· 公开的悄悄话致落基山人
· 見過不要臉的,沒有見過如此不要
· 少儿不宜:禁果(Forbidden Frui
· 你知道两党合作(bipartisan)是
· 百年与千年和太近与太远(微博)
· 掘墓人的豪迈、快乐、与悲哀(微
· 不看不知道,一看吓一跳(微博)
· 我们应该有所行动吗?(中微博)
· 生死存亡的“游戏”
【意大利印象:威尼斯】
【意大利印象】
· 养在深闺的锡耶纳
· 夕阳无限好,沉浮威尼斯
· 威尼斯大运河、水巷、和贡多拉船
· 威尼斯的前世今生
· 意大利印象:维罗纳一日
· 米蘭印象(二)
· 米蘭印象(一)
· 關於行萬里路的隨想
【月弯儿:西方看中国】
· 月弯儿:旅英生活体验(二)
· 月弯儿:旅英生活体验(一)
· 西方看中国之四: 中国将会成为怎
· 月弯儿西方看中国之三:中国与多
· 就马丁杰奎斯的文章答阿妞不牛
· 月弯儿:西方看东方之二: 了解中
· 中国比西方更民主和合乎理法吗?
【美国统治阶级】
· 4. 也谈是谁在真正统治美国(三
· 3. 美国的左派传统、全球化、和
· 2. 也谈是谁在真正统治美国(二
· 1. 也谈是谁在真正统治美国(一
【美国民主与金钱资本】
· 4. 公司化的美国: 一人一票后面
· 3. 金钱来自何处,又去向何方?
· 2. 党派政治与金钱资本:从“劫位
【美国民主与工会】
· 5. 杰瑞布朗对麦格魏特曼:工会
· 4. 工会:美国政坛的大玩家
· 3. 公共事业工会影响下的美国人
· 2. 美国工运的衰落与公共事业工
· 1. 工会作为公司化美国的大股东
【美元危机】
· 4. 美国经济的真实现状与一种可
· 3. “班克”:它是取代美元的下一
· 2. 从欧洲的前车之鉴看美元的衰
· 1. 盛世危言:美国的末日来到了
【詩文賞析】
· 重读《悼杨铨》
· 故土情怀与梅花精神
· 胡天游的《晓行》诗:骈文名家的
· 古诗声律简要
· 江山无恙时的兴亡之叹
· 离形得似,刻画入神的诗中逸品
· 江波流尽千年事,明月白鸥都不知
· 岁晚江湖同是客,莫辞伴我更南飞
· “無理而妙”與“化實為虛”–晚唐羅
· 万古至今同此恨,谁来翻新唱暮春
【詩文賞析2】
· 软摇滚:麦克学摇滚与他们翻唱的
· 蓦然回首思“更雨”- Mt. Rainier
· 和半江红《桂花暗渡忍冬香》一首
· 月夜庭中抒怀(七律一首)
· 论诗诗(七律一首)
· 艺园诗(外二首)
· 棕榈泉游记兼和沙之舟
· 软摇滚:麦克学摇滚与他们翻唱的
· 软摇滚:麦克学摇滚与他们翻唱的
· 读冬儿《剑门关怀古》有和 (七
【詩文賞析3】
· 远行归来有感(七律一首)
· 落叶(七律)
· 意态楚楚的假隐士
· 李西涯专在虚字上用功夫,如何当
· 中秋夜赏月游网题叶子贝克山行(
【美國萬花筒1】
· 民主的西瓜
· 书评:亨利基辛格《论中国》
· 政府拯救房市的钱是怎样花出去的
· 人在西方,勿犯政治路线错误
· 奥巴马国情咨文中文全译(二)
· 奥巴马国情咨文中文全译(一)
· 也談海外華人愛看國內電視劇
· 由江海松博士机场吻别說到中美、
· 關于手紙、廁所以及抽水馬桶的故
【美國萬花筒2】
· 阶级斗争,真的一抓就灵吗?
· 亲历南加州全境大停电
· 奥萨马之死:另一只潘多拉的盒子
· 君子群而不党,乡原德之贼也——兼
· 美国是强奸犯的天堂吗?
· 在2010年的选举中,投下你的神圣
· 有感于不是中国人的中国人答舒林
· 由填写人口普查问卷所想到的
【美國萬花筒3】
· 好莱坞电影《惊爆内幕》故事情节
· 温馨提示:假日幸存十二法
· 小儿要我投奥巴马一票
· 我与死神擦肩而过(后续)
· 破产的政府与零票当选的议员
· 分享一件生活中的真实美国法制故
· 美国国会研究报告:理解中国的政
· 我与死神擦肩而过
· 快讯:奥萨马本拉丁死掉了
· 他为何放弃美国国籍?
【美國萬花筒4】
· 媒体的言论自由等于公民的言论自
· 转基因巨擘孟山都与美国政治
· “美国杨佳”致美国宣言书(续完)
· “美国杨佳”致美国宣言书(七)
· “美国杨佳”致美国宣言书(六)
· “美国杨佳”致美国宣言书(五)
· “美国杨佳”致美国宣言书(四)
· “美国杨佳”致美国宣言书(三)
· “美国杨佳”致美国宣言书(二)
· “美国杨佳”致美国宣言书(一)
【隔山打牛】
· 所谓“言论自由”在中国的困境
· ZT:中国向何处去?
· 也从司马南事件看中国的希望又及
· 亿元善款在台湾:陈光标的行为艺
· 刘晓波上位的一个可能
· 南海东海黄海:以战止战,才有持
· 中国炮击钓鱼岛又如何?
· 我的关于富士康员工跳楼的tow ce
· 袁腾飞:大众俗文化中的怪胎
· Loser之歌及国人对海归的误读
【林林总总】
· 两全其美贴图法
· 兔年的祝福
· 唱了豺狼来了有猎枪,So What?
· 解禁的照片--变态而残暴的日本人
· 周末愉快:带色儿的绝对
· 众议院议长佩洛西是一个圣人
· 《鹰隼大队》:歼十看上去帅呆了
· 转贴:一位台湾学校校长在中国内
【林林总总2】
· 欣闻五星红旗、青天白日旗插上了
· 响应丹奇,请签署这个呼吁书
· 中国的政治制度比美国的民主更灵
· 穆沙抬杠录
· 我与两分钱和德孤的有限交流
· 媒体的品格
· 日本东电公司澄清所谓“五十死士”
· 白凡致万维的紧急再声明
· 中國人,說一個“愛”字太沉重
【林林总总3】
· 一则悄悄话引起的公案
· 悄悄话致春夏无名,瀛洲大蟹,丹
· 社交网络和个人隐私
· 怎样打破汽车玻璃?童子军教的办
· 这位大佬究竟是谁?(微博)
· (微博)希拉里怎么了?
· 四川人看医生;品位虽然不太高,
· 回收站 (Recycle Bin)
· 吹毛求疵谈温家宝的“美女翻译”
· 为董卿说错别字找个借口:都是繁
【林林总总4】
· “incapacity to do something”在
· 也来秀一秀我的夫人(标题党。慎
· 等闲花鸟莫相疑
· 人狗之间
· 真正的釣魚島島主找到了,有慈禧
· 祝各位,掐的和不掐的,都节日快
· 万维恶意软件警告!
· 中国好人
· 万维博客病毒警告
· 夕阳之歌(图)
【华人社区】
· 答欧阳锋再谈决战高法
· 紧急动员,决战最高法院!
· 美国高法将重审大学招生中的种族
【好莱坞掠影】
· 从The Insider的故事看美国传媒
· 且看好莱坞怎样戏说历史:汤姆库
【美国游记】
· 蓦然回首思“更雨”- Mt. Rainier
· 贾西瓦树国家公园
· 棕榈泉游记兼和沙之舟
【隔山打牛2】
· 再论中国炮击钓鱼岛
· 辛子陵在沪讲话(全文转贴)
· 我为何对温总感到失望?
【中国文化研究】
· 从耳食之言得来的“学问”
· 基督教与西方国家的文化涂鸦与种
· 我们为何研究中国文化?
· 臣妾意识与女性人格 ——古代士大
【万维左右】
· 从评论看我所知道的花见草
· 发生过的历史难以轻易抹杀
· 答翅膀先生和白凡谈政教分离
· 就网上交友与美国言论自由答“运
· 出入万维谈“左”“右”
· 明星博主与网管互动--也向万维网
【环保与人】
· 为儿童还是为海狮?动物活动家们
· 绿警察,哥本哈根会议与中庸之道
【世博掠影】
· 世博三日记(3)
· 世博三日记(2)
· 世博三日记(1)
【明初那些人與事】
· 明初排名第三文人之死
【古代文論散論】
· 陆机《文赋》三题
· 从“养气”说看苏辙的文艺思想
【楊基研究】
· 楊基家世考
【四杰年譜】
· 【四杰年譜】 1357:元至正十七
· 【四杰年譜】 1356:元至正十六
· 【四杰年譜】 1352: 元至正十二
· 【四杰年譜】 1351: 元至正十一
· 【四杰年譜】 1347: 元至正七年
· 【四杰年譜】 1326: 元泰定三年
· 【四杰年譜】 1301: 元成宗大徳
· 明初四杰年譜說明
【明初四杰研究】
存档目录
2013-04-01 - 2013-04-28
2013-03-01 - 2013-03-23
2013-02-01 - 2013-02-23
2013-01-10 - 2013-01-30
2012-12-05 - 2012-12-23
2012-11-03 - 2012-11-21
2012-10-01 - 2012-10-31
2012-09-03 - 2012-09-28
2012-08-24 - 2012-08-24
2012-07-01 - 2012-07-31
2012-06-01 - 2012-06-26
2012-05-01 - 2012-05-28
2012-04-11 - 2012-04-11
2012-03-01 - 2012-03-30
2012-02-04 - 2012-02-29
2012-01-06 - 2012-01-14
2011-12-08 - 2011-12-28
2011-11-03 - 2011-11-14
2011-10-04 - 2011-10-29
2011-09-09 - 2011-09-09
2011-08-07 - 2011-08-31
2011-07-01 - 2011-07-27
2011-06-07 - 2011-06-21
2011-05-01 - 2011-05-25
2011-04-12 - 2011-04-28
2011-03-07 - 2011-03-23
2011-02-01 - 2011-02-24
2011-01-05 - 2011-01-26
2010-12-02 - 2010-12-18
2010-11-01 - 2010-11-28
2010-10-05 - 2010-10-28
2010-09-08 - 2010-09-29
2010-08-09 - 2010-08-25
2010-07-14 - 2010-07-30
2010-06-22 - 2010-06-29
2010-05-18 - 2010-05-27
2010-04-21 - 2010-04-29
2010-03-02 - 2010-03-24
2010-02-01 - 2010-02-26
2010-01-02 - 2010-01-29
2009-12-15 - 2009-12-28
2009-10-29 - 2009-10-29
2008-12-29 - 2008-12-30
 
关于本站 | 广告服务 | 联系我们 | 招聘信息 | 网站导航 | 隐私保护
Copyright (C) 1998-2024. Creaders.NET. All Rights Reserved.