<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	>

<channel>
	<title>:: corAusir :: 程式逗設計</title>
	<atom:link href="http://blog.corausir.org/feed" rel="self" type="application/rss+xml" />
	<link>http://blog.corausir.org</link>
	<description>cora x ausir [平面設計,網頁設計,程式設計,PS,AI,FLASH,FLEX,AS,ColdFusion,JAVA,PHP]</description>
	<pubDate>Mon, 08 Mar 2010 12:32:24 +0000</pubDate>
	<generator>http://wordpress.org/?v=2.7.1</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
		
<!-- Start Of Script Generated By WP-PostViews Plus -->
<script type='text/javascript' src='http://blog.corausir.org/wp-includes/js/jquery/jquery.js?ver=1.2.6'></script>
<script type="text/javascript">
/* <![CDATA[ */
jQuery.ajax({type:'GET',url:'http://blog.corausir.org/wp-content/plugins/wp-postviews-plus/postviews_plus.php',data:'todowppvp=add&type=/feed&id=1',cache:false,dataType:'script'});
/* ]]> */
</script>
<!-- End Of Script Generated By WP-PostViews Plus -->
	<item>
		<title>Windows Live Writer 無法取得 wordpress 佈景主題</title>
		<link>http://blog.corausir.org/website-design/ausir-1144</link>
		<comments>http://blog.corausir.org/website-design/ausir-1144#comments</comments>
		<pubDate>Mon, 08 Mar 2010 12:32:24 +0000</pubDate>
		<dc:creator>Ausir</dc:creator>
		
		<category><![CDATA[WordPress]]></category>

		<category><![CDATA[網頁設計]]></category>

		<category><![CDATA[Windows Live Writer]]></category>

		<category><![CDATA[Wordpress]]></category>

		<category><![CDATA[wordpress架站]]></category>

		<category><![CDATA[WP]]></category>

		<category><![CDATA[無法下載主題]]></category>

		<guid isPermaLink="false">http://blog.corausir.org/website-design/ausir-1144</guid>
		<description><![CDATA[想必各位經常使用 Wordpress 的朋友一定會使用一個好用的離線編輯軟體 Windows Live Writer 來做編輯網誌的動作，但是最近使用卻發生了一個很奇特現象，不管如何取得部落格樣版都會出現以下錯誤，『無法下載主題』無法下載用於編輯部落格內容的主題。
 不管怎麼設定就是出現錯誤
 
雖然說無法下載佈景主題不是甚麼大事情，不過如果底色不是白色，這樣子如果要改字型顏色就會很麻煩，有可能會看到整篇白色的文章或是字體改成黃色的文字會很難校稿。
 
像這樣子，不但黑字變成白字，黃字在編輯的時候看不太到，白字更不用說根本是消失的，黑字也無法正常更改成為黑色的，但是這不是更慘的，如果我們上傳的是照片那就會&#8230;..
 
因為 WLW 認為佈景主題是白色的底色，因此合成圖片的陰影也以為底色是白色，可是當圖片發布到網站上的時候，可怕的事情發生了，那就是每一張圖片都會有一個白邊的陰影，真的是非常恐怖哩。
&#160;
這樣子當然不是我們要的結果，不過一一比對這次製作的 WP 案子，有哪邊不同，每一個檔案的編碼，CSS 的處理方式都檢查過，到最後一直無法正確的找出問題來。
當然如果事情沒有解決，怎麼可能會分享出來，原來，這個 CASE 並沒有首頁，應該正確的說，他不像其他的 WP 會用最後一篇文章作為首頁，他是使用第一個網誌分頁 ( 關於我們 ) 作為他的首頁，這樣子問題來了，其實 WLW 之所以可以抓到 WP 的佈景主題，其原理是 WLW 使用 XML-RPC 協定先發布一篇文章，在到 WP 的首頁取得這篇文章，再配合 STYLE.CSS 檔案來解釋內容區塊，這下子好了，如果首頁設定的是網誌分頁，那很正常就找不到 WLW 發布的這篇文章，最後，就造成無法下載佈景主題。
 
如上圖，只要你的 WP 如果不是將最新文章設定為首頁的話，那就會遇到上述的問題，無法正確的正確的佈景主題，最簡單的解決方法呢，就是當你的 WLW 要下載佈景主題的時候，先將『 設定 』→『 閱讀設定 』 的首頁顯示更改回 『 最新文章 』，等下載完再改回來即可，雖然比較麻煩一點，但是 WLW 到是不會常常在下載主題啦。或是說要使用 JQUERY 來做動態的換頁也是可以的。
 [...]


No related posts.

Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.]]></description>
			<content:encoded><![CDATA[<p>想必各位經常使用 Wordpress 的朋友一定會使用一個好用的離線編輯軟體 Windows Live Writer 來做編輯網誌的動作，但是最近使用卻發生了一個很奇特現象，不管如何取得部落格樣版都會出現以下錯誤，『無法下載主題』無法下載用於編輯部落格內容的主題。</p>
<p align="center"><a href="http://blog.corausir.org/wp-content/uploads/2010/03/image.png" rel="shadowbox[post-1144];player=img;" target="_blank"><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="image" border="0" alt="image" src="http://blog.corausir.org/wp-content/uploads/2010/03/image-thumb.png" width="404" height="299" /></a> 不管怎麼設定就是出現錯誤</p>
<p> <span id="more-1144"></span>
<p>雖然說無法下載佈景主題不是甚麼大事情，不過如果底色不是白色，這樣子如果要改字型顏色就會很麻煩，有可能會看到整篇白色的文章或是字體改成黃色的文字會很難校稿。</p>
<p><a href="http://blog.corausir.org/wp-content/uploads/2010/03/image1.png" rel="shadowbox[post-1144];player=img;" target="_blank"><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="image" border="0" alt="image" src="http://blog.corausir.org/wp-content/uploads/2010/03/image-thumb1.png" width="404" height="359" /></a> </p>
<p>像這樣子，不但黑字變成白字，黃字在編輯的時候看不太到，白字更不用說根本是消失的，黑字也無法正常更改成為黑色的，但是這不是更慘的，如果我們上傳的是照片那就會&#8230;..</p>
<p><a href="http://blog.corausir.org/wp-content/uploads/2010/03/image2.png" rel="shadowbox[post-1144];player=img;" target="_blank"><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="image" border="0" alt="image" src="http://blog.corausir.org/wp-content/uploads/2010/03/image-thumb2.png" width="404" height="367" /></a> </p>
<p>因為 WLW 認為佈景主題是白色的底色，因此合成圖片的陰影也以為底色是白色，可是當圖片發布到網站上的時候，可怕的事情發生了，那就是每一張圖片都會有一個白邊的陰影，真的是非常恐怖哩。</p>
<p>&#160;</p>
<p>這樣子當然不是我們要的結果，不過一一比對這次製作的 WP 案子，有哪邊不同，每一個檔案的編碼，CSS 的處理方式都檢查過，到最後一直無法正確的找出問題來。</p>
<p>當然如果事情沒有解決，怎麼可能會分享出來，原來，這個 CASE 並沒有首頁，應該正確的說，他不像其他的 WP 會用最後一篇文章作為首頁，他是使用第一個網誌分頁 ( 關於我們 ) 作為他的首頁，這樣子問題來了，其實 WLW 之所以可以抓到 WP 的佈景主題，其原理是 WLW 使用 XML-RPC 協定先發布一篇文章，在到 WP 的首頁取得這篇文章，再配合 STYLE.CSS 檔案來解釋內容區塊，這下子好了，如果首頁設定的是網誌分頁，那很正常就找不到 WLW 發布的這篇文章，最後，就造成無法下載佈景主題。</p>
<p><a href="http://blog.corausir.org/wp-content/uploads/2010/03/image3.png" rel="shadowbox[post-1144];player=img;" target="_blank"><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="image" border="0" alt="image" src="http://blog.corausir.org/wp-content/uploads/2010/03/image-thumb3.png" width="404" height="219" /></a> </p>
<p>如上圖，只要你的 WP 如果不是將最新文章設定為首頁的話，那就會遇到上述的問題，無法正確的正確的佈景主題，最簡單的解決方法呢，就是當你的 WLW 要下載佈景主題的時候，先將『 設定 』→『 閱讀設定 』 的首頁顯示更改回 『 最新文章 』，等下載完再改回來即可，雖然比較麻煩一點，但是 WLW 到是不會常常在下載主題啦。或是說要使用 JQUERY 來做動態的換頁也是可以的。</p>
<p><a href="http://blog.corausir.org/wp-content/uploads/2010/03/image4.png" rel="shadowbox[post-1144];player=img;" target="_blank"><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="image" border="0" alt="image" src="http://blog.corausir.org/wp-content/uploads/2010/03/image-thumb4.png" width="404" height="381" /></a> </p>
<p>正常下載以後，真的是舒服多了，白字就是白字，黃字就是黃字，黑字就是黑字，圖片也不會再有白邊的奇怪情況出現了，真的是太棒了。</p>
<p>&#160;</p>
<p>不過其實 WLW 使用這種綠色底圖是有一個潛藏的危險，就是如果未來更改 CSS ，底色卻不是使用白色的，這樣子每一張圖片就會出現綠邊，所以囉，強烈建議各位朋友如果再設計 WP 的樣板，在文章內容的底色部分還是盡量使用白色或是黑色等安全色，因為一定固定後要更改就很麻煩囉。</p>



 :: 把這篇好文推到書籤網站與更多人分享吧 :: 


	<a rel="nofollow" target="_blank" href="http://funp.com/push/submit/add.php?url=http%3A%2F%2Fblog.corausir.org%2Fwebsite-design%2Fausir-1144&s=Windows%20Live%20Writer%20%E7%84%A1%E6%B3%95%E5%8F%96%E5%BE%97%20wordpress%20%E4%BD%88%E6%99%AF%E4%B8%BB%E9%A1%8C&&via=tools" title="funp"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/funp.gif" title="funp" alt="funp" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.hemidemi.com/user_bookmark/new?title=Windows%20Live%20Writer%20%E7%84%A1%E6%B3%95%E5%8F%96%E5%BE%97%20wordpress%20%E4%BD%88%E6%99%AF%E4%B8%BB%E9%A1%8C&amp;url=http%3A%2F%2Fblog.corausir.org%2Fwebsite-design%2Fausir-1144" title="Hemidemi"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/hemidemi.png" title="Hemidemi" alt="Hemidemi" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://tw.myweb2.search.yahoo.com/myresults/bookmarklet?u=http%3A%2F%2Fblog.corausir.org%2Fwebsite-design%2Fausir-1144&ei=UTF-8&t=Windows%20Live%20Writer%20%E7%84%A1%E6%B3%95%E5%8F%96%E5%BE%97%20wordpress%20%E4%BD%88%E6%99%AF%E4%B8%BB%E9%A1%8C" title="YahooKimo"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/yahookimo.gif" title="YahooKimo" alt="YahooKimo" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=http%3A%2F%2Fblog.corausir.org%2Fwebsite-design%2Fausir-1144&amp;title=Windows%20Live%20Writer%20%E7%84%A1%E6%B3%95%E5%8F%96%E5%BE%97%20wordpress%20%E4%BD%88%E6%99%AF%E4%B8%BB%E9%A1%8C" title="Google"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/googlebookmark.png" title="Google" alt="Google" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://bookmark.udn.com/add?f_Windows%20Live%20Writer%20%E7%84%A1%E6%B3%95%E5%8F%96%E5%BE%97%20wordpress%20%E4%BD%88%E6%99%AF%E4%B8%BB%E9%A1%8C=Windows%20Live%20Writer%20%E7%84%A1%E6%B3%95%E5%8F%96%E5%BE%97%20wordpress%20%E4%BD%88%E6%99%AF%E4%B8%BB%E9%A1%8C&f_URL=http%3A%2F%2Fblog.corausir.org%2Fwebsite-design%2Fausir-1144" title="udn"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/udn.gif" title="udn" alt="udn" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.haohaoreport.com/submit.php?url=http%3A%2F%2Fblog.corausir.org%2Fwebsite-design%2Fausir-1144&amp;title=Windows%20Live%20Writer%20%E7%84%A1%E6%B3%95%E5%8F%96%E5%BE%97%20wordpress%20%E4%BD%88%E6%99%AF%E4%B8%BB%E9%A1%8C" title="Haohao"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/haohao.png" title="Haohao" alt="Haohao" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="https://favorites.live.com/quickadd.aspx?marklet=1&amp;url=http%3A%2F%2Fblog.corausir.org%2Fwebsite-design%2Fausir-1144&amp;title=Windows%20Live%20Writer%20%E7%84%A1%E6%B3%95%E5%8F%96%E5%BE%97%20wordpress%20%E4%BD%88%E6%99%AF%E4%B8%BB%E9%A1%8C" title="Live"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/live.png" title="Live" alt="Live" class="sociable-hovers" /></a>


<br/><br/>

<p>No related posts.</p>
<p>Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.</p>]]></content:encoded>
			<wfw:commentRss>http://blog.corausir.org/website-design/ausir-1144/feed</wfw:commentRss>
		</item>
		<item>
		<title>[JQuery]重點聚光燈效果 jquery lightbox 特效 [修正版]</title>
		<link>http://blog.corausir.org/website-design/ausir-1129</link>
		<comments>http://blog.corausir.org/website-design/ausir-1129#comments</comments>
		<pubDate>Thu, 11 Feb 2010 12:46:05 +0000</pubDate>
		<dc:creator>Ausir</dc:creator>
		
		<category><![CDATA[JQuery]]></category>

		<category><![CDATA[網頁設計]]></category>

		<category><![CDATA[JavaScript]]></category>

		<category><![CDATA[LightBox]]></category>

		<category><![CDATA[ShadowBox]]></category>

		<category><![CDATA[燈箱特效]]></category>

		<guid isPermaLink="false">http://blog.corausir.org/website-design/ausir-1129</guid>
		<description><![CDATA[
<!-- Start Of Script Generated By WP-PostViews Plus -->
<script type="text/javascript">
/* <![CDATA[ */
jQuery.ajax({type:'GET',url:'http://blog.corausir.org/wp-content/plugins/wp-postviews-plus/postviews_plus.php',data:'todowppvp=add&type=/feed&id=1',cache:false,dataType:'script'});
/* ]]> */
</script>
<!-- End Of Script Generated By WP-PostViews Plus -->

<!-- Start Of Script Generated By WP-PostViews Plus -->
<script type="text/javascript">
/* <![CDATA[ */
jQuery.ajax({type:'GET',url:'http://blog.corausir.org/wp-content/plugins/wp-postviews-plus/postviews_plus.php',data:'todowppvp=add&type=/feed&id=1',cache:false,dataType:'script'});
/* ]]> */
</script>
<!-- End Of Script Generated By WP-PostViews Plus -->
昨天製作了燈箱效果，不過因為本來在製作動畫上有點問題，因此就暫時只使用開關的方式，造成眼睛有點給他閃，所以今天修正了 fadeIn 的特效，讓整個效果看起來更順暢。
 據說 iPad 是吃了類固醇的 iPhone ，不過不管他吃了甚麼，我都要吃了他
 
這篇文章你必須要先參考前篇 [JQuery] LightBox 燈箱效果不求人-自己也可動手做 本來想考慮想要加個動畫，但是不管怎麼做，他的透明度就會消失，後來經過 男丁格爾 的指教才知道本來只寫了 STOP() 是不可以的，透明度只要做了幾次就整個消失了，經過修改之後，改為 .stop(false, true) 就搞定了。
 
如此效果做在網頁上，當滑鼠移動到特定圖片內，很難不引起讀者的注意，有沒有很像舞台上明星要出場的感覺呢，把周邊不重要的角色的光彩都奪走，剩下重點角色，改天在把它套用到網站上。
由於是延續之前的檔案，在這邊就不再重複貼資料了，僅提供 JS 檔案供參考，有需要的朋友請參考前篇。
JS CODE
1

?View Code JAVASCRIPT1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
/**
 * @author ausir
 */
&#160;
 $&#40;&#41;.ready&#40;function&#40;&#41;&#123;
 	//將燈箱區域隱藏起來-不使用任何動畫
	$&#40;&#34;.lightbox&#34;&#41;.css&#40;&#34;display&#34;,&#34;none&#34;&#41;;
	//將燈箱的背景亮度調到 0.8 ALPHA
	$&#40;&#34;.background&#34;&#41;.fadeTo&#40;0,0.8&#41;;
&#160;
&#160;
	//當九宮格內的圖片觸發滑鼠移入的時候
	$&#40;&#34;.gridarea img&#34;&#41;.mouseover&#40;function&#40;&#41;&#123;
		//將燈箱的高度寬度設定與文件的高度寬度相同
		$&#40;&#34;.lightbox&#34;&#41;.css&#40;&#123;
			height: $&#40;document&#41;.height&#40;&#41; + &#34;px&#34;,
			width: $&#40;document&#41;.width&#40;&#41; + &#34;px&#34;
		&#125;&#41;;
		//將燈箱裡的圖片都先移除，做初始化動作
		$&#40;&#34;.lightbox img&#34;&#41;.remove&#40;&#41;;
		//取得觸發者圖片的座標
		$position = $&#40;this&#41;.offset&#40;&#41;;
		//將觸發者圖片 COPY 一份丟到燈箱的 IMAGES 區域
		$&#40;&#34;.images&#34;&#41;.append&#40;$&#40;this&#41;.clone&#40;&#41;&#41;;
		//將燈箱圖片給予相同的 CSS 效果，並且設定座標位置與來源相同(重疊在一起的意思)
		$&#40;&#34;.images img&#34;&#41;.addClass&#40;&#34;gridareaimg&#34;&#41;.css&#40;&#123;
			top: $position.top + &#34;px&#34;,
			left: $position.left [...]


Related posts:<ol><li><a href='http://blog.corausir.org/website-design/ausir-1128' rel='bookmark' title='Permanent Link: [JQuery] LightBox 燈箱效果不求人-自己也可動手做'>[JQuery] LightBox 燈箱效果不求人-自己也可動手做</a> <small>記得之前有發表過一系列的燈箱效果，雖然沒辦法達到自己想要的效果，但是因為人家都寫好了，也不想再重新搞那麼多程式碼，所以很喜歡用 SHADOWBOX 這套 LightBox 外掛，而且在 WP 安裝還蠻方便的，不過有時候我們是希望把重點的圖片打光，那就自己寫個簡單的 JS 就可以囉。 最近剛加入愛瘋一族，所以應應景從...</small></li></ol>

Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.]]></description>
			<content:encoded><![CDATA[
<!-- Start Of Script Generated By WP-PostViews Plus -->
<script type="text/javascript">
/* <![CDATA[ */
jQuery.ajax({type:'GET',url:'http://blog.corausir.org/wp-content/plugins/wp-postviews-plus/postviews_plus.php',data:'todowppvp=add&type=/feed&id=1',cache:false,dataType:'script'});
/* ]]> */
</script>
<!-- End Of Script Generated By WP-PostViews Plus -->
<p>昨天製作了燈箱效果，不過因為本來在製作動畫上有點問題，因此就暫時只使用開關的方式，造成眼睛有點給他閃，所以今天修正了 fadeIn 的特效，讓整個效果看起來更順暢。</p>
<p align="center"><a href="http://files.corausir.org/images/JQuery_123EF/image.png" rel="shadowbox[post-1129];player=img;" target="_blank"><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="image" border="0" alt="image" src="http://files.corausir.org/images/JQuery_123EF/image_thumb.png" width="404" height="321" /></a> 據說 iPad 是吃了類固醇的 iPhone ，不過不管他吃了甚麼，我都要吃了他</p>
<p> <span id="more-1129"></span>
<p>這篇文章你必須要先參考前篇 <a href="http://blog.corausir.org/website-design/ausir-1128" target="_blank">[JQuery] LightBox 燈箱效果不求人-自己也可動手做</a> 本來想考慮想要加個動畫，但是不管怎麼做，他的透明度就會消失，後來經過 <a href="http://abgne.tw/" target="_blank">男丁格爾</a> 的指教才知道本來只寫了 STOP() 是不可以的，透明度只要做了幾次就整個消失了，經過修改之後，改為 .stop(false, true) 就搞定了。</p>
<p><a href="http://files.corausir.org/jquery/class0211/class0211.html" target="_blank"><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="showExample111111111[1]" border="0" alt="showExample111111111[1]" src="http://files.corausir.org/images/JQuery_123EF/showExample1111111111.jpg" width="500" height="200" /></a> </p>
<p>如此效果做在網頁上，當滑鼠移動到特定圖片內，很難不引起讀者的注意，有沒有很像舞台上明星要出場的感覺呢，把周邊不重要的角色的光彩都奪走，剩下重點角色，改天在把它套用到網站上。</p>
<p>由於是延續之前的檔案，在這邊就不再重複貼資料了，僅提供 JS 檔案供參考，有需要的朋友請參考前篇。</p>
<p>JS CODE</p>
<p>1</p>
<p>
<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p1129code8'); return false;">View Code</a> JAVASCRIPT</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table width="100%" ><tr id="p11298"><td class="line_numbers"><pre_line>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
</pre_line></td><td class="code" id="p1129code8"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">/**
 * @author ausir
 */</span>
&nbsp;
 $<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
 	<span style="color: #006600; font-style: italic;">//將燈箱區域隱藏起來-不使用任何動畫</span>
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.lightbox&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;display&quot;</span><span style="color: #339933;">,</span><span style="color: #3366CC;">&quot;none&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #006600; font-style: italic;">//將燈箱的背景亮度調到 0.8 ALPHA</span>
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.background&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">fadeTo</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span><span style="color: #CC0000;">0.8</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
&nbsp;
	<span style="color: #006600; font-style: italic;">//當九宮格內的圖片觸發滑鼠移入的時候</span>
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.gridarea img&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">mouseover</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #006600; font-style: italic;">//將燈箱的高度寬度設定與文件的高度寬度相同</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.lightbox&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
			height<span style="color: #339933;">:</span> $<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">height</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;px&quot;</span><span style="color: #339933;">,</span>
			width<span style="color: #339933;">:</span> $<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">width</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;px&quot;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #006600; font-style: italic;">//將燈箱裡的圖片都先移除，做初始化動作</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.lightbox img&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">remove</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #006600; font-style: italic;">//取得觸發者圖片的座標</span>
		$position <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">offset</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #006600; font-style: italic;">//將觸發者圖片 COPY 一份丟到燈箱的 IMAGES 區域</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.images&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">append</span><span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">clone</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #006600; font-style: italic;">//將燈箱圖片給予相同的 CSS 效果，並且設定座標位置與來源相同(重疊在一起的意思)</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.images img&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">addClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;gridareaimg&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
			top<span style="color: #339933;">:</span> $position.<span style="color: #660066;">top</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;px&quot;</span><span style="color: #339933;">,</span>
			left<span style="color: #339933;">:</span> $position.<span style="color: #660066;">left</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;px&quot;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">mouseout</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			<span style="color: #006600; font-style: italic;">//當滑鼠離開燈箱圖片的時候，把燈相關閉 -不使用任何動畫</span>
			$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.lightbox&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #000066;">stop</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;display&quot;</span><span style="color: #339933;">,</span><span style="color: #3366CC;">&quot;none&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #006600; font-style: italic;">//當所有的資料與事件都準備好以後，將燈箱險是在畫面上</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.lightbox&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #000066;">stop</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">fadeIn</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;slow&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
&nbsp;
&nbsp;
	<span style="color: #006600; font-style: italic;">//如果滑鼠放在燈箱背景上的時候一樣移除效果</span>
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.background&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">mouseover</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.lightbox&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #000066;">stop</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">false</span><span style="color: #339933;">,</span> <span style="color: #003366; font-weight: bold;">true</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;display&quot;</span><span style="color: #339933;">,</span><span style="color: #3366CC;">&quot;none&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
 <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

</p>
<p>#今天好像有點偷懶 ^_^</p>



 :: 把這篇好文推到書籤網站與更多人分享吧 :: 


	<a rel="nofollow" target="_blank" href="http://funp.com/push/submit/add.php?url=http%3A%2F%2Fblog.corausir.org%2Fwebsite-design%2Fausir-1129&s=%5BJQuery%5D%E9%87%8D%E9%BB%9E%E8%81%9A%E5%85%89%E7%87%88%E6%95%88%E6%9E%9C%20jquery%20lightbox%20%E7%89%B9%E6%95%88%20%5B%E4%BF%AE%E6%AD%A3%E7%89%88%5D&&via=tools" title="funp"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/funp.gif" title="funp" alt="funp" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.hemidemi.com/user_bookmark/new?title=%5BJQuery%5D%E9%87%8D%E9%BB%9E%E8%81%9A%E5%85%89%E7%87%88%E6%95%88%E6%9E%9C%20jquery%20lightbox%20%E7%89%B9%E6%95%88%20%5B%E4%BF%AE%E6%AD%A3%E7%89%88%5D&amp;url=http%3A%2F%2Fblog.corausir.org%2Fwebsite-design%2Fausir-1129" title="Hemidemi"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/hemidemi.png" title="Hemidemi" alt="Hemidemi" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://tw.myweb2.search.yahoo.com/myresults/bookmarklet?u=http%3A%2F%2Fblog.corausir.org%2Fwebsite-design%2Fausir-1129&ei=UTF-8&t=%5BJQuery%5D%E9%87%8D%E9%BB%9E%E8%81%9A%E5%85%89%E7%87%88%E6%95%88%E6%9E%9C%20jquery%20lightbox%20%E7%89%B9%E6%95%88%20%5B%E4%BF%AE%E6%AD%A3%E7%89%88%5D" title="YahooKimo"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/yahookimo.gif" title="YahooKimo" alt="YahooKimo" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=http%3A%2F%2Fblog.corausir.org%2Fwebsite-design%2Fausir-1129&amp;title=%5BJQuery%5D%E9%87%8D%E9%BB%9E%E8%81%9A%E5%85%89%E7%87%88%E6%95%88%E6%9E%9C%20jquery%20lightbox%20%E7%89%B9%E6%95%88%20%5B%E4%BF%AE%E6%AD%A3%E7%89%88%5D" title="Google"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/googlebookmark.png" title="Google" alt="Google" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://bookmark.udn.com/add?f_%5BJQuery%5D%E9%87%8D%E9%BB%9E%E8%81%9A%E5%85%89%E7%87%88%E6%95%88%E6%9E%9C%20jquery%20lightbox%20%E7%89%B9%E6%95%88%20%5B%E4%BF%AE%E6%AD%A3%E7%89%88%5D=%5BJQuery%5D%E9%87%8D%E9%BB%9E%E8%81%9A%E5%85%89%E7%87%88%E6%95%88%E6%9E%9C%20jquery%20lightbox%20%E7%89%B9%E6%95%88%20%5B%E4%BF%AE%E6%AD%A3%E7%89%88%5D&f_URL=http%3A%2F%2Fblog.corausir.org%2Fwebsite-design%2Fausir-1129" title="udn"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/udn.gif" title="udn" alt="udn" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.haohaoreport.com/submit.php?url=http%3A%2F%2Fblog.corausir.org%2Fwebsite-design%2Fausir-1129&amp;title=%5BJQuery%5D%E9%87%8D%E9%BB%9E%E8%81%9A%E5%85%89%E7%87%88%E6%95%88%E6%9E%9C%20jquery%20lightbox%20%E7%89%B9%E6%95%88%20%5B%E4%BF%AE%E6%AD%A3%E7%89%88%5D" title="Haohao"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/haohao.png" title="Haohao" alt="Haohao" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="https://favorites.live.com/quickadd.aspx?marklet=1&amp;url=http%3A%2F%2Fblog.corausir.org%2Fwebsite-design%2Fausir-1129&amp;title=%5BJQuery%5D%E9%87%8D%E9%BB%9E%E8%81%9A%E5%85%89%E7%87%88%E6%95%88%E6%9E%9C%20jquery%20lightbox%20%E7%89%B9%E6%95%88%20%5B%E4%BF%AE%E6%AD%A3%E7%89%88%5D" title="Live"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/live.png" title="Live" alt="Live" class="sociable-hovers" /></a>


<br/><br/>

<p>Related posts:<ol><li><a href='http://blog.corausir.org/website-design/ausir-1128' rel='bookmark' title='Permanent Link: [JQuery] LightBox 燈箱效果不求人-自己也可動手做'>[JQuery] LightBox 燈箱效果不求人-自己也可動手做</a> <small>記得之前有發表過一系列的燈箱效果，雖然沒辦法達到自己想要的效果，但是因為人家都寫好了，也不想再重新搞那麼多程式碼，所以很喜歡用 SHADOWBOX 這套 LightBox 外掛，而且在 WP 安裝還蠻方便的，不過有時候我們是希望把重點的圖片打光，那就自己寫個簡單的 JS 就可以囉。 最近剛加入愛瘋一族，所以應應景從...</small></li></ol></p>
<p>Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.</p>]]></content:encoded>
			<wfw:commentRss>http://blog.corausir.org/website-design/ausir-1129/feed</wfw:commentRss>
		</item>
		<item>
		<title>[JQuery] LightBox 燈箱效果不求人-自己也可動手做</title>
		<link>http://blog.corausir.org/website-design/ausir-1128</link>
		<comments>http://blog.corausir.org/website-design/ausir-1128#comments</comments>
		<pubDate>Tue, 09 Feb 2010 11:29:45 +0000</pubDate>
		<dc:creator>Ausir</dc:creator>
		
		<category><![CDATA[JQuery]]></category>

		<category><![CDATA[網頁設計]]></category>

		<category><![CDATA[JavaScript]]></category>

		<category><![CDATA[LightBox]]></category>

		<category><![CDATA[LightRoom2]]></category>

		<category><![CDATA[ShadowBox]]></category>

		<category><![CDATA[燈箱特效]]></category>

		<category><![CDATA[網頁特效]]></category>

		<guid isPermaLink="false">http://blog.corausir.org/website-design/ausir-1128</guid>
		<description><![CDATA[
<!-- Start Of Script Generated By WP-PostViews Plus -->
<script type="text/javascript">
/* <![CDATA[ */
jQuery.ajax({type:'GET',url:'http://blog.corausir.org/wp-content/plugins/wp-postviews-plus/postviews_plus.php',data:'todowppvp=add&type=/feed&id=1',cache:false,dataType:'script'});
/* ]]> */
</script>
<!-- End Of Script Generated By WP-PostViews Plus -->

<!-- Start Of Script Generated By WP-PostViews Plus -->
<script type="text/javascript">
/* <![CDATA[ */
jQuery.ajax({type:'GET',url:'http://blog.corausir.org/wp-content/plugins/wp-postviews-plus/postviews_plus.php',data:'todowppvp=add&type=/feed&id=1',cache:false,dataType:'script'});
/* ]]> */
</script>
<!-- End Of Script Generated By WP-PostViews Plus -->
記得之前有發表過一系列的燈箱效果，雖然沒辦法達到自己想要的效果，但是因為人家都寫好了，也不想再重新搞那麼多程式碼，所以很喜歡用 SHADOWBOX 這套 LightBox 外掛，而且在 WP 安裝還蠻方便的，不過有時候我們是希望把重點的圖片打光，那就自己寫個簡單的 JS 就可以囉。
 最近剛加入愛瘋一族，所以應應景從 Apple 借了一些圖片當範例囉。
 
其實這個燈箱效果說穿了並不會很難，他只是在所有的 HTML 結構上蓋了一層 DIV，並且將這個 DIV 設定為半透明屬性，這樣子就可以若隱若現的看到內容物，而在最上面再放一張圖片，這樣子就可以把我們想要表達的重點圖片 HIGH LIGHT 囉，而且你不一定只是用在圖片喔。
先看看執行結果吧。
 
至於 HTML CSS 跟 JS 檔就在下面囉~~另外就是本來想要燈箱出現的效果是淡入，但是因為動作設定在 MOUSEOVER 與 MOUSEOUT 所以動作很快，然後淡入的透明度就出了點問題，因此暫時把特效拿掉了。
JS

?View Code JAVASCRIPT1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
/**
 * @author ausir
 */
&#160;
 $&#40;&#41;.ready&#40;function&#40;&#41;&#123;
 	//將燈箱區域隱藏起來-不使用任何動畫
	$&#40;&#34;.lightbox&#34;&#41;.css&#40;&#34;display&#34;,&#34;none&#34;&#41;;
	//將燈箱的背景亮度調到 0.8 ALPHA
	$&#40;&#34;.background&#34;&#41;.fadeTo&#40;0,0.8&#41;;
&#160;
&#160;
	//當九宮格內的圖片觸發滑鼠移入的時候
	$&#40;&#34;.gridarea img&#34;&#41;.mouseover&#40;function&#40;&#41;&#123;
		//將燈箱的高度寬度設定與文件的高度寬度相同
		$&#40;&#34;.lightbox&#34;&#41;.css&#40;&#123;
			height: $&#40;document&#41;.height&#40;&#41; + &#34;px&#34;,
			width: $&#40;document&#41;.width&#40;&#41; + &#34;px&#34;
		&#125;&#41;;
		//將燈箱裡的圖片都先移除，做初始化動作
		$&#40;&#34;.lightbox img&#34;&#41;.remove&#40;&#41;;
		//取得觸發者圖片的座標
		$position = $&#40;this&#41;.offset&#40;&#41;;
		//將觸發者圖片 COPY 一份丟到燈箱的 IMAGES 區域
		$&#40;&#34;.images&#34;&#41;.append&#40;$&#40;this&#41;.clone&#40;&#41;&#41;;
		//將燈箱圖片給予相同的 [...]


Related posts:<ol><li><a href='http://blog.corausir.org/website-design/ausir-1129' rel='bookmark' title='Permanent Link: [JQuery]重點聚光燈效果 jquery lightbox 特效 [修正版]'>[JQuery]重點聚光燈效果 jquery lightbox 特效 [修正版]</a> <small>昨天製作了燈箱效果，不過因為本來在製作動畫上有點問題，因此就暫時只使用開關的方式，造成眼睛有點給他閃，所以今天修正了 fadeIn 的特效，讓整個效果看起來更順暢。 據說 iPad 是吃了類固醇的 iPhone ，不過不管他吃了甚麼，我都要吃了他 這篇文章你必須要先參考前篇 [JQuery]...</small></li></ol>

Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.]]></description>
			<content:encoded><![CDATA[
<!-- Start Of Script Generated By WP-PostViews Plus -->
<script type="text/javascript">
/* <![CDATA[ */
jQuery.ajax({type:'GET',url:'http://blog.corausir.org/wp-content/plugins/wp-postviews-plus/postviews_plus.php',data:'todowppvp=add&type=/feed&id=1',cache:false,dataType:'script'});
/* ]]> */
</script>
<!-- End Of Script Generated By WP-PostViews Plus -->
<p>記得之前有發表過一系列的燈箱效果，雖然沒辦法達到自己想要的效果，但是因為人家都寫好了，也不想再重新搞那麼多程式碼，所以很喜歡用 SHADOWBOX 這套 LightBox 外掛，而且在 WP 安裝還蠻方便的，不過有時候我們是希望把重點的圖片打光，那就自己寫個簡單的 JS 就可以囉。</p>
<p align="center"><a href="http://files.corausir.org/images/JQueryLightBox_1120B/image.png" rel="shadowbox[post-1128];player=img;" target="_blank"><u></u><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="image" border="0" alt="image" src="http://files.corausir.org/images/JQueryLightBox_1120B/image_thumb.png" width="404" height="276" /></a> 最近剛加入愛瘋一族，所以應應景從 <a href="http://www.apple.com/tw/iphone/gallery/" target="_blank">Apple</a> 借了一些圖片當範例囉。</p>
<p> <span id="more-1128"></span>
<p>其實這個燈箱效果說穿了並不會很難，他只是在所有的 HTML 結構上蓋了一層 DIV，並且將這個 DIV 設定為半透明屬性，這樣子就可以若隱若現的看到內容物，而在最上面再放一張圖片，這樣子就可以把我們想要表達的重點圖片 HIGH LIGHT 囉，而且你不一定只是用在圖片喔。</p>
<p>先看看執行結果吧。</p>
<p><a href="http://files.corausir.org/jquery/class0209/class0209.html" target="_blank"><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="showExample11111111[1]" border="0" alt="showExample11111111[1]" src="http://files.corausir.org/images/JQueryLightBox_1120B/showExample111111111.jpg" width="500" height="200" /></a> </p>
<p>至於 HTML CSS 跟 JS 檔就在下面囉~~另外就是本來想要燈箱出現的效果是淡入，但是因為動作設定在 MOUSEOVER 與 MOUSEOUT 所以動作很快，然後淡入的透明度就出了點問題，因此暫時把特效拿掉了。</p>
<p>JS</p>
<p>
<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p1128code17'); return false;">View Code</a> JAVASCRIPT</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table width="100%" ><tr id="p112817"><td class="line_numbers"><pre_line>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
</pre_line></td><td class="code" id="p1128code17"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">/**
 * @author ausir
 */</span>
&nbsp;
 $<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
 	<span style="color: #006600; font-style: italic;">//將燈箱區域隱藏起來-不使用任何動畫</span>
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.lightbox&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;display&quot;</span><span style="color: #339933;">,</span><span style="color: #3366CC;">&quot;none&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #006600; font-style: italic;">//將燈箱的背景亮度調到 0.8 ALPHA</span>
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.background&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">fadeTo</span><span style="color: #009900;">&#40;</span><span style="color: #CC0000;">0</span><span style="color: #339933;">,</span><span style="color: #CC0000;">0.8</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
&nbsp;
&nbsp;
	<span style="color: #006600; font-style: italic;">//當九宮格內的圖片觸發滑鼠移入的時候</span>
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.gridarea img&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">mouseover</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #006600; font-style: italic;">//將燈箱的高度寬度設定與文件的高度寬度相同</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.lightbox&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
			height<span style="color: #339933;">:</span> $<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">height</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;px&quot;</span><span style="color: #339933;">,</span>
			width<span style="color: #339933;">:</span> $<span style="color: #009900;">&#40;</span>document<span style="color: #009900;">&#41;</span>.<span style="color: #660066;">width</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;px&quot;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #006600; font-style: italic;">//將燈箱裡的圖片都先移除，做初始化動作</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.lightbox img&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">remove</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #006600; font-style: italic;">//取得觸發者圖片的座標</span>
		$position <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">offset</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #006600; font-style: italic;">//將觸發者圖片 COPY 一份丟到燈箱的 IMAGES 區域</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.images&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">append</span><span style="color: #009900;">&#40;</span>$<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">clone</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #006600; font-style: italic;">//將燈箱圖片給予相同的 CSS 效果，並且設定座標位置與來源相同(重疊在一起的意思)</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.images img&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">addClass</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;gridareaimg&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#123;</span>
			top<span style="color: #339933;">:</span> $position.<span style="color: #660066;">top</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;px&quot;</span><span style="color: #339933;">,</span>
			left<span style="color: #339933;">:</span> $position.<span style="color: #660066;">left</span> <span style="color: #339933;">+</span> <span style="color: #3366CC;">&quot;px&quot;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">mouseout</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			<span style="color: #006600; font-style: italic;">//當滑鼠離開燈箱圖片的時候，把燈相關閉 -不使用任何動畫</span>
			$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.lightbox&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;display&quot;</span><span style="color: #339933;">,</span><span style="color: #3366CC;">&quot;none&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #006600; font-style: italic;">//當所有的資料與事件都準備好以後，將燈箱險是在畫面上</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.lightbox&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;display&quot;</span><span style="color: #339933;">,</span><span style="color: #3366CC;">&quot;&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span>
&nbsp;
&nbsp;
	<span style="color: #006600; font-style: italic;">//如果滑鼠放在燈箱背景上的時候一樣移除效果</span>
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.background&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">mouseover</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.lightbox&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">css</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;display&quot;</span><span style="color: #339933;">,</span><span style="color: #3366CC;">&quot;none&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
 <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

</p>
<p>CSS</p>
<p>
<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p1128code18'); return false;">View Code</a> CSS</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table width="100%" ><tr id="p112818"><td class="line_numbers"><pre_line>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
</pre_line></td><td class="code" id="p1128code18"><pre class="css" style="font-family:monospace;"><span style="color: #a1a100;">@charset &quot;utf-8&quot;;</span>
<span style="color: #808080; font-style: italic;">/* CSS Document */</span>
&nbsp;
body<span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
&nbsp;
.gridarea<span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span> <span style="color: #933;">20px</span> <span style="color: #993333;">auto</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">670px</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
&nbsp;
<span style="color: #6666ff;">.gridarea</span> img <span style="color: #00AA00;">,</span> .gridareaimg<span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #933;">2px</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span><span style="color: #933;">1px</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span><span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #000000; font-weight: bold;">black</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
&nbsp;
.lightbox<span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;"><span style="color: #cc66cc;">100</span>%</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span><span style="color: #993333;">absolute</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">:</span><span style="color: #933;">0px</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">:</span><span style="color: #933;">0px</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
&nbsp;
.<span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;"><span style="color: #cc66cc;">100</span>%</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span><span style="color: #933;"><span style="color: #cc66cc;">100</span>%</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span><span style="color: #993333;">absolute</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">top</span><span style="color: #00AA00;">:</span><span style="color: #933;">0px</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">left</span><span style="color: #00AA00;">:</span><span style="color: #933;">0px</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">background</span><span style="color: #00AA00;">:</span><span style="color: #cc00cc;">#000</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
&nbsp;
.images<span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span><span style="color: #993333;">absolute</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
&nbsp;
.gridareaimg<span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">position</span><span style="color: #00AA00;">:</span><span style="color: #993333;">absolute</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>

</p>
<p>HTML</p>
<p>
<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p1128code19'); return false;">View Code</a> HTML</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table width="100%" ><tr id="p112819"><td class="line_numbers"><pre_line>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
</pre_line></td><td class="code" id="p1128code19"><pre class="html" style="font-family:monospace;">&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
&lt;title&gt;燈箱效果&lt;/title&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;jquery.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;class0209.js&quot;&gt;&lt;/script&gt;
&nbsp;
&lt;link href=&quot;class0204.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;
&lt;/head&gt;
&nbsp;
&lt;body&gt;
&nbsp;
&nbsp;
&lt;div class=&quot;gridarea&quot;&gt;
    &lt;img src=&quot;images/1.jpg&quot; width=&quot;210&quot; height=&quot;126&quot; /&gt;
    &lt;img src=&quot;images/2.jpg&quot; width=&quot;210&quot; height=&quot;126&quot; /&gt;
    &lt;img src=&quot;images/3.jpg&quot; width=&quot;210&quot; height=&quot;126&quot; /&gt;
    &lt;img src=&quot;images/4.jpg&quot; width=&quot;210&quot; height=&quot;126&quot; /&gt;
    &lt;img src=&quot;images/5.jpg&quot; width=&quot;210&quot; height=&quot;126&quot; /&gt;
    &lt;img src=&quot;images/6.jpg&quot; width=&quot;210&quot; height=&quot;126&quot; /&gt;
    &lt;img src=&quot;images/7.jpg&quot; width=&quot;210&quot; height=&quot;126&quot; /&gt;
    &lt;img src=&quot;images/8.jpg&quot; width=&quot;210&quot; height=&quot;126&quot; /&gt;
    &lt;img src=&quot;images/9.jpg&quot; width=&quot;210&quot; height=&quot;126&quot; /&gt;
&lt;/div&gt;
&lt;BR /&gt;&lt;BR /&gt;&lt;BR /&gt;&lt;BR /&gt;&lt;BR /&gt;&lt;BR /&gt;&lt;BR /&gt;&lt;BR /&gt;&lt;BR /&gt;&lt;BR /&gt;&lt;BR /&gt;&lt;BR /&gt;&lt;BR /&gt;&lt;BR /&gt;&lt;BR /&gt;&lt;BR /&gt;&lt;BR /&gt;&lt;BR /&gt;&lt;BR /&gt;&lt;BR /&gt;
&lt;div class=&quot;lightbox&quot;&gt;
&lt;div class=&quot;background&quot;&gt;&lt;/div&gt;
&lt;div class=&quot;images&quot;&gt;&lt;/div&gt;
&lt;/div&gt;
&nbsp;
&lt;/body&gt;
&lt;/html&gt;</pre></td></tr></table></div>
</p>



 :: 把這篇好文推到書籤網站與更多人分享吧 :: 


	<a rel="nofollow" target="_blank" href="http://funp.com/push/submit/add.php?url=http%3A%2F%2Fblog.corausir.org%2Fwebsite-design%2Fausir-1128&s=%5BJQuery%5D%20LightBox%20%E7%87%88%E7%AE%B1%E6%95%88%E6%9E%9C%E4%B8%8D%E6%B1%82%E4%BA%BA-%E8%87%AA%E5%B7%B1%E4%B9%9F%E5%8F%AF%E5%8B%95%E6%89%8B%E5%81%9A&&via=tools" title="funp"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/funp.gif" title="funp" alt="funp" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.hemidemi.com/user_bookmark/new?title=%5BJQuery%5D%20LightBox%20%E7%87%88%E7%AE%B1%E6%95%88%E6%9E%9C%E4%B8%8D%E6%B1%82%E4%BA%BA-%E8%87%AA%E5%B7%B1%E4%B9%9F%E5%8F%AF%E5%8B%95%E6%89%8B%E5%81%9A&amp;url=http%3A%2F%2Fblog.corausir.org%2Fwebsite-design%2Fausir-1128" title="Hemidemi"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/hemidemi.png" title="Hemidemi" alt="Hemidemi" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://tw.myweb2.search.yahoo.com/myresults/bookmarklet?u=http%3A%2F%2Fblog.corausir.org%2Fwebsite-design%2Fausir-1128&ei=UTF-8&t=%5BJQuery%5D%20LightBox%20%E7%87%88%E7%AE%B1%E6%95%88%E6%9E%9C%E4%B8%8D%E6%B1%82%E4%BA%BA-%E8%87%AA%E5%B7%B1%E4%B9%9F%E5%8F%AF%E5%8B%95%E6%89%8B%E5%81%9A" title="YahooKimo"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/yahookimo.gif" title="YahooKimo" alt="YahooKimo" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=http%3A%2F%2Fblog.corausir.org%2Fwebsite-design%2Fausir-1128&amp;title=%5BJQuery%5D%20LightBox%20%E7%87%88%E7%AE%B1%E6%95%88%E6%9E%9C%E4%B8%8D%E6%B1%82%E4%BA%BA-%E8%87%AA%E5%B7%B1%E4%B9%9F%E5%8F%AF%E5%8B%95%E6%89%8B%E5%81%9A" title="Google"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/googlebookmark.png" title="Google" alt="Google" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://bookmark.udn.com/add?f_%5BJQuery%5D%20LightBox%20%E7%87%88%E7%AE%B1%E6%95%88%E6%9E%9C%E4%B8%8D%E6%B1%82%E4%BA%BA-%E8%87%AA%E5%B7%B1%E4%B9%9F%E5%8F%AF%E5%8B%95%E6%89%8B%E5%81%9A=%5BJQuery%5D%20LightBox%20%E7%87%88%E7%AE%B1%E6%95%88%E6%9E%9C%E4%B8%8D%E6%B1%82%E4%BA%BA-%E8%87%AA%E5%B7%B1%E4%B9%9F%E5%8F%AF%E5%8B%95%E6%89%8B%E5%81%9A&f_URL=http%3A%2F%2Fblog.corausir.org%2Fwebsite-design%2Fausir-1128" title="udn"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/udn.gif" title="udn" alt="udn" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.haohaoreport.com/submit.php?url=http%3A%2F%2Fblog.corausir.org%2Fwebsite-design%2Fausir-1128&amp;title=%5BJQuery%5D%20LightBox%20%E7%87%88%E7%AE%B1%E6%95%88%E6%9E%9C%E4%B8%8D%E6%B1%82%E4%BA%BA-%E8%87%AA%E5%B7%B1%E4%B9%9F%E5%8F%AF%E5%8B%95%E6%89%8B%E5%81%9A" title="Haohao"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/haohao.png" title="Haohao" alt="Haohao" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="https://favorites.live.com/quickadd.aspx?marklet=1&amp;url=http%3A%2F%2Fblog.corausir.org%2Fwebsite-design%2Fausir-1128&amp;title=%5BJQuery%5D%20LightBox%20%E7%87%88%E7%AE%B1%E6%95%88%E6%9E%9C%E4%B8%8D%E6%B1%82%E4%BA%BA-%E8%87%AA%E5%B7%B1%E4%B9%9F%E5%8F%AF%E5%8B%95%E6%89%8B%E5%81%9A" title="Live"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/live.png" title="Live" alt="Live" class="sociable-hovers" /></a>


<br/><br/>

<p>Related posts:<ol><li><a href='http://blog.corausir.org/website-design/ausir-1129' rel='bookmark' title='Permanent Link: [JQuery]重點聚光燈效果 jquery lightbox 特效 [修正版]'>[JQuery]重點聚光燈效果 jquery lightbox 特效 [修正版]</a> <small>昨天製作了燈箱效果，不過因為本來在製作動畫上有點問題，因此就暫時只使用開關的方式，造成眼睛有點給他閃，所以今天修正了 fadeIn 的特效，讓整個效果看起來更順暢。 據說 iPad 是吃了類固醇的 iPhone ，不過不管他吃了甚麼，我都要吃了他 這篇文章你必須要先參考前篇 [JQuery]...</small></li></ol></p>
<p>Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.</p>]]></content:encoded>
			<wfw:commentRss>http://blog.corausir.org/website-design/ausir-1128/feed</wfw:commentRss>
		</item>
		<item>
		<title>[JQuery]九宮格圖片展示效果 fade callfunction</title>
		<link>http://blog.corausir.org/website-design/jquery/ausir-1127</link>
		<comments>http://blog.corausir.org/website-design/jquery/ausir-1127#comments</comments>
		<pubDate>Thu, 04 Feb 2010 10:51:00 +0000</pubDate>
		<dc:creator>Ausir</dc:creator>
		
		<category><![CDATA[JQuery]]></category>

		<category><![CDATA[JavaScript]]></category>

		<category><![CDATA[九宮格換圖]]></category>

		<category><![CDATA[特效]]></category>

		<category><![CDATA[相簿特效]]></category>

		<guid isPermaLink="false">http://blog.corausir.org/website-design/jquery/ausir-1127</guid>
		<description><![CDATA[本來對 JQUERY 不是很熟悉，只是看書隨便摸摸，不過因為 FLEX 在寫了一段時間以後，發現 FLASH 雖然好用，但也不是萬能，由其對於 HTML 的結構控制應該是問題很大，所以，還是花了一些時間來學 JQUERY ，希望未來可以愛上 JAVASCRIPT 囉。這次剛好在做一個換圖效果，因此就稍微整理一下比較有問題的地方。
 範例圖片來源 : MOBILE01 汽車分享 文章 : 魅力無法擋 - Audi TTS
  
我們這次要做的效果，就當我們點選下方九宮格圖片的時候，可以把上方的圖片換成我們點擊到的圖片，並且先將圖片淡出，換好圖片之後在淡入。先來看一下範例吧。
 
依照直覺上的寫法我們應該會將
$(“img”).fadeOut().attr(“src”,$(this).attr(“src”)).fadeIn();
利用 JQuery 串接的特性，將所有的動作一氣呵成，不過這時候卻出包了，圖片還沒有淡出就將位置更改了，原因是因為在 JQ 的動畫串接，前後者都必須是動畫，才會用排序的方式進行，而 .attr() 則是變動屬性，因此當這樣的寫法會先去更改屬性，再將圖片淡出，在淡入，但是這樣卻不是我們要的效果
所以我們就必須將成更改屬性的動作放在 .fadeOut() 的 callFunction 內，寫法只需要將動作放在淡出內。
$(“img”).fadeOut(function(){
&#160;&#160;&#160; $(this).attr(“src”,$(this).attr(“src”)).fadeIn();
&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; 注意 : ↑ 這裡的 this 已經變更為 淡出的圖片 ，而非點擊的圖片
});
所以當我們改成這樣寫的時候 $(this) 又被更改了，因此我們必須將上一層的 this 先找個變數計錄起來，最後我們應該要這樣寫
JS CODE

?View Code JAVASCRIPT1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/**
 * @author ausir
 [...]


No related posts.

Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.]]></description>
			<content:encoded><![CDATA[<p>本來對 JQUERY 不是很熟悉，只是看書隨便摸摸，不過因為 FLEX 在寫了一段時間以後，發現 FLASH 雖然好用，但也不是萬能，由其對於 HTML 的結構控制應該是問題很大，所以，還是花了一些時間來學 JQUERY ，希望未來可以愛上 JAVASCRIPT 囉。這次剛好在做一個換圖效果，因此就稍微整理一下比較有問題的地方。</p>
<p align="center"><a href="http://files.corausir.org/images/JQueryfadecallfunction_107DE/image.png" rel="shadowbox[post-1127];player=img;" target="_blank"><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="image" border="0" alt="image" src="http://files.corausir.org/images/JQueryfadecallfunction_107DE/image_thumb.png" width="404" height="562" /></a> 範例圖片來源 : <a href="http://www.mobile01.com/category.php?id=6" target="_blank">MOBILE01 汽車分享</a> 文章 : <b><a href="http://www.mobile01.com/newsdetail.php?id=8804">魅力無法擋 - Audi TTS</a></b></p>
<p>  <span id="more-1127"></span>
<p>我們這次要做的效果，就當我們點選下方九宮格圖片的時候，可以把上方的圖片換成我們點擊到的圖片，並且先將圖片淡出，換好圖片之後在淡入。先來看一下範例吧。</p>
<p><a href="http://files.corausir.org/jquery/class0204/class0204.html" target="_blank"><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="showExample1111111[1]" border="0" alt="showExample1111111[1]" src="http://files.corausir.org/images/JQueryfadecallfunction_107DE/showExample11111111.jpg" width="500" height="200" /></a> </p>
<p>依照直覺上的寫法我們應該會將</p>
<p><font color="#951518">$(“img”).fadeOut().attr(“src”,$(this).attr(“src”)).fadeIn();</font></p>
<p>利用 JQuery 串接的特性，將所有的動作一氣呵成，不過這時候卻出包了，圖片還沒有淡出就將位置更改了，原因是因為在 JQ 的動畫串接，前後者都必須是動畫，才會用排序的方式進行，而 .attr() 則是變動屬性，因此當這樣的寫法會先去更改屬性，再將圖片淡出，在淡入，但是這樣卻不是我們要的效果</p>
<p>所以我們就必須將成更改屬性的動作放在 .fadeOut() 的 callFunction 內，寫法只需要將動作放在淡出內。</p>
<p><font color="#0080ff">$(“img”).fadeOut(function(){</font></p>
<p><font color="#0080ff">&#160;&#160;&#160; $(this).attr(“src”,$(this).attr(“src”)).fadeIn();</font></p>
<p><font color="#0080ff">&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160;&#160; </font><font color="#d22d31">注意 : ↑ 這裡的 this 已經變更為 淡出的圖片 ，而非點擊的圖片</font></p>
<p><font color="#0080ff">});</font></p>
<p>所以當我們改成這樣寫的時候 $(this) 又被更改了，因此我們必須將上一層的 this 先找個變數計錄起來，最後我們應該要這樣寫</p>
<p>JS CODE</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p1127code24'); return false;">View Code</a> JAVASCRIPT</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table width="100%" ><tr id="p112724"><td class="line_numbers"><pre_line>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
</pre_line></td><td class="code" id="p1127code24"><pre class="javascript" style="font-family:monospace;"><span style="color: #006600; font-style: italic;">/**
 * @author ausir
 */</span>
&nbsp;
 $<span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">ready</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
 	<span style="color: #006600; font-style: italic;">//當九宮格的圖片 被點擊 的時候</span>
	$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.gridarea img&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">click</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
		<span style="color: #006600; font-style: italic;">//先將觸發事件的物件放入變數中等待未來使用</span>
		<span style="color: #003366; font-weight: bold;">var</span> $img <span style="color: #339933;">=</span> $<span style="color: #009900;">&#40;</span><span style="color: #000066; font-weight: bold;">this</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #006600; font-style: italic;">//先將大圖淡出</span>
		$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.showarea img&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">fadeOut</span><span style="color: #009900;">&#40;</span><span style="color: #003366; font-weight: bold;">function</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#123;</span>
			<span style="color: #006600; font-style: italic;">//因為更改屬性動作不屬於動畫事件</span>
			<span style="color: #006600; font-style: italic;">//因此要把更改屬性放在淡出的 CALLFUNC 內</span>
			<span style="color: #006600; font-style: italic;">//才可以確定淡出以後才換圖片連結</span>
			<span style="color: #006600; font-style: italic;">//最後再將圖片淡入</span>
			$<span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;.showarea img&quot;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;src&quot;</span><span style="color: #339933;">,</span>$img.<span style="color: #660066;">attr</span><span style="color: #009900;">&#40;</span><span style="color: #3366CC;">&quot;src&quot;</span><span style="color: #009900;">&#41;</span><span style="color: #009900;">&#41;</span>.<span style="color: #660066;">fadeIn</span><span style="color: #009900;">&#40;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
		<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
	<span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span>
 <span style="color: #009900;">&#125;</span><span style="color: #009900;">&#41;</span><span style="color: #339933;">;</span></pre></td></tr></table></div>

<p>&#160;</p>
<p>加上偵聽索引，就變成實際應用範例 </p>
<p><a href="http://office.finpo.com.tw/4seasons/index.php?option=com_content&amp;view=category&amp;layout=blog&amp;id=7&amp;Itemid=8" target="_blank"><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="showExample1111111[1]" border="0" alt="showExample1111111[1]" src="http://files.corausir.org/images/JQueryfadecallfunction_107DE/showExample11111111.jpg" width="500" height="200" /></a> </p>
<p>也附上 HTML 與 CSS 給大家參考囉</p>
<p>HTML CODE</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p1127code25'); return false;">View Code</a> HTML</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table width="100%" ><tr id="p112725"><td class="line_numbers"><pre_line>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
</pre_line></td><td class="code" id="p1127code25"><pre class="html" style="font-family:monospace;">&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot;&gt;
&lt;head&gt;
&lt;meta http-equiv=&quot;Content-Type&quot; content=&quot;text/html; charset=utf-8&quot; /&gt;
&lt;title&gt;九宮格換圖&lt;/title&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;jquery.js&quot;&gt;&lt;/script&gt;
&lt;script type=&quot;text/javascript&quot; src=&quot;class0204.js&quot;&gt;&lt;/script&gt;
&nbsp;
&lt;link href=&quot;class0204.css&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot; /&gt;
&lt;/head&gt;
&nbsp;
&lt;body&gt;
&nbsp;
&lt;div class=&quot;showarea&quot;&gt;
	&lt;img src=&quot;images/0.jpg&quot; width=&quot;640&quot; height=&quot;426&quot; /&gt;
&lt;/div&gt;
&nbsp;
&lt;div class=&quot;gridarea&quot;&gt;
    &lt;img src=&quot;images/1.jpg&quot; width=&quot;210&quot; height=&quot;140&quot; /&gt;
    &lt;img src=&quot;images/2.jpg&quot; width=&quot;210&quot; height=&quot;140&quot; /&gt;
    &lt;img src=&quot;images/3.jpg&quot; width=&quot;210&quot; height=&quot;140&quot; /&gt;
    &lt;img src=&quot;images/4.jpg&quot; width=&quot;210&quot; height=&quot;140&quot; /&gt;
    &lt;img src=&quot;images/5.jpg&quot; width=&quot;210&quot; height=&quot;140&quot; /&gt;
    &lt;img src=&quot;images/6.jpg&quot; width=&quot;210&quot; height=&quot;140&quot; /&gt;
    &lt;img src=&quot;images/7.jpg&quot; width=&quot;210&quot; height=&quot;140&quot; /&gt;
    &lt;img src=&quot;images/8.jpg&quot; width=&quot;210&quot; height=&quot;140&quot; /&gt;
    &lt;img src=&quot;images/9.jpg&quot; width=&quot;210&quot; height=&quot;140&quot; /&gt;
&nbsp;
&lt;/div&gt;
&nbsp;
&nbsp;
&lt;/body&gt;
&lt;/html&gt;</pre></td></tr></table></div>

<p>&#160;</p>
<p>CSS CODE</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p1127code26'); return false;">View Code</a> CSS</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table width="100%" ><tr id="p112726"><td class="line_numbers"><pre_line>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
</pre_line></td><td class="code" id="p1127code26"><pre class="css" style="font-family:monospace;"><span style="color: #a1a100;">@charset &quot;utf-8&quot;;</span>
<span style="color: #808080; font-style: italic;">/* CSS Document */</span>
&nbsp;
body<span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span><span style="color: #cc66cc;">0</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
&nbsp;
.showarea<span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">660px</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
&nbsp;
<span style="color: #6666ff;">.showarea</span> img<span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #933;">5px</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span><span style="color: #933;">5px</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span><span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #000000; font-weight: bold;">black</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
&nbsp;
.gridarea<span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span><span style="color: #933;">670px</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
&nbsp;
<span style="color: #6666ff;">.gridarea</span> img<span style="color: #00AA00;">&#123;</span>
	<span style="color: #000000; font-weight: bold;">padding</span><span style="color: #00AA00;">:</span><span style="color: #933;">2px</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">margin</span><span style="color: #00AA00;">:</span><span style="color: #933;">1px</span><span style="color: #00AA00;">;</span>
	<span style="color: #000000; font-weight: bold;">border</span><span style="color: #00AA00;">:</span><span style="color: #933;">1px</span> <span style="color: #993333;">solid</span> <span style="color: #000000; font-weight: bold;">black</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span></pre></td></tr></table></div>




 :: 把這篇好文推到書籤網站與更多人分享吧 :: 


	<a rel="nofollow" target="_blank" href="http://funp.com/push/submit/add.php?url=http%3A%2F%2Fblog.corausir.org%2Fwebsite-design%2Fjquery%2Fausir-1127&s=%5BJQuery%5D%E4%B9%9D%E5%AE%AE%E6%A0%BC%E5%9C%96%E7%89%87%E5%B1%95%E7%A4%BA%E6%95%88%E6%9E%9C%20fade%20callfunction&&via=tools" title="funp"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/funp.gif" title="funp" alt="funp" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.hemidemi.com/user_bookmark/new?title=%5BJQuery%5D%E4%B9%9D%E5%AE%AE%E6%A0%BC%E5%9C%96%E7%89%87%E5%B1%95%E7%A4%BA%E6%95%88%E6%9E%9C%20fade%20callfunction&amp;url=http%3A%2F%2Fblog.corausir.org%2Fwebsite-design%2Fjquery%2Fausir-1127" title="Hemidemi"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/hemidemi.png" title="Hemidemi" alt="Hemidemi" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://tw.myweb2.search.yahoo.com/myresults/bookmarklet?u=http%3A%2F%2Fblog.corausir.org%2Fwebsite-design%2Fjquery%2Fausir-1127&ei=UTF-8&t=%5BJQuery%5D%E4%B9%9D%E5%AE%AE%E6%A0%BC%E5%9C%96%E7%89%87%E5%B1%95%E7%A4%BA%E6%95%88%E6%9E%9C%20fade%20callfunction" title="YahooKimo"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/yahookimo.gif" title="YahooKimo" alt="YahooKimo" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=http%3A%2F%2Fblog.corausir.org%2Fwebsite-design%2Fjquery%2Fausir-1127&amp;title=%5BJQuery%5D%E4%B9%9D%E5%AE%AE%E6%A0%BC%E5%9C%96%E7%89%87%E5%B1%95%E7%A4%BA%E6%95%88%E6%9E%9C%20fade%20callfunction" title="Google"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/googlebookmark.png" title="Google" alt="Google" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://bookmark.udn.com/add?f_%5BJQuery%5D%E4%B9%9D%E5%AE%AE%E6%A0%BC%E5%9C%96%E7%89%87%E5%B1%95%E7%A4%BA%E6%95%88%E6%9E%9C%20fade%20callfunction=%5BJQuery%5D%E4%B9%9D%E5%AE%AE%E6%A0%BC%E5%9C%96%E7%89%87%E5%B1%95%E7%A4%BA%E6%95%88%E6%9E%9C%20fade%20callfunction&f_URL=http%3A%2F%2Fblog.corausir.org%2Fwebsite-design%2Fjquery%2Fausir-1127" title="udn"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/udn.gif" title="udn" alt="udn" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.haohaoreport.com/submit.php?url=http%3A%2F%2Fblog.corausir.org%2Fwebsite-design%2Fjquery%2Fausir-1127&amp;title=%5BJQuery%5D%E4%B9%9D%E5%AE%AE%E6%A0%BC%E5%9C%96%E7%89%87%E5%B1%95%E7%A4%BA%E6%95%88%E6%9E%9C%20fade%20callfunction" title="Haohao"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/haohao.png" title="Haohao" alt="Haohao" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="https://favorites.live.com/quickadd.aspx?marklet=1&amp;url=http%3A%2F%2Fblog.corausir.org%2Fwebsite-design%2Fjquery%2Fausir-1127&amp;title=%5BJQuery%5D%E4%B9%9D%E5%AE%AE%E6%A0%BC%E5%9C%96%E7%89%87%E5%B1%95%E7%A4%BA%E6%95%88%E6%9E%9C%20fade%20callfunction" title="Live"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/live.png" title="Live" alt="Live" class="sociable-hovers" /></a>


<br/><br/>

<p>No related posts.</p>
<p>Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.</p>]]></content:encoded>
			<wfw:commentRss>http://blog.corausir.org/website-design/jquery/ausir-1127/feed</wfw:commentRss>
		</item>
		<item>
		<title>心花怒放肉花朵朵開之&#8211;羊角日式燒肉&#8211;網站設計</title>
		<link>http://blog.corausir.org/graphic-design/website/dog-1124</link>
		<comments>http://blog.corausir.org/graphic-design/website/dog-1124#comments</comments>
		<pubDate>Fri, 29 Jan 2010 10:04:21 +0000</pubDate>
		<dc:creator>dog</dc:creator>
		
		<category><![CDATA[網站製作]]></category>

		<category><![CDATA[羊角日式燒肉.羊角.燒肉.日式.網頁設計.肉花.台中市公益路二段.]]></category>

		<guid isPermaLink="false">http://blog.corausir.org/graphic-design/website/dog-1124</guid>
		<description><![CDATA[好肉有三肉，肉質肉亮肉多片。所以這個網站要有呈現好肉好吃的視覺導向，讓大家知道燒肉是很美好地。
 
 
首先這是日式燒肉網站，所以主素材以仿木造建築的木片拼貼，當作網站基本底色。同時把色彩調成明亮的暖色系，才能刺激食慾。再來就是主視覺，靈感來自從前看過的廣告。這個平面廣告把肉片拍得很唯美，一點都不血腥。
 
 所以我以這個方向設計，把肉片拼花同時微調色彩。讓生肉拼花的感覺唯美不油膩血腥。剩下的細節以清爽明亮為主，所以以白色80%透明白色色塊襯底。就好像占板上的薄肉，與背景維持著些許的互動。不過我網站LOGO   原本是想用黑色跟整體比較搭，但是業主怕有辨識上問題，所以還是堅持用原標準色。真是給他可惜了。
接下來就是請網頁師不鳥町的專業解說囉。
 
 

這個地圖我用現有素材再重新改過，照著網路上的
照片畫盡量畫的一樣。有多花比較久的時間做。 
&#160; 
不鳥町 
整個版，遇到最大的問題就是，設計師會放大好幾倍去做。然後需要再重新調整大小處理。   還好這個版型並沒有太複雜，不然，小白的設計應該會被我退件。XD    JOOMLA的系統碰到的問題就是，若遇到有導入頁的話，需要在伺服器的底下加入一個.htaccess檔案，將網站指定成index.html(.htm)，才能夠將導入頁指定為首頁。    但是，這個部份還會遇到一個問題，就是按鈕的部份，因為系統會指定index.php為首頁，而不是index.html，所以，變成按鈕的部份，需要用模組的方式去製作，因為羊角的網站是固定的，並不會再新增選單，所以問題比較容易解決。    這是我在製作joomla系統的時候，所碰到的問題。



 :: 把這篇好文推到書籤網站與更多人分享吧 :: 


	
	
	
	
	
	
	




No related posts.
Related posts brought to you by Yet Another Related Posts Plugin.


No related posts.

Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.]]></description>
			<content:encoded><![CDATA[<p>好肉有三肉，肉質肉亮肉多片。所以這個網站要有呈現好肉好吃的視覺導向，讓大家知道燒肉是很美好地。</p>
<p><a href="http://files.corausir.org/images/3706c442e266_FDDA/CONVER01_3.jpg" rel="shadowbox[post-1124];player=img;"><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" border="0" alt="CONVER-01" src="http://files.corausir.org/images/3706c442e266_FDDA/CONVER01_thumb_3.jpg" width="282" height="174" /></a> </p>
<p> <span id="more-1124"></span>
<p>首先這是日式燒肉網站，所以主素材以仿木造建築的木片拼貼，當作網站基本底色。同時把色彩調成明亮的暖色系，才能刺激食慾。再來就是主視覺，靈感來自從前看過的廣告。這個平面廣告把肉片拍得很唯美，一點都不血腥。</p>
<p> <a href="http://files.corausir.org/images/3706c442e266_FDDA/02_3.jpg" rel="shadowbox[post-1124];player=img;"><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" border="0" alt="02" src="http://files.corausir.org/images/3706c442e266_FDDA/02_thumb_3.jpg" width="282" height="178" /></a></p>
<p> 所以我以這個方向設計，把肉片拼花同時微調色彩。讓生肉拼花的感覺唯美不油膩血腥。剩下的細節以清爽明亮為主，所以以白色80%透明白色色塊襯底。就好像占板上的薄肉，與背景維持著些許的互動。不過我網站LOGO   <br />原本是想用黑色跟整體比較搭，但是業主怕有辨識上問題，所以還是堅持用原標準色。真是給他可惜了。</p>
<p>接下來就是請網頁師不鳥町的專業解說囉。</p>
<p><a href="http://files.corausir.org/images/3706c442e266_FDDA/03_3.jpg" rel="shadowbox[post-1124];player=img;"><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" border="0" alt="03" src="http://files.corausir.org/images/3706c442e266_FDDA/03_thumb_3.jpg" width="282" height="217" /></a> </p>
<p><a href="http://files.corausir.org/images/3706c442e266_FDDA/04_3.jpg" rel="shadowbox[post-1124];player=img;"><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" border="0" alt="04" src="http://files.corausir.org/images/3706c442e266_FDDA/04_thumb_3.jpg" width="282" height="247" /></a> </p>
</p>
<p align="center">這個地圖我用現有素材再重新改過，照著網路上的</p>
<p align="center">照片畫盡量畫的一樣。有多花比較久的時間做。 </p>
<p><a href="http://files.corausir.org/images/3706c442e266_FDDA/05_3.jpg" rel="shadowbox[post-1124];player=img;"><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" border="0" alt="05" src="http://files.corausir.org/images/3706c442e266_FDDA/05_thumb_3.jpg" width="282" height="181" /></a>&#160; </p>
<p>不鳥町 </p>
<p>整個版，遇到最大的問題就是，設計師會放大好幾倍去做。然後需要再重新調整大小處理。   <br />還好這個版型並沒有太複雜，不然，小白的設計應該會被我退件。XD    <br />JOOMLA的系統碰到的問題就是，若遇到有導入頁的話，需要在伺服器的底下加入一個.htaccess檔案，將網站指定成index.html(.htm)，才能夠將導入頁指定為首頁。    <br />但是，這個部份還會遇到一個問題，就是按鈕的部份，因為系統會指定index.php為首頁，而不是index.html，所以，變成按鈕的部份，需要用模組的方式去製作，因為羊角的網站是固定的，並不會再新增選單，所以問題比較容易解決。    <br />這是我在製作joomla系統的時候，所碰到的問題。</p>



 :: 把這篇好文推到書籤網站與更多人分享吧 :: 


	<a rel="nofollow" target="_blank" href="http://funp.com/push/submit/add.php?url=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fwebsite%2Fdog-1124&s=%E5%BF%83%E8%8A%B1%E6%80%92%E6%94%BE%E8%82%89%E8%8A%B1%E6%9C%B5%E6%9C%B5%E9%96%8B%E4%B9%8B--%E7%BE%8A%E8%A7%92%E6%97%A5%E5%BC%8F%E7%87%92%E8%82%89--%E7%B6%B2%E7%AB%99%E8%A8%AD%E8%A8%88&&via=tools" title="funp"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/funp.gif" title="funp" alt="funp" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.hemidemi.com/user_bookmark/new?title=%E5%BF%83%E8%8A%B1%E6%80%92%E6%94%BE%E8%82%89%E8%8A%B1%E6%9C%B5%E6%9C%B5%E9%96%8B%E4%B9%8B--%E7%BE%8A%E8%A7%92%E6%97%A5%E5%BC%8F%E7%87%92%E8%82%89--%E7%B6%B2%E7%AB%99%E8%A8%AD%E8%A8%88&amp;url=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fwebsite%2Fdog-1124" title="Hemidemi"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/hemidemi.png" title="Hemidemi" alt="Hemidemi" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://tw.myweb2.search.yahoo.com/myresults/bookmarklet?u=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fwebsite%2Fdog-1124&ei=UTF-8&t=%E5%BF%83%E8%8A%B1%E6%80%92%E6%94%BE%E8%82%89%E8%8A%B1%E6%9C%B5%E6%9C%B5%E9%96%8B%E4%B9%8B--%E7%BE%8A%E8%A7%92%E6%97%A5%E5%BC%8F%E7%87%92%E8%82%89--%E7%B6%B2%E7%AB%99%E8%A8%AD%E8%A8%88" title="YahooKimo"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/yahookimo.gif" title="YahooKimo" alt="YahooKimo" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fwebsite%2Fdog-1124&amp;title=%E5%BF%83%E8%8A%B1%E6%80%92%E6%94%BE%E8%82%89%E8%8A%B1%E6%9C%B5%E6%9C%B5%E9%96%8B%E4%B9%8B--%E7%BE%8A%E8%A7%92%E6%97%A5%E5%BC%8F%E7%87%92%E8%82%89--%E7%B6%B2%E7%AB%99%E8%A8%AD%E8%A8%88" title="Google"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/googlebookmark.png" title="Google" alt="Google" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://bookmark.udn.com/add?f_%E5%BF%83%E8%8A%B1%E6%80%92%E6%94%BE%E8%82%89%E8%8A%B1%E6%9C%B5%E6%9C%B5%E9%96%8B%E4%B9%8B--%E7%BE%8A%E8%A7%92%E6%97%A5%E5%BC%8F%E7%87%92%E8%82%89--%E7%B6%B2%E7%AB%99%E8%A8%AD%E8%A8%88=%E5%BF%83%E8%8A%B1%E6%80%92%E6%94%BE%E8%82%89%E8%8A%B1%E6%9C%B5%E6%9C%B5%E9%96%8B%E4%B9%8B--%E7%BE%8A%E8%A7%92%E6%97%A5%E5%BC%8F%E7%87%92%E8%82%89--%E7%B6%B2%E7%AB%99%E8%A8%AD%E8%A8%88&f_URL=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fwebsite%2Fdog-1124" title="udn"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/udn.gif" title="udn" alt="udn" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.haohaoreport.com/submit.php?url=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fwebsite%2Fdog-1124&amp;title=%E5%BF%83%E8%8A%B1%E6%80%92%E6%94%BE%E8%82%89%E8%8A%B1%E6%9C%B5%E6%9C%B5%E9%96%8B%E4%B9%8B--%E7%BE%8A%E8%A7%92%E6%97%A5%E5%BC%8F%E7%87%92%E8%82%89--%E7%B6%B2%E7%AB%99%E8%A8%AD%E8%A8%88" title="Haohao"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/haohao.png" title="Haohao" alt="Haohao" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="https://favorites.live.com/quickadd.aspx?marklet=1&amp;url=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fwebsite%2Fdog-1124&amp;title=%E5%BF%83%E8%8A%B1%E6%80%92%E6%94%BE%E8%82%89%E8%8A%B1%E6%9C%B5%E6%9C%B5%E9%96%8B%E4%B9%8B--%E7%BE%8A%E8%A7%92%E6%97%A5%E5%BC%8F%E7%87%92%E8%82%89--%E7%B6%B2%E7%AB%99%E8%A8%AD%E8%A8%88" title="Live"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/live.png" title="Live" alt="Live" class="sociable-hovers" /></a>


<br/><br/>

<p>No related posts.</p>
<p>Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.</p>]]></content:encoded>
			<wfw:commentRss>http://blog.corausir.org/graphic-design/website/dog-1124/feed</wfw:commentRss>
		</item>
		<item>
		<title>過敏的孩子們看過來囉&#8230;..宏醫生技銀行-健康購物網設計</title>
		<link>http://blog.corausir.org/graphic-design/cora-1123</link>
		<comments>http://blog.corausir.org/graphic-design/cora-1123#comments</comments>
		<pubDate>Wed, 13 Jan 2010 03:10:19 +0000</pubDate>
		<dc:creator>Cora</dc:creator>
		
		<category><![CDATA[平面設計]]></category>

		<category><![CDATA[網站製作]]></category>

		<category><![CDATA[抗敏]]></category>

		<category><![CDATA[益生菌]]></category>

		<category><![CDATA[網頁設計]]></category>

		<category><![CDATA[購物網]]></category>

		<category><![CDATA[購物車宏醫生技銀行]]></category>

		<category><![CDATA[過敏]]></category>

		<category><![CDATA[酵素激酶]]></category>

		<guid isPermaLink="false">http://blog.corausir.org/graphic-design/cora-1123</guid>
		<description><![CDATA[不是說今年冬天暖冬嗎?怎麼冷氣團、寒流一直猛來，尤其又夾帶下雨真是冷的要命，天氣變化這麼大，過敏的人可就要瘋掉了，不是猛打噴嚏就是皮膚癢到不行……
&#160;

&#160;
 
&#160;
台灣的過敏人口越來越多，所以再生物科技這塊在台灣也越來越熱門，這次客戶宏醫國際集團成立於1993年，至今已超過16年，致力於專研健康醫學生物科技領域，提升免疫相關醫學、抗病毒醫學、抗過敏預防醫學、抗敏防蟎寢具、生醫美容保養、降低控制環境病毒感染醫學…等
這次執行的是宏醫生技銀行-健康購物網的網頁設計，當初提案有分為兩個方向，專業穩重與清新舒適這兩個方向，客戶選擇的是目前所PO上來的清新舒適這款，這網站還包含了購物車功能，所以結合了另外兩位人士的力量才能完成，因為是購物網的關係除了在視覺美感之外在功能上的考量就格外重要，不僅要讓消費者使用清楚簡單，也需要在後台的部分讓客戶以後可以自行更新產品與資訊，所以這都仰賴不鳥町(網頁設計師)的功力囉！
整個網站的製作比起平面的設計物，更需要與客戶更詳細的溝通與討論，在資料的取得也更需要較長的時間，這網站算是corAusir功能比較多的成品。以下就是請網頁師不鳥町的專業解說囉。
&#160;
&#160;

&#160;
&#160;

&#160;
&#160;

&#160;&#160; 
不鳥町:
宏醫是我第一個使用CSS+JOOMLA平台切版的專案。   因為是第一次接觸的關係，花了好大的力氣調整，但也帶給我很多的經驗，對CSS有更深層的體會。    特別需要注意的地方是，它的背景是呈不規則型的，又加上廣告區的背景與BANNER是連接在一起的，就必須要在CSS的layout下z-index，而且還要搭配不同瀏覽器的間距以及位置，尤其是碰IE6、IE7、IE8、Firefox、Google Chrome的時候，還要分別下不同的指令。    因為我自己也是剛接觸CSS沒有多久，而宏醫這個專案，也幾乎等於完全客製化的專案，每一個內容都有它自己專屬的背景，寫CSS的網站，所需要花的精神、時間，通常是一般HTML(表格製作的網頁)的二倍。    邏輯不僅要清楚，CSS的指令名稱就算記不起來，也要知道它的功用，否則會因為瀏覽器的不同，而影響到版面的配置，以及背景、文字位子，就會看到版型裡的內容飛來飛去，或是消失在某個角落。    還有最重要最重要的，就是PNG在IE6底下的問題囉！一般都會用pngfix，或將javascript語法寫進CSS，在宏醫的例子裡，我將這二種語法都加入，一種是針對背景，一種是針對有連結的圖片，如果單純只用pngfix，會遇到連結因為blank.gif的關係，而蓋在有連結的圖片上面，導致連結失去作用，所以，解決辦法，就是將pngfix針對背景做png透明化處理，然後再用javascript語法解決有連結的圖片，就可以解決這個問題了。(這是在找了很多種pngfix，都試過之後，才決定使用這個方式。
&#160;

宏醫生技銀行-健康購物網



 :: 把這篇好文推到書籤網站與更多人分享吧 :: 


	
	
	
	
	
	
	




No related posts.
Related posts brought to you by Yet Another Related Posts Plugin.


No related posts.

Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.]]></description>
			<content:encoded><![CDATA[<p>不是說今年冬天暖冬嗎?怎麼冷氣團、寒流一直猛來，尤其又夾帶下雨真是冷的要命，天氣變化這麼大，過敏的人可就要瘋掉了，不是猛打噴嚏就是皮膚癢到不行……</p>
<p>&#160;</p>
<p><a href="http://files.corausir.org/images/867874e832af_96E5/20100113_100342.jpg" rel="shadowbox[post-1123];player=img;"><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="2010-01-13_100342" border="0" alt="2010-01-13_100342" src="http://files.corausir.org/images/867874e832af_96E5/20100113_100342_thumb.jpg" width="304" height="435" /></a></p>
<p>&#160;</p>
<p> <span id="more-1123"></span>
<p>&#160;</p>
<p>台灣的過敏人口越來越多，所以再生物科技這塊在台灣也越來越熱門，這次客戶宏醫國際集團成立於1993年，至今已超過16年，致力於專研健康醫學生物科技領域，提升免疫相關醫學、抗病毒醫學、抗過敏預防醫學、抗敏防蟎寢具、生醫美容保養、降低控制環境病毒感染醫學…等</p>
<p>這次執行的是<a href="http://www.biobank.tw/">宏醫生技銀行-健康購物網</a>的網頁設計，當初提案有分為兩個方向，專業穩重與清新舒適這兩個方向，客戶選擇的是目前所PO上來的清新舒適這款，這網站還包含了購物車功能，所以結合了另外兩位人士的力量才能完成，因為是購物網的關係除了在視覺美感之外在功能上的考量就格外重要，不僅要讓消費者使用清楚簡單，也需要在後台的部分讓客戶以後可以自行更新產品與資訊，所以這都仰賴不鳥町(網頁設計師)的功力囉！</p>
<p>整個網站的製作比起平面的設計物，更需要與客戶更詳細的溝通與討論，在資料的取得也更需要較長的時間，這網站算是<a href="http://blog.corausir.org/about">corAusir</a>功能比較多的成品。以下就是請網頁師不鳥町的專業解說囉。</p>
<p>&#160;</p>
<p>&#160;</p>
<p><a href="http://files.corausir.org/images/867874e832af_96E5/20100113_100544.jpg" rel="shadowbox[post-1123];player=img;"><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="2010-01-13_100544" border="0" alt="2010-01-13_100544" src="http://files.corausir.org/images/867874e832af_96E5/20100113_100544_thumb.jpg" width="304" height="270" /></a></p>
<p>&#160;</p>
<p>&#160;</p>
<p><a href="http://files.corausir.org/images/867874e832af_96E5/20100113_101159.jpg" rel="shadowbox[post-1123];player=img;"><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="2010-01-13_101159" border="0" alt="2010-01-13_101159" src="http://files.corausir.org/images/867874e832af_96E5/20100113_101159_thumb.jpg" width="304" height="316" /></a></p>
<p>&#160;</p>
<p>&#160;</p>
<p><a href="http://files.corausir.org/images/867874e832af_96E5/20100113_100358.jpg" rel="shadowbox[post-1123];player=img;"><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="2010-01-13_100358" border="0" alt="2010-01-13_100358" src="http://files.corausir.org/images/867874e832af_96E5/20100113_100358_thumb.jpg" width="304" height="472" /></a></p>
<p>&#160;&#160; </p>
<p>不鳥町:</p>
<p>宏醫是我第一個使用CSS+JOOMLA平台切版的專案。   <br />因為是第一次接觸的關係，花了好大的力氣調整，但也帶給我很多的經驗，對CSS有更深層的體會。    <br />特別需要注意的地方是，它的背景是呈不規則型的，又加上廣告區的背景與BANNER是連接在一起的，就必須要在CSS的layout下z-index，而且還要搭配不同瀏覽器的間距以及位置，尤其是碰IE6、IE7、IE8、Firefox、Google Chrome的時候，還要分別下不同的指令。    <br />因為我自己也是剛接觸CSS沒有多久，而宏醫這個專案，也幾乎等於完全客製化的專案，每一個內容都有它自己專屬的背景，寫CSS的網站，所需要花的精神、時間，通常是一般HTML(表格製作的網頁)的二倍。    <br />邏輯不僅要清楚，CSS的指令名稱就算記不起來，也要知道它的功用，否則會因為瀏覽器的不同，而影響到版面的配置，以及背景、文字位子，就會看到版型裡的內容飛來飛去，或是消失在某個角落。    <br />還有最重要最重要的，就是PNG在IE6底下的問題囉！一般都會用pngfix，或將javascript語法寫進CSS，在宏醫的例子裡，我將這二種語法都加入，一種是針對背景，一種是針對有連結的圖片，如果單純只用pngfix，會遇到連結因為blank.gif的關係，而蓋在有連結的圖片上面，導致連結失去作用，所以，解決辦法，就是將pngfix針對背景做png透明化處理，然後再用javascript語法解決有連結的圖片，就可以解決這個問題了。(這是在找了很多種pngfix，都試過之後，才決定使用這個方式。</p>
<p>&#160;</p>
</p>
<p><a href="http://www.biobank.tw/">宏醫生技銀行-健康購物網</a></p>



 :: 把這篇好文推到書籤網站與更多人分享吧 :: 


	<a rel="nofollow" target="_blank" href="http://funp.com/push/submit/add.php?url=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fcora-1123&s=%E9%81%8E%E6%95%8F%E7%9A%84%E5%AD%A9%E5%AD%90%E5%80%91%E7%9C%8B%E9%81%8E%E4%BE%86%E5%9B%89%26hellip%3B..%E5%AE%8F%E9%86%AB%E7%94%9F%E6%8A%80%E9%8A%80%E8%A1%8C-%E5%81%A5%E5%BA%B7%E8%B3%BC%E7%89%A9%E7%B6%B2%E8%A8%AD%E8%A8%88&&via=tools" title="funp"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/funp.gif" title="funp" alt="funp" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.hemidemi.com/user_bookmark/new?title=%E9%81%8E%E6%95%8F%E7%9A%84%E5%AD%A9%E5%AD%90%E5%80%91%E7%9C%8B%E9%81%8E%E4%BE%86%E5%9B%89%26hellip%3B..%E5%AE%8F%E9%86%AB%E7%94%9F%E6%8A%80%E9%8A%80%E8%A1%8C-%E5%81%A5%E5%BA%B7%E8%B3%BC%E7%89%A9%E7%B6%B2%E8%A8%AD%E8%A8%88&amp;url=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fcora-1123" title="Hemidemi"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/hemidemi.png" title="Hemidemi" alt="Hemidemi" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://tw.myweb2.search.yahoo.com/myresults/bookmarklet?u=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fcora-1123&ei=UTF-8&t=%E9%81%8E%E6%95%8F%E7%9A%84%E5%AD%A9%E5%AD%90%E5%80%91%E7%9C%8B%E9%81%8E%E4%BE%86%E5%9B%89%26hellip%3B..%E5%AE%8F%E9%86%AB%E7%94%9F%E6%8A%80%E9%8A%80%E8%A1%8C-%E5%81%A5%E5%BA%B7%E8%B3%BC%E7%89%A9%E7%B6%B2%E8%A8%AD%E8%A8%88" title="YahooKimo"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/yahookimo.gif" title="YahooKimo" alt="YahooKimo" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fcora-1123&amp;title=%E9%81%8E%E6%95%8F%E7%9A%84%E5%AD%A9%E5%AD%90%E5%80%91%E7%9C%8B%E9%81%8E%E4%BE%86%E5%9B%89%26hellip%3B..%E5%AE%8F%E9%86%AB%E7%94%9F%E6%8A%80%E9%8A%80%E8%A1%8C-%E5%81%A5%E5%BA%B7%E8%B3%BC%E7%89%A9%E7%B6%B2%E8%A8%AD%E8%A8%88" title="Google"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/googlebookmark.png" title="Google" alt="Google" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://bookmark.udn.com/add?f_%E9%81%8E%E6%95%8F%E7%9A%84%E5%AD%A9%E5%AD%90%E5%80%91%E7%9C%8B%E9%81%8E%E4%BE%86%E5%9B%89%26hellip%3B..%E5%AE%8F%E9%86%AB%E7%94%9F%E6%8A%80%E9%8A%80%E8%A1%8C-%E5%81%A5%E5%BA%B7%E8%B3%BC%E7%89%A9%E7%B6%B2%E8%A8%AD%E8%A8%88=%E9%81%8E%E6%95%8F%E7%9A%84%E5%AD%A9%E5%AD%90%E5%80%91%E7%9C%8B%E9%81%8E%E4%BE%86%E5%9B%89%26hellip%3B..%E5%AE%8F%E9%86%AB%E7%94%9F%E6%8A%80%E9%8A%80%E8%A1%8C-%E5%81%A5%E5%BA%B7%E8%B3%BC%E7%89%A9%E7%B6%B2%E8%A8%AD%E8%A8%88&f_URL=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fcora-1123" title="udn"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/udn.gif" title="udn" alt="udn" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.haohaoreport.com/submit.php?url=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fcora-1123&amp;title=%E9%81%8E%E6%95%8F%E7%9A%84%E5%AD%A9%E5%AD%90%E5%80%91%E7%9C%8B%E9%81%8E%E4%BE%86%E5%9B%89%26hellip%3B..%E5%AE%8F%E9%86%AB%E7%94%9F%E6%8A%80%E9%8A%80%E8%A1%8C-%E5%81%A5%E5%BA%B7%E8%B3%BC%E7%89%A9%E7%B6%B2%E8%A8%AD%E8%A8%88" title="Haohao"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/haohao.png" title="Haohao" alt="Haohao" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="https://favorites.live.com/quickadd.aspx?marklet=1&amp;url=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fcora-1123&amp;title=%E9%81%8E%E6%95%8F%E7%9A%84%E5%AD%A9%E5%AD%90%E5%80%91%E7%9C%8B%E9%81%8E%E4%BE%86%E5%9B%89%26hellip%3B..%E5%AE%8F%E9%86%AB%E7%94%9F%E6%8A%80%E9%8A%80%E8%A1%8C-%E5%81%A5%E5%BA%B7%E8%B3%BC%E7%89%A9%E7%B6%B2%E8%A8%AD%E8%A8%88" title="Live"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/live.png" title="Live" alt="Live" class="sociable-hovers" /></a>


<br/><br/>

<p>No related posts.</p>
<p>Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.</p>]]></content:encoded>
			<wfw:commentRss>http://blog.corausir.org/graphic-design/cora-1123/feed</wfw:commentRss>
		</item>
		<item>
		<title>男人都愛大，女人都愛細之纖體凝露包裝設計</title>
		<link>http://blog.corausir.org/graphic-design/dog-1121</link>
		<comments>http://blog.corausir.org/graphic-design/dog-1121#comments</comments>
		<pubDate>Mon, 28 Dec 2009 09:46:47 +0000</pubDate>
		<dc:creator>dog</dc:creator>
		
		<category><![CDATA[包裝設計]]></category>

		<category><![CDATA[平面設計]]></category>

		<category><![CDATA[按摩霜]]></category>

		<category><![CDATA[溫馨之都]]></category>

		<category><![CDATA[瘦身霜]]></category>

		<category><![CDATA[纖體凝露]]></category>

		<guid isPermaLink="false">http://blog.corausir.org/graphic-design/dog-1121</guid>
		<description><![CDATA[ 大家好第一次在這發表文章，請多多指教。
身為雄性的我雖然用不到這玩意兒，但是為了世界和平我還是要設計的漂漂亮亮。畢竟包裝美人也跟著美，人美地球也跟著美，世界就和平啦。蠢話不多說這款包裝我當初是想做的纖細朦朧得感覺，所以我本來打算用半透明材質壓花紋就可以像是一副古典花紋窗框一般，隔著窗看著朦朧的產品。想想多夢幻阿可惜幻滅是成長得開始，因為成本的考量下決定只延用部分設計 。
&#160;
 

原本想要的效果
所以原本的古典花紋框保留色彩用印刷金，在加上用珍珠紙當底材。整體效果也是有閃亮亮又不會太跳的復古感。當然主標是很重要的，所以我做了打凸又燙金的綜合效果。看起來就是閃亮亮的字圍了一層立體的框，在材質跟立體感上盡量的凸顯主題。 

 
包裝盒上蓋:
&#160;

內容產品:

產品本身是綠油油的軟管，所以基本上文字色彩比它重或比它白只要不被底色吃掉都可以。所以我延續外盒風格花紋直接印刷在軟管上就OK拉。
&#160;
*客戶網站:溫馨之都國際有限公司



 :: 把這篇好文推到書籤網站與更多人分享吧 :: 


	
	
	
	
	
	
	




No related posts.
Related posts brought to you by Yet Another Related Posts Plugin.


No related posts.

Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.]]></description>
			<content:encoded><![CDATA[<p> 大家好第一次在這發表文章，請多多指教。</p>
<p>身為雄性的我雖然用不到這玩意兒，但是為了世界和平我還是要設計的漂漂亮亮。畢竟包裝美人也跟著美，人美地球也跟著美，世界就和平啦。蠢話不多說這款包裝我當初是想做的纖細朦朧得感覺，所以我本來打算用半透明材質壓花紋就可以像是一副古典花紋窗框一般，隔著窗看著朦朧的產品。想想多夢幻阿可惜幻滅是成長得開始，因為成本的考量下決定只延用部分設計 。</p>
<p>&#160;<a href="http://files.corausir.org/images/601933b6e159_F9E1/PC282300.jpg" rel="shadowbox[post-1121];player=img;"><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" border="0" alt="OLYMPUS DIGITAL CAMERA         " src="http://files.corausir.org/images/601933b6e159_F9E1/PC282300_thumb.jpg" width="400" height="191" /></a></p>
<p> <span id="more-1121"></span>
<p><a href="http://files.corausir.org/images/601933b6e159_F9E1/foot_cream.jpg" rel="shadowbox[post-1121];player=img;"><font color="#555555"></font><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" border="0" alt="foot_cream" src="http://files.corausir.org/images/601933b6e159_F9E1/foot_cream_thumb.jpg" width="166" height="208" /></a></p>
<p align="center"><font color="#717171">原本想要的效果</font></p>
<p>所以原本的古典花紋框保留色彩用印刷金，在加上用珍珠紙當底材。整體效果也是有閃亮亮又不會太跳的復古感。當然主標是很重要的，所以我做了打凸又燙金的綜合效果。看起來就是閃亮亮的字圍了一層立體的框，在材質跟立體感上盡量的凸顯主題。 </p>
</p>
<p> <a href="http://files.corausir.org/images/601933b6e159_F9E1/PC282275.jpg" rel="shadowbox[post-1121];player=img;"><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" border="0" alt="OLYMPUS DIGITAL CAMERA         " src="http://files.corausir.org/images/601933b6e159_F9E1/PC282275_thumb.jpg" width="180" height="240" /></a>
<p>包裝盒上蓋:</p>
<p><a href="http://files.corausir.org/images/601933b6e159_F9E1/PC2823072.jpg" rel="shadowbox[post-1121];player=img;"><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" border="0" alt="OLYMPUS DIGITAL CAMERA         " src="http://files.corausir.org/images/601933b6e159_F9E1/PC2823072_thumb.jpg" width="180" height="240" /></a>&#160;</p>
</p>
<p>內容產品:</p>
<p><a href="http://files.corausir.org/images/601933b6e159_F9E1/zhu_1280_003.jpg" rel="shadowbox[post-1121];player=img;"><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" border="0" alt="zhu_1280_003" src="http://files.corausir.org/images/601933b6e159_F9E1/zhu_1280_003_thumb.jpg" width="187" height="240" /></a></p>
<p>產品本身是綠油油的軟管，所以基本上文字色彩比它重或比它白只要不被底色吃掉都可以。所以我延續外盒風格花紋直接印刷在軟管上就OK拉。</p>
<p>&#160;</p>
<p>*客戶網站:<a href="http://www.jenova.com.tw/">溫馨之都國際有限公司</a></p>



 :: 把這篇好文推到書籤網站與更多人分享吧 :: 


	<a rel="nofollow" target="_blank" href="http://funp.com/push/submit/add.php?url=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fdog-1121&s=%E7%94%B7%E4%BA%BA%E9%83%BD%E6%84%9B%E5%A4%A7%EF%BC%8C%E5%A5%B3%E4%BA%BA%E9%83%BD%E6%84%9B%E7%B4%B0%E4%B9%8B%E7%BA%96%E9%AB%94%E5%87%9D%E9%9C%B2%E5%8C%85%E8%A3%9D%E8%A8%AD%E8%A8%88&&via=tools" title="funp"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/funp.gif" title="funp" alt="funp" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.hemidemi.com/user_bookmark/new?title=%E7%94%B7%E4%BA%BA%E9%83%BD%E6%84%9B%E5%A4%A7%EF%BC%8C%E5%A5%B3%E4%BA%BA%E9%83%BD%E6%84%9B%E7%B4%B0%E4%B9%8B%E7%BA%96%E9%AB%94%E5%87%9D%E9%9C%B2%E5%8C%85%E8%A3%9D%E8%A8%AD%E8%A8%88&amp;url=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fdog-1121" title="Hemidemi"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/hemidemi.png" title="Hemidemi" alt="Hemidemi" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://tw.myweb2.search.yahoo.com/myresults/bookmarklet?u=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fdog-1121&ei=UTF-8&t=%E7%94%B7%E4%BA%BA%E9%83%BD%E6%84%9B%E5%A4%A7%EF%BC%8C%E5%A5%B3%E4%BA%BA%E9%83%BD%E6%84%9B%E7%B4%B0%E4%B9%8B%E7%BA%96%E9%AB%94%E5%87%9D%E9%9C%B2%E5%8C%85%E8%A3%9D%E8%A8%AD%E8%A8%88" title="YahooKimo"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/yahookimo.gif" title="YahooKimo" alt="YahooKimo" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fdog-1121&amp;title=%E7%94%B7%E4%BA%BA%E9%83%BD%E6%84%9B%E5%A4%A7%EF%BC%8C%E5%A5%B3%E4%BA%BA%E9%83%BD%E6%84%9B%E7%B4%B0%E4%B9%8B%E7%BA%96%E9%AB%94%E5%87%9D%E9%9C%B2%E5%8C%85%E8%A3%9D%E8%A8%AD%E8%A8%88" title="Google"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/googlebookmark.png" title="Google" alt="Google" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://bookmark.udn.com/add?f_%E7%94%B7%E4%BA%BA%E9%83%BD%E6%84%9B%E5%A4%A7%EF%BC%8C%E5%A5%B3%E4%BA%BA%E9%83%BD%E6%84%9B%E7%B4%B0%E4%B9%8B%E7%BA%96%E9%AB%94%E5%87%9D%E9%9C%B2%E5%8C%85%E8%A3%9D%E8%A8%AD%E8%A8%88=%E7%94%B7%E4%BA%BA%E9%83%BD%E6%84%9B%E5%A4%A7%EF%BC%8C%E5%A5%B3%E4%BA%BA%E9%83%BD%E6%84%9B%E7%B4%B0%E4%B9%8B%E7%BA%96%E9%AB%94%E5%87%9D%E9%9C%B2%E5%8C%85%E8%A3%9D%E8%A8%AD%E8%A8%88&f_URL=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fdog-1121" title="udn"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/udn.gif" title="udn" alt="udn" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.haohaoreport.com/submit.php?url=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fdog-1121&amp;title=%E7%94%B7%E4%BA%BA%E9%83%BD%E6%84%9B%E5%A4%A7%EF%BC%8C%E5%A5%B3%E4%BA%BA%E9%83%BD%E6%84%9B%E7%B4%B0%E4%B9%8B%E7%BA%96%E9%AB%94%E5%87%9D%E9%9C%B2%E5%8C%85%E8%A3%9D%E8%A8%AD%E8%A8%88" title="Haohao"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/haohao.png" title="Haohao" alt="Haohao" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="https://favorites.live.com/quickadd.aspx?marklet=1&amp;url=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fdog-1121&amp;title=%E7%94%B7%E4%BA%BA%E9%83%BD%E6%84%9B%E5%A4%A7%EF%BC%8C%E5%A5%B3%E4%BA%BA%E9%83%BD%E6%84%9B%E7%B4%B0%E4%B9%8B%E7%BA%96%E9%AB%94%E5%87%9D%E9%9C%B2%E5%8C%85%E8%A3%9D%E8%A8%AD%E8%A8%88" title="Live"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/live.png" title="Live" alt="Live" class="sociable-hovers" /></a>


<br/><br/>

<p>No related posts.</p>
<p>Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.</p>]]></content:encoded>
			<wfw:commentRss>http://blog.corausir.org/graphic-design/dog-1121/feed</wfw:commentRss>
		</item>
		<item>
		<title>蝴蝶飛飛飛&#8230;..全效修護精華霜系列海報設計</title>
		<link>http://blog.corausir.org/graphic-design/cora-1119</link>
		<comments>http://blog.corausir.org/graphic-design/cora-1119#comments</comments>
		<pubDate>Mon, 14 Dec 2009 02:37:25 +0000</pubDate>
		<dc:creator>Cora</dc:creator>
		
		<category><![CDATA[DM設計]]></category>

		<category><![CDATA[平面設計]]></category>

		<category><![CDATA[DaDona]]></category>

		<category><![CDATA[按摩霜]]></category>

		<category><![CDATA[海報設計]]></category>

		<category><![CDATA[溫馨之都國際有限公司]]></category>

		<category><![CDATA[蛻變]]></category>

		<category><![CDATA[蝴蝶]]></category>

		<guid isPermaLink="false">http://blog.corausir.org/graphic-design/cora-1119</guid>
		<description><![CDATA[這張海報是女人就要寵愛自己─全效修護精華霜系列包裝設計的延續設計款，主要會呈現在美妝店面喔。
 

&#160;
 
&#160;
這兩個按摩霜的功能其實滿多的，主要有修是曲線，增強肌膚活力，就像標題一樣美麗再生奇蹟，所以在設計的概念上我希望呈現的是女人像蛹一樣蛻變成蝴蝶，擁有美麗的曲線。
版面的文字設計上我想表現類似雜誌封面貫用的手法，主角押文，希望海報能夠呈現時尚感，稱加產品價值感。
&#160;
&#160;

&#160;
&#160;
&#160;
&#160;
這張是原圖，在AI繪製線條蝴蝶翅膀之後再進入PS修圖。
&#160; 
&#160;
最近PO文的文字越來越少了，我該好好檢討，不知道是不是過冬了，大腦也想休息冬眠，我的字彙少得可憐，生活上有時候還會健忘的可怕，還好在工作上，還保持正常。
*客戶網站:溫馨之都國際有限公司



 :: 把這篇好文推到書籤網站與更多人分享吧 :: 


	
	
	
	
	
	
	




No related posts.
Related posts brought to you by Yet Another Related Posts Plugin.


No related posts.

Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.]]></description>
			<content:encoded><![CDATA[<p>這張海報是<font color="#000000"><a href="http://blog.corausir.org/graphic-design/cora-1056">女人就要寵愛自己─全效修護精華霜系列包裝</a>設計的延續設計款，主要會呈現在美妝店面喔。</font></p>
<p><a href="http://files.corausir.org/images/053e7c5711be_9552/101_Light_Box.jpg" rel="shadowbox[post-1119];player=img;"><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="101_Light_Box" border="0" alt="101_Light_Box" src="http://files.corausir.org/images/053e7c5711be_9552/101_Light_Box_thumb.jpg" width="350" height="210" /></a> </p>
</p>
<p>&#160;</p>
<p> <span id="more-1119"></span>
<p>&#160;</p>
<p>這兩個按摩霜的功能其實滿多的，主要有修是曲線，增強肌膚活力，就像標題一樣美麗再生奇蹟，所以在設計的概念上我希望呈現的是女人像蛹一樣蛻變成蝴蝶，擁有美麗的曲線。</p>
<p>版面的文字設計上我想表現類似雜誌封面貫用的手法，主角押文，希望海報能夠呈現時尚感，稱加產品價值感。</p>
<p>&#160;</p>
<p>&#160;</p>
<p><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="海報對稿圖" border="0" alt="海報對稿圖" src="http://files.corausir.org/images/053e7c5711be_9552/_thumb.jpg" width="350" height="325" /></p>
<p>&#160;</p>
<p>&#160;</p>
<p>&#160;</p>
<p>&#160;</p>
<p>這張是原圖，在AI繪製線條蝴蝶翅膀之後再進入PS修圖。</p>
<p><a href="http://files.corausir.org/images/053e7c5711be_9552/iStock_000010976753XLarge.jpg" rel="shadowbox[post-1119];player=img;"><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="Nude elegant woman" border="0" alt="Nude elegant woman" src="http://files.corausir.org/images/053e7c5711be_9552/iStock_000010976753XLarge_thumb.jpg" width="350" height="350" /></a>&#160; </p>
<p>&#160;</p>
<p>最近PO文的文字越來越少了，我該好好檢討，不知道是不是過冬了，大腦也想休息冬眠，我的字彙少得可憐，生活上有時候還會健忘的可怕，還好在工作上，還保持正常。</p>
<p>*客戶網站:<a href="http://www.jenova.com.tw/">溫馨之都國際有限公司</a></p>



 :: 把這篇好文推到書籤網站與更多人分享吧 :: 


	<a rel="nofollow" target="_blank" href="http://funp.com/push/submit/add.php?url=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fcora-1119&s=%E8%9D%B4%E8%9D%B6%E9%A3%9B%E9%A3%9B%E9%A3%9B%26hellip%3B..%E5%85%A8%E6%95%88%E4%BF%AE%E8%AD%B7%E7%B2%BE%E8%8F%AF%E9%9C%9C%E7%B3%BB%E5%88%97%E6%B5%B7%E5%A0%B1%E8%A8%AD%E8%A8%88&&via=tools" title="funp"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/funp.gif" title="funp" alt="funp" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.hemidemi.com/user_bookmark/new?title=%E8%9D%B4%E8%9D%B6%E9%A3%9B%E9%A3%9B%E9%A3%9B%26hellip%3B..%E5%85%A8%E6%95%88%E4%BF%AE%E8%AD%B7%E7%B2%BE%E8%8F%AF%E9%9C%9C%E7%B3%BB%E5%88%97%E6%B5%B7%E5%A0%B1%E8%A8%AD%E8%A8%88&amp;url=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fcora-1119" title="Hemidemi"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/hemidemi.png" title="Hemidemi" alt="Hemidemi" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://tw.myweb2.search.yahoo.com/myresults/bookmarklet?u=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fcora-1119&ei=UTF-8&t=%E8%9D%B4%E8%9D%B6%E9%A3%9B%E9%A3%9B%E9%A3%9B%26hellip%3B..%E5%85%A8%E6%95%88%E4%BF%AE%E8%AD%B7%E7%B2%BE%E8%8F%AF%E9%9C%9C%E7%B3%BB%E5%88%97%E6%B5%B7%E5%A0%B1%E8%A8%AD%E8%A8%88" title="YahooKimo"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/yahookimo.gif" title="YahooKimo" alt="YahooKimo" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fcora-1119&amp;title=%E8%9D%B4%E8%9D%B6%E9%A3%9B%E9%A3%9B%E9%A3%9B%26hellip%3B..%E5%85%A8%E6%95%88%E4%BF%AE%E8%AD%B7%E7%B2%BE%E8%8F%AF%E9%9C%9C%E7%B3%BB%E5%88%97%E6%B5%B7%E5%A0%B1%E8%A8%AD%E8%A8%88" title="Google"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/googlebookmark.png" title="Google" alt="Google" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://bookmark.udn.com/add?f_%E8%9D%B4%E8%9D%B6%E9%A3%9B%E9%A3%9B%E9%A3%9B%26hellip%3B..%E5%85%A8%E6%95%88%E4%BF%AE%E8%AD%B7%E7%B2%BE%E8%8F%AF%E9%9C%9C%E7%B3%BB%E5%88%97%E6%B5%B7%E5%A0%B1%E8%A8%AD%E8%A8%88=%E8%9D%B4%E8%9D%B6%E9%A3%9B%E9%A3%9B%E9%A3%9B%26hellip%3B..%E5%85%A8%E6%95%88%E4%BF%AE%E8%AD%B7%E7%B2%BE%E8%8F%AF%E9%9C%9C%E7%B3%BB%E5%88%97%E6%B5%B7%E5%A0%B1%E8%A8%AD%E8%A8%88&f_URL=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fcora-1119" title="udn"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/udn.gif" title="udn" alt="udn" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.haohaoreport.com/submit.php?url=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fcora-1119&amp;title=%E8%9D%B4%E8%9D%B6%E9%A3%9B%E9%A3%9B%E9%A3%9B%26hellip%3B..%E5%85%A8%E6%95%88%E4%BF%AE%E8%AD%B7%E7%B2%BE%E8%8F%AF%E9%9C%9C%E7%B3%BB%E5%88%97%E6%B5%B7%E5%A0%B1%E8%A8%AD%E8%A8%88" title="Haohao"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/haohao.png" title="Haohao" alt="Haohao" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="https://favorites.live.com/quickadd.aspx?marklet=1&amp;url=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fcora-1119&amp;title=%E8%9D%B4%E8%9D%B6%E9%A3%9B%E9%A3%9B%E9%A3%9B%26hellip%3B..%E5%85%A8%E6%95%88%E4%BF%AE%E8%AD%B7%E7%B2%BE%E8%8F%AF%E9%9C%9C%E7%B3%BB%E5%88%97%E6%B5%B7%E5%A0%B1%E8%A8%AD%E8%A8%88" title="Live"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/live.png" title="Live" alt="Live" class="sociable-hovers" /></a>


<br/><br/>

<p>No related posts.</p>
<p>Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.</p>]]></content:encoded>
			<wfw:commentRss>http://blog.corausir.org/graphic-design/cora-1119/feed</wfw:commentRss>
		</item>
		<item>
		<title>為FLEX TextInput加上MASK</title>
		<link>http://blog.corausir.org/programing/meige-1099</link>
		<comments>http://blog.corausir.org/programing/meige-1099#comments</comments>
		<pubDate>Fri, 11 Dec 2009 11:13:40 +0000</pubDate>
		<dc:creator>Meige</dc:creator>
		
		<category><![CDATA[FLEX]]></category>

		<category><![CDATA[程式設計]]></category>

		<category><![CDATA[Actionscript]]></category>

		<category><![CDATA[AS3]]></category>

		<category><![CDATA[mask]]></category>

		<category><![CDATA[textinput]]></category>

		<category><![CDATA[輸入遮罩]]></category>

		<category><![CDATA[輸入限制]]></category>

		<guid isPermaLink="false">http://blog.corausir.org/?p=1099</guid>
		<description><![CDATA[
<!-- Start Of Script Generated By WP-PostViews Plus -->
<script type="text/javascript">
/* <![CDATA[ */
jQuery.ajax({type:'GET',url:'http://blog.corausir.org/wp-content/plugins/wp-postviews-plus/postviews_plus.php',data:'todowppvp=add&type=/feed&id=1',cache:false,dataType:'script'});
/* ]]> */
</script>
<!-- End Of Script Generated By WP-PostViews Plus -->

<!-- Start Of Script Generated By WP-PostViews Plus -->
<script type="text/javascript">
/* <![CDATA[ */
jQuery.ajax({type:'GET',url:'http://blog.corausir.org/wp-content/plugins/wp-postviews-plus/postviews_plus.php',data:'todowppvp=add&type=/feed&id=1',cache:false,dataType:'script'});
/* ]]> */
</script>
<!-- End Of Script Generated By WP-PostViews Plus -->
什麼什麼……完全看不懂的標題! TextInput 就是 TextInput阿有什麼了不起的勒
但是 TextInput&#160; 可以換上面紗耶，那可就值得瞧一瞧拉。有看有保佑~沒看就………(自己想)!
 
 
這一切的一切全是因為接觸了那該死的屎背屍(sybase)，從 DB 到 ODBC 到PHP 到FLEX..，唉，我也想做有錢人阿，有錢人就不用煩這麼雞毛的事了… 不過&#8230;好像址遠了后。回到正題先，
話說一般 textinput 提供輸入的畫面就白白的一行(如上圖)，    要如何能在尚未輸入時就知道格式呢，ex:(02)1234-5555#06，一般做法就是
1.用很多個textinput + label 去拼湊出來 [需要耐性+細心]    2.使用FLEX內建的 Formatter，但FLEX內建的 Formatter，是在輸入完後才知道格式，無法一開始就知道&#160; &#160;&#160; [如國王的新衣般，聰明人才看得見]
在誠心模拜狗狗大神後，找到在還沒輸入資料前就知道格式囉(不用textinput + label了，oh yeah!) ~看看下面範例吧
Sample
 
mask_Test.mxml 
CODE

?View Code FLEX1
2
3
4
5
6
7
8
9
10
11
12
13
14
&#60;?xml version=&#34;1.0&#34; encoding=&#34;utf-8&#34;?&#62;
&#60;mx:application xmlns:controls=&#34;com.adobe.flex.extras.controls.*&#34; layout=&#34;vertical&#34; xmlns:mx=&#34;http://www.adobe.com/2006/mxml&#34; fontsize=&#34;12&#34;&#62;
&#160;
	&#60;mx:label color=&#34;#FDC605&#34; text=&#34;DataBind&#34; /&#62;
	&#60;mx:text id=&#34;txt&#34; text=&#34;123456&#34; /&#62;
	&#60;controls:maskedtextinput id=&#34;txt_mask1&#34; text=&#34;{this.txt.text}&#34; inputmask=&#34;##-##-##&#34; [...]


Related posts:<ol><li><a href='http://blog.corausir.org/programing/ausir-786' rel='bookmark' title='Permanent Link: 使用 FLEX-AS3 實作 JAVA 數值過濾器'>使用 FLEX-AS3 實作 JAVA 數值過濾器</a> <small>一點都不受歡迎的使用 FLEX 實作 JAVA TQC 考題又來了，這次要做的是如何判斷使用者輸入的資料是否為數字，這次算是非常簡單的議題呢，不過想當初剛學 FLEX 的時候也是找好久就不是知道怎麼把使用者輸入的字串轉為數值型態。 其實要將字串轉為數值只要使用 parseInt...</small></li><li><a href='http://blog.corausir.org/programing/ausir-652' rel='bookmark' title='Permanent Link: 使用 FLEX-AS3 實作 JAVA 陣列行列轉換'>使用 FLEX-AS3 實作 JAVA 陣列行列轉換</a> <small>使用 FLEX-AS3 實作 JAVA 已經好久沒有出現囉，這個利用 TQC JAVA 認證所出的題目可以訓練大家 FLEX 的基礎功喔，有興趣的初學者也可以一起做，今天用很快的速度把第5題做了出來，也沒有加了太多的東西啦，因為本來題目是需要使用...</small></li></ol>

Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.]]></description>
			<content:encoded><![CDATA[
<!-- Start Of Script Generated By WP-PostViews Plus -->
<script type="text/javascript">
/* <![CDATA[ */
jQuery.ajax({type:'GET',url:'http://blog.corausir.org/wp-content/plugins/wp-postviews-plus/postviews_plus.php',data:'todowppvp=add&type=/feed&id=1',cache:false,dataType:'script'});
/* ]]> */
</script>
<!-- End Of Script Generated By WP-PostViews Plus -->
<p>什麼什麼……完全看不懂的標題! TextInput 就是 TextInput阿有什麼了不起的勒</p>
<p>但是 TextInput&#160; 可以換上面紗耶，那可就值得瞧一瞧拉。有看有保佑~沒看就………(自己想)!</p>
<p><a href="http://files.corausir.org/images/vvvvv_10E3B/image.png" rel="shadowbox[post-1099];player=img;" target="_blank"><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="image" border="0" alt="image" src="http://files.corausir.org/images/vvvvv_10E3B/image_thumb.png" width="404" height="227" /></a> </p>
<p> <span id="more-1099"></span>
<p>這一切的一切全是因為接觸了那該死的屎背屍(sybase)，從 DB 到 ODBC 到PHP 到FLEX..，唉，我也想做有錢人阿，有錢人就不用煩這麼雞毛的事了… 不過&#8230;好像址遠了后。回到正題先，</p>
<p>話說一般 textinput 提供輸入的畫面就白白的一行(如上圖)，    <br />要如何能在尚未輸入時就知道格式呢，ex:(02)1234-5555#06，一般做法就是</p>
<p>1.用很多個textinput + label 去拼湊出來 [需要耐性+細心]    <br />2.使用FLEX內建的 Formatter，但FLEX內建的 Formatter，是在輸入完後才知道格式，無法一開始就知道&#160; <br />&#160;&#160; [如國王的新衣般，聰明人才看得見]</p>
<p>在誠心模拜狗狗大神後，找到在還沒輸入資料前就知道格式囉(不用textinput + label了，oh yeah!) ~看看下面範例吧</p>
<p>Sample</p>
<p><a href="http://files.corausir.org/swf/mask_Test.swf" rel="shadowbox;width=600;height=400;" target="_blank"><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="showExample111111[1]" border="0" alt="showExample111111[1]" src="http://files.corausir.org/images/vvvvv_10E3B/showExample1111111.jpg" width="500" height="200" /></a> </p>
<p>mask_Test.mxml </p>
<p>CODE</p>

<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p1099code32'); return false;">View Code</a> FLEX</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table width="100%" ><tr id="p109932"><td class="line_numbers"><pre_line>1
2
3
4
5
6
7
8
9
10
11
12
13
14
</pre_line></td><td class="code" id="p1099code32"><pre class="flex" style="font-family:monospace;"><span style="color: #66cc66;">&lt;</span>?<span style="color: #0066CC;">xml</span> <span style="color: #0066CC;">version</span>=<span style="color: #ff0000;">&quot;1.0&quot;</span> encoding=<span style="color: #ff0000;">&quot;utf-8&quot;</span>?<span style="color: #66cc66;">&gt;</span>
<span style="color: #66cc66;">&lt;</span>mx:application xmlns:controls=<span style="color: #ff0000;">&quot;com.adobe.flex.extras.controls.*&quot;</span> layout=<span style="color: #ff0000;">&quot;vertical&quot;</span> xmlns:mx=<span style="color: #ff0000;">&quot;http://www.adobe.com/2006/mxml&quot;</span> fontsize=<span style="color: #ff0000;">&quot;12&quot;</span><span style="color: #66cc66;">&gt;</span>
&nbsp;
	<span style="color: #66cc66;">&lt;</span>mx:label <span style="color: #0066CC;">color</span>=<span style="color: #ff0000;">&quot;#FDC605&quot;</span> <span style="color: #0066CC;">text</span>=<span style="color: #ff0000;">&quot;DataBind&quot;</span> <span style="color: #66cc66;">/&gt;</span>
	<span style="color: #66cc66;">&lt;</span>mx:<span style="color: #0066CC;">text</span> id=<span style="color: #ff0000;">&quot;txt&quot;</span> <span style="color: #0066CC;">text</span>=<span style="color: #ff0000;">&quot;123456&quot;</span> <span style="color: #66cc66;">/&gt;</span>
	<span style="color: #66cc66;">&lt;</span>controls:maskedtextinput id=<span style="color: #ff0000;">&quot;txt_mask1&quot;</span> <span style="color: #0066CC;">text</span>=<span style="color: #ff0000;">&quot;{this.txt.text}&quot;</span> inputmask=<span style="color: #ff0000;">&quot;##-##-##&quot;</span> <span style="color: #66cc66;">/&gt;</span>
&nbsp;
	<span style="color: #66cc66;">&lt;</span>mx:hrule <span style="color: #0066CC;">width</span>=<span style="color: #ff0000;">&quot;538&quot;</span> <span style="color: #66cc66;">/&gt;</span>
&nbsp;
	<span style="color: #66cc66;">&lt;</span>mx:label <span style="color: #0066CC;">color</span>=<span style="color: #ff0000;">&quot;#FDC605&quot;</span> <span style="color: #0066CC;">text</span>=<span style="color: #ff0000;">&quot;輸入字串&quot;</span> <span style="color: #66cc66;">/&gt;</span>
	<span style="color: #66cc66;">&lt;</span>controls:maskedtextinput id=<span style="color: #ff0000;">&quot;txt_mask&quot;</span> <span style="color: #0066CC;">text</span>=<span style="color: #ff0000;">&quot;&quot;</span> inputmask=<span style="color: #ff0000;">&quot;(##)-####-##~##&quot;</span> <span style="color: #66cc66;">/&gt;</span>
	<span style="color: #66cc66;">&lt;</span>mx:label <span style="color: #0066CC;">text</span>=<span style="color: #ff0000;">&quot;{this.txt_mask.text}&quot;</span> <span style="color: #66cc66;">/&gt;</span>
&nbsp;
<span style="color: #66cc66;">&lt;/</span>mx:application<span style="color: #66cc66;">&gt;</span></pre></td></tr></table></div>

<p>完整檔案<a href="http://files.corausir.org//files/mask_Test.rar" target="_blank">下載</a></p>
<p>感謝資訊提供：<a href="http://cookbooks.adobe.com/index.cfm?event=showdetails&amp;postId=15666" target="_blank">Simple DateField extension with masked input</a></p>
<p>PS:如果是FLEX2.0 可以到adobe 官網下載喔!<a href="http://www.adobe.com/cfusion/exchange/index.cfm?event=extensionDetail&amp;extid=1049969" target="_blank">Adobe Masked TextInput</a></p>



 :: 把這篇好文推到書籤網站與更多人分享吧 :: 


	<a rel="nofollow" target="_blank" href="http://funp.com/push/submit/add.php?url=http%3A%2F%2Fblog.corausir.org%2Fprograming%2Fmeige-1099&s=%E7%82%BAFLEX%20TextInput%E5%8A%A0%E4%B8%8AMASK&&via=tools" title="funp"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/funp.gif" title="funp" alt="funp" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.hemidemi.com/user_bookmark/new?title=%E7%82%BAFLEX%20TextInput%E5%8A%A0%E4%B8%8AMASK&amp;url=http%3A%2F%2Fblog.corausir.org%2Fprograming%2Fmeige-1099" title="Hemidemi"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/hemidemi.png" title="Hemidemi" alt="Hemidemi" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://tw.myweb2.search.yahoo.com/myresults/bookmarklet?u=http%3A%2F%2Fblog.corausir.org%2Fprograming%2Fmeige-1099&ei=UTF-8&t=%E7%82%BAFLEX%20TextInput%E5%8A%A0%E4%B8%8AMASK" title="YahooKimo"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/yahookimo.gif" title="YahooKimo" alt="YahooKimo" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=http%3A%2F%2Fblog.corausir.org%2Fprograming%2Fmeige-1099&amp;title=%E7%82%BAFLEX%20TextInput%E5%8A%A0%E4%B8%8AMASK" title="Google"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/googlebookmark.png" title="Google" alt="Google" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://bookmark.udn.com/add?f_%E7%82%BAFLEX%20TextInput%E5%8A%A0%E4%B8%8AMASK=%E7%82%BAFLEX%20TextInput%E5%8A%A0%E4%B8%8AMASK&f_URL=http%3A%2F%2Fblog.corausir.org%2Fprograming%2Fmeige-1099" title="udn"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/udn.gif" title="udn" alt="udn" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.haohaoreport.com/submit.php?url=http%3A%2F%2Fblog.corausir.org%2Fprograming%2Fmeige-1099&amp;title=%E7%82%BAFLEX%20TextInput%E5%8A%A0%E4%B8%8AMASK" title="Haohao"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/haohao.png" title="Haohao" alt="Haohao" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="https://favorites.live.com/quickadd.aspx?marklet=1&amp;url=http%3A%2F%2Fblog.corausir.org%2Fprograming%2Fmeige-1099&amp;title=%E7%82%BAFLEX%20TextInput%E5%8A%A0%E4%B8%8AMASK" title="Live"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/live.png" title="Live" alt="Live" class="sociable-hovers" /></a>


<br/><br/>

<p>Related posts:<ol><li><a href='http://blog.corausir.org/programing/ausir-786' rel='bookmark' title='Permanent Link: 使用 FLEX-AS3 實作 JAVA 數值過濾器'>使用 FLEX-AS3 實作 JAVA 數值過濾器</a> <small>一點都不受歡迎的使用 FLEX 實作 JAVA TQC 考題又來了，這次要做的是如何判斷使用者輸入的資料是否為數字，這次算是非常簡單的議題呢，不過想當初剛學 FLEX 的時候也是找好久就不是知道怎麼把使用者輸入的字串轉為數值型態。 其實要將字串轉為數值只要使用 parseInt...</small></li><li><a href='http://blog.corausir.org/programing/ausir-652' rel='bookmark' title='Permanent Link: 使用 FLEX-AS3 實作 JAVA 陣列行列轉換'>使用 FLEX-AS3 實作 JAVA 陣列行列轉換</a> <small>使用 FLEX-AS3 實作 JAVA 已經好久沒有出現囉，這個利用 TQC JAVA 認證所出的題目可以訓練大家 FLEX 的基礎功喔，有興趣的初學者也可以一起做，今天用很快的速度把第5題做了出來，也沒有加了太多的東西啦，因為本來題目是需要使用...</small></li></ol></p>
<p>Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.</p>]]></content:encoded>
			<wfw:commentRss>http://blog.corausir.org/programing/meige-1099/feed</wfw:commentRss>
		</item>
		<item>
		<title>台灣國際照明科技展-LOGO與海報設計</title>
		<link>http://blog.corausir.org/graphic-design/cora-1098</link>
		<comments>http://blog.corausir.org/graphic-design/cora-1098#comments</comments>
		<pubDate>Thu, 10 Dec 2009 03:53:30 +0000</pubDate>
		<dc:creator>Cora</dc:creator>
		
		<category><![CDATA[DM設計]]></category>

		<category><![CDATA[平面設計]]></category>

		<category><![CDATA[LOGO]]></category>

		<category><![CDATA[世貿]]></category>

		<category><![CDATA[台灣國際照明科技展]]></category>

		<category><![CDATA[展覽]]></category>

		<category><![CDATA[海報設計]]></category>

		<category><![CDATA[照明]]></category>

		<guid isPermaLink="false">http://blog.corausir.org/graphic-design/cora-1098</guid>
		<description><![CDATA[那天去世貿找客戶的時候，在二樓的燈箱看到之前幫外貌協會所設計的海報登場了，所以趁熱po上來blog囉。
此案子是照明科技展覽的宣傳海報與主logo的設計。
&#160;
 
&#160;
 
&#160;
在設計上為展覽上有許多不同廠商展示的照明產品，所以將照明的元素做為燈泡的元素，底色就以鮮明的黃色作為視覺色系。 
&#160;
 
&#160;
&#160;
&#160;
主要logo設計理念:把TILS結合彩色的燈條，表現台灣國際照明科技展產出內容繽紛、多元化。
&#160; 
&#160;
這是在世貿二樓拍到的燈箱喔
 


&#160;
台灣國際照明科技展 http://www.tils.com.tw/



 :: 把這篇好文推到書籤網站與更多人分享吧 :: 


	
	
	
	
	
	
	




No related posts.
Related posts brought to you by Yet Another Related Posts Plugin.


No related posts.

Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.]]></description>
			<content:encoded><![CDATA[<p>那天去世貿找客戶的時候，在二樓的燈箱看到之前幫外貌協會所設計的海報登場了，所以趁熱po上來blog囉。</p>
<p>此案子是照明科技展覽的宣傳海報與主logo的設計。</p>
<p>&#160;</p>
<p><a href="http://files.corausir.org/images/79411d210c4d_A4FD/_080808_rakuten_seasonseat07_17.jpg" rel="shadowbox[post-1098];player=img;"><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="_080808_rakuten_seasonseat07_17" border="0" alt="_080808_rakuten_seasonseat07_17" src="http://files.corausir.org/images/79411d210c4d_A4FD/_080808_rakuten_seasonseat07_17_thumb.jpg" width="354" height="238" /></a> </p>
<p>&#160;</p>
<p> <span id="more-1098"></span>
<p>&#160;</p>
<p>在設計上為展覽上有許多不同廠商展示的照明產品，所以將照明的元素做為燈泡的元素，底色就以鮮明的黃色作為視覺色系。 </p>
<p>&#160;</p>
<p><a href="http://files.corausir.org/images/79411d210c4d_A4FD/tils01.jpg" rel="shadowbox[post-1098];player=img;"><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="tils-01" border="0" alt="tils-01" src="http://files.corausir.org/images/79411d210c4d_A4FD/tils01_thumb.jpg" width="354" height="529" /> </a></p>
<p>&#160;</p>
<p>&#160;</p>
<p>&#160;</p>
<p>主要logo設計理念:把TILS結合彩色的燈條，表現台灣國際照明科技展產出內容繽紛、多元化。</p>
<p><a href="http://files.corausir.org/images/79411d210c4d_A4FD/logo01.jpg" rel="shadowbox[post-1098];player=img;"><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="logo-01" border="0" alt="logo-01" src="http://files.corausir.org/images/79411d210c4d_A4FD/logo01_thumb.jpg" width="354" height="237" /></a>&#160; </p>
<p>&#160;</p>
<p>這是在世貿二樓拍到的燈箱喔</p>
<p><a href="http://files.corausir.org/images/79411d210c4d_A4FD/IMAG0156.jpg" rel="shadowbox[post-1098];player=img;"><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="IMAG0156" border="0" alt="IMAG0156" src="http://files.corausir.org/images/79411d210c4d_A4FD/IMAG0156_thumb.jpg" width="354" height="237" /></a> </p>
</p>
</p>
<p>&#160;</p>
<p>台灣國際照明科技展 <a href="http://www.tils.com.tw/">http://www.tils.com.tw/</a></p>



 :: 把這篇好文推到書籤網站與更多人分享吧 :: 


	<a rel="nofollow" target="_blank" href="http://funp.com/push/submit/add.php?url=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fcora-1098&s=%E5%8F%B0%E7%81%A3%E5%9C%8B%E9%9A%9B%E7%85%A7%E6%98%8E%E7%A7%91%E6%8A%80%E5%B1%95-LOGO%E8%88%87%E6%B5%B7%E5%A0%B1%E8%A8%AD%E8%A8%88&&via=tools" title="funp"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/funp.gif" title="funp" alt="funp" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.hemidemi.com/user_bookmark/new?title=%E5%8F%B0%E7%81%A3%E5%9C%8B%E9%9A%9B%E7%85%A7%E6%98%8E%E7%A7%91%E6%8A%80%E5%B1%95-LOGO%E8%88%87%E6%B5%B7%E5%A0%B1%E8%A8%AD%E8%A8%88&amp;url=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fcora-1098" title="Hemidemi"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/hemidemi.png" title="Hemidemi" alt="Hemidemi" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://tw.myweb2.search.yahoo.com/myresults/bookmarklet?u=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fcora-1098&ei=UTF-8&t=%E5%8F%B0%E7%81%A3%E5%9C%8B%E9%9A%9B%E7%85%A7%E6%98%8E%E7%A7%91%E6%8A%80%E5%B1%95-LOGO%E8%88%87%E6%B5%B7%E5%A0%B1%E8%A8%AD%E8%A8%88" title="YahooKimo"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/yahookimo.gif" title="YahooKimo" alt="YahooKimo" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fcora-1098&amp;title=%E5%8F%B0%E7%81%A3%E5%9C%8B%E9%9A%9B%E7%85%A7%E6%98%8E%E7%A7%91%E6%8A%80%E5%B1%95-LOGO%E8%88%87%E6%B5%B7%E5%A0%B1%E8%A8%AD%E8%A8%88" title="Google"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/googlebookmark.png" title="Google" alt="Google" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://bookmark.udn.com/add?f_%E5%8F%B0%E7%81%A3%E5%9C%8B%E9%9A%9B%E7%85%A7%E6%98%8E%E7%A7%91%E6%8A%80%E5%B1%95-LOGO%E8%88%87%E6%B5%B7%E5%A0%B1%E8%A8%AD%E8%A8%88=%E5%8F%B0%E7%81%A3%E5%9C%8B%E9%9A%9B%E7%85%A7%E6%98%8E%E7%A7%91%E6%8A%80%E5%B1%95-LOGO%E8%88%87%E6%B5%B7%E5%A0%B1%E8%A8%AD%E8%A8%88&f_URL=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fcora-1098" title="udn"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/udn.gif" title="udn" alt="udn" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.haohaoreport.com/submit.php?url=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fcora-1098&amp;title=%E5%8F%B0%E7%81%A3%E5%9C%8B%E9%9A%9B%E7%85%A7%E6%98%8E%E7%A7%91%E6%8A%80%E5%B1%95-LOGO%E8%88%87%E6%B5%B7%E5%A0%B1%E8%A8%AD%E8%A8%88" title="Haohao"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/haohao.png" title="Haohao" alt="Haohao" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="https://favorites.live.com/quickadd.aspx?marklet=1&amp;url=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fcora-1098&amp;title=%E5%8F%B0%E7%81%A3%E5%9C%8B%E9%9A%9B%E7%85%A7%E6%98%8E%E7%A7%91%E6%8A%80%E5%B1%95-LOGO%E8%88%87%E6%B5%B7%E5%A0%B1%E8%A8%AD%E8%A8%88" title="Live"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/live.png" title="Live" alt="Live" class="sociable-hovers" /></a>


<br/><br/>

<p>No related posts.</p>
<p>Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.</p>]]></content:encoded>
			<wfw:commentRss>http://blog.corausir.org/graphic-design/cora-1098/feed</wfw:commentRss>
		</item>
		<item>
		<title>誘人蓋飯來囉&#8230;&#8230;..羊角蓋飯設計</title>
		<link>http://blog.corausir.org/graphic-design/cora-1095</link>
		<comments>http://blog.corausir.org/graphic-design/cora-1095#comments</comments>
		<pubDate>Mon, 23 Nov 2009 08:58:07 +0000</pubDate>
		<dc:creator>Cora</dc:creator>
		
		<category><![CDATA[DM設計]]></category>

		<category><![CDATA[平面設計]]></category>

		<category><![CDATA[吃到飽]]></category>

		<category><![CDATA[報紙稿]]></category>

		<category><![CDATA[定時]]></category>

		<category><![CDATA[帆布]]></category>

		<category><![CDATA[折價券]]></category>

		<category><![CDATA[掛布]]></category>

		<category><![CDATA[放題]]></category>

		<category><![CDATA[燒肉]]></category>

		<category><![CDATA[羊角]]></category>

		<category><![CDATA[羊角炭火燒肉]]></category>

		<category><![CDATA[蓋飯]]></category>

		<guid isPermaLink="false">http://blog.corausir.org/graphic-design/cora-1095</guid>
		<description><![CDATA[這星期天因為Ausir的好朋友要出國了，所以我們直奔台中吃飯，而到了台中當然要去羊角炭火燒肉大快一翻囉，在台北可是想死我了。趁這機會回台中好好吃一頓， 羊角炭火燒肉還是沒讓我失望，這次很滿足，不過吃歸吃我忽然想到前陣子幫羊角新推出的蓋飯新菜所製作的一系列設計物可還沒PO上來給各位橋橋。
&#160;
&#160;

 
&#160;
今天上班就趕快PO上來囉，說到這次的羊角炭火燒肉所對出的新菜「蓋飯系列」有設計了燈箱、DM、折價券、掛布、報紙稿、餐單、菜單….等等設計物。
主要在視覺上我一樣早比較符合他們味道的日式風格，但是顏色上處理比較鮮明，食材拍照也以俯視的角度去執行，讓消費者可以直接感受到蓋飯的美味與豐富。
&#160;
&#160;
&#160;
這張是599元吃到飽的海鮮放題燈箱 ，意思是在羊角的599吃到飽有擁有整個海的海鮮可以吃。
&#160;

&#160;
蓋飯燈箱

&#160;
&#160;
價格與營業時間燈箱
&#160;
&#160;
&#160;
餐墊
&#160;
&#160;
布條


&#160;&#160;&#160;&#160;&#160; 
&#160;
這部分是菜單的部分，而是使用客戶原本有的特製的木頭菜單封面，再用麻繩串起。 












 
 




&#160;
地址:台中市南屯區公益路二段389號，假日最好打電話去定位喔，電話:04-22523355



 :: 把這篇好文推到書籤網站與更多人分享吧 :: 


	
	
	
	
	
	
	




No related posts.
Related posts brought to you by Yet Another Related Posts Plugin.


No related posts.

Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.]]></description>
			<content:encoded><![CDATA[<p>這星期天因為Ausir的好朋友要出國了，所以我們直奔台中吃飯，而到了台中當然要去<a href="http://office.finpo.com.tw/yokaku/">羊角炭火燒肉</a>大快一翻囉，在台北可是想死我了。趁這機會回台中好好吃一頓， 羊角炭火燒肉還是沒讓我失望，這次很滿足，不過吃歸吃我忽然想到前陣子幫羊角新推出的蓋飯新菜所製作的一系列設計物可還沒PO上來給各位橋橋。</p>
<p>&#160;</p>
<p>&#160;</p>
<p><a href="http://files.corausir.org/images/a547c0b71f6c_E984/DSC_0018.png" rel="shadowbox[post-1095];player=img;"><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="DSC_0018" border="0" alt="DSC_0018" src="http://files.corausir.org/images/a547c0b71f6c_E984/DSC_0018_thumb.png" width="357" height="426" /></a></p>
<p> <span id="more-1095"></span>
<p>&#160;</p>
<p>今天上班就趕快PO上來囉，說到這次的<a href="http://office.finpo.com.tw/yokaku/">羊角炭火燒肉</a>所對出的新菜「蓋飯系列」有設計了燈箱、DM、折價券、掛布、報紙稿、餐單、菜單….等等設計物。</p>
<p>主要在視覺上我一樣早比較符合他們味道的日式風格，但是顏色上處理比較鮮明，食材拍照也以俯視的角度去執行，讓消費者可以直接感受到蓋飯的美味與豐富。</p>
<p>&#160;</p>
<p>&#160;</p>
<p>&#160;</p>
<p>這張是599元吃到飽的海鮮放題燈箱 ，意思是在羊角的599吃到飽有擁有整個海的海鮮可以吃。</p>
<p>&#160;</p>
<p><a href="http://files.corausir.org/images/a547c0b71f6c_E984/ok01.png" rel="shadowbox[post-1095];player=img;"><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="ok-01" border="0" alt="ok-01" src="http://files.corausir.org/images/a547c0b71f6c_E984/ok01_thumb.png" width="350" height="553" /></a></p>
<p>&#160;</p>
<p>蓋飯燈箱</p>
<p><a href="http://files.corausir.org/images/a547c0b71f6c_E984/0ok01.png" rel="shadowbox[post-1095];player=img;"><u></u><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="0ok-01" border="0" alt="0ok-01" src="http://files.corausir.org/images/a547c0b71f6c_E984/0ok01_thumb.png" width="354" height="600" /></a></p>
<p>&#160;</p>
<p>&#160;</p>
<p>價格與營業時間燈箱<a href="http://files.corausir.org/images/a547c0b71f6c_E984/00001.png" rel="shadowbox[post-1095];player=img;"><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="00001" border="0" alt="00001" src="http://files.corausir.org/images/a547c0b71f6c_E984/00001_thumb.png" width="354" height="596" /></a></p>
<p>&#160;</p>
<p>&#160;</p>
<p>&#160;</p>
<p>餐墊<a href="http://files.corausir.org/images/a547c0b71f6c_E984/00001.jpg" rel="shadowbox[post-1095];player=img;"><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="00001" border="0" alt="00001" src="http://files.corausir.org/images/a547c0b71f6c_E984/00001_thumb.jpg" width="350" height="225" /></a></p>
<p>&#160;</p>
<p>&#160;</p>
<p>布條</p>
<p><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="01" border="0" alt="01" src="http://files.corausir.org/images/a547c0b71f6c_E984/01_thumb.jpg" width="350" height="58" /></p>
<p><a href="http://files.corausir.org/images/a547c0b71f6c_E984/01.jpg" rel="shadowbox[post-1095];player=img;"></a></p>
<p><a href="http://files.corausir.org/images/a547c0b71f6c_E984/102.png" rel="shadowbox[post-1095];player=img;"><img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="1-02" border="0" alt="1-02" src="http://files.corausir.org/images/a547c0b71f6c_E984/102_thumb.png" width="150" height="468" /></a>&#160;&#160;&#160;&#160;&#160; </p>
<p>&#160;</p>
<p>這部分是菜單的部分，而是使用客戶原本有的特製的木頭菜單封面，再用麻繩串起。 </p>
<table border="0" cellspacing="4" cellpadding="4" width="400">
<tbody>
<tr>
<td valign="top" width="80"><a href="http://files.corausir.org/images/a547c0b71f6c_E984/001.png" rel="shadowbox[post-1095];player=img;"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="001" border="0" alt="001" src="http://files.corausir.org/images/a547c0b71f6c_E984/001_thumb.png" width="89" height="244" /></a></td>
<td valign="top" width="80"><a href="http://files.corausir.org/images/a547c0b71f6c_E984/002.png" rel="shadowbox[post-1095];player=img;"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="002" border="0" alt="002" src="http://files.corausir.org/images/a547c0b71f6c_E984/002_thumb.png" width="89" height="244" /></a></td>
<td valign="top" width="80"><a href="http://files.corausir.org/images/a547c0b71f6c_E984/003.png" rel="shadowbox[post-1095];player=img;"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="003" border="0" alt="003" src="http://files.corausir.org/images/a547c0b71f6c_E984/003_thumb.png" width="89" height="244" /></a></td>
<td valign="top" width="80"><a href="http://files.corausir.org/images/a547c0b71f6c_E984/004.png" rel="shadowbox[post-1095];player=img;"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="004" border="0" alt="004" src="http://files.corausir.org/images/a547c0b71f6c_E984/004_thumb.png" width="89" height="244" /></a></td>
<td valign="top" width="80"><a href="http://files.corausir.org/images/a547c0b71f6c_E984/005.png" rel="shadowbox[post-1095];player=img;"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="005" border="0" alt="005" src="http://files.corausir.org/images/a547c0b71f6c_E984/005_thumb.png" width="89" height="244" /></a></td>
</tr>
<tr>
<td valign="top" width="80"><a href="http://files.corausir.org/images/a547c0b71f6c_E984/006.png" rel="shadowbox[post-1095];player=img;"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="006" border="0" alt="006" src="http://files.corausir.org/images/a547c0b71f6c_E984/006_thumb.png" width="89" height="244" /></a></td>
<td valign="top" width="80"><a href="http://files.corausir.org/images/a547c0b71f6c_E984/007.png" rel="shadowbox[post-1095];player=img;"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="007" border="0" alt="007" src="http://files.corausir.org/images/a547c0b71f6c_E984/007_thumb.png" width="89" height="244" /></a></td>
<td valign="top" width="80"><a href="http://files.corausir.org/images/a547c0b71f6c_E984/008.png" rel="shadowbox[post-1095];player=img;"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="008" border="0" alt="008" src="http://files.corausir.org/images/a547c0b71f6c_E984/008_thumb.png" width="89" height="244" /></a> <a href="http://files.corausir.org/images/a547c0b71f6c_E984/009.png" rel="shadowbox[post-1095];player=img;"></a></td>
<td valign="top" width="80"><a href="http://files.corausir.org/images/a547c0b71f6c_E984/009_3.png" rel="shadowbox[post-1095];player=img;"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="009" border="0" alt="009" src="http://files.corausir.org/images/a547c0b71f6c_E984/009_thumb.png" width="89" height="244" /></a> </td>
<td valign="top" width="80"><a href="http://files.corausir.org/images/a547c0b71f6c_E984/010.png" rel="shadowbox[post-1095];player=img;"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="010" border="0" alt="010" src="http://files.corausir.org/images/a547c0b71f6c_E984/010_thumb.png" width="89" height="244" /></a></td>
</tr>
</tbody>
</table>
<p>&#160;</p>
<p>地址:台中市南屯區公益路二段389號，假日最好打電話去定位喔，電話:04-22523355</p>



 :: 把這篇好文推到書籤網站與更多人分享吧 :: 


	<a rel="nofollow" target="_blank" href="http://funp.com/push/submit/add.php?url=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fcora-1095&s=%E8%AA%98%E4%BA%BA%E8%93%8B%E9%A3%AF%E4%BE%86%E5%9B%89........%E7%BE%8A%E8%A7%92%E8%93%8B%E9%A3%AF%E8%A8%AD%E8%A8%88&&via=tools" title="funp"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/funp.gif" title="funp" alt="funp" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.hemidemi.com/user_bookmark/new?title=%E8%AA%98%E4%BA%BA%E8%93%8B%E9%A3%AF%E4%BE%86%E5%9B%89........%E7%BE%8A%E8%A7%92%E8%93%8B%E9%A3%AF%E8%A8%AD%E8%A8%88&amp;url=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fcora-1095" title="Hemidemi"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/hemidemi.png" title="Hemidemi" alt="Hemidemi" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://tw.myweb2.search.yahoo.com/myresults/bookmarklet?u=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fcora-1095&ei=UTF-8&t=%E8%AA%98%E4%BA%BA%E8%93%8B%E9%A3%AF%E4%BE%86%E5%9B%89........%E7%BE%8A%E8%A7%92%E8%93%8B%E9%A3%AF%E8%A8%AD%E8%A8%88" title="YahooKimo"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/yahookimo.gif" title="YahooKimo" alt="YahooKimo" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fcora-1095&amp;title=%E8%AA%98%E4%BA%BA%E8%93%8B%E9%A3%AF%E4%BE%86%E5%9B%89........%E7%BE%8A%E8%A7%92%E8%93%8B%E9%A3%AF%E8%A8%AD%E8%A8%88" title="Google"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/googlebookmark.png" title="Google" alt="Google" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://bookmark.udn.com/add?f_%E8%AA%98%E4%BA%BA%E8%93%8B%E9%A3%AF%E4%BE%86%E5%9B%89........%E7%BE%8A%E8%A7%92%E8%93%8B%E9%A3%AF%E8%A8%AD%E8%A8%88=%E8%AA%98%E4%BA%BA%E8%93%8B%E9%A3%AF%E4%BE%86%E5%9B%89........%E7%BE%8A%E8%A7%92%E8%93%8B%E9%A3%AF%E8%A8%AD%E8%A8%88&f_URL=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fcora-1095" title="udn"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/udn.gif" title="udn" alt="udn" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.haohaoreport.com/submit.php?url=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fcora-1095&amp;title=%E8%AA%98%E4%BA%BA%E8%93%8B%E9%A3%AF%E4%BE%86%E5%9B%89........%E7%BE%8A%E8%A7%92%E8%93%8B%E9%A3%AF%E8%A8%AD%E8%A8%88" title="Haohao"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/haohao.png" title="Haohao" alt="Haohao" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="https://favorites.live.com/quickadd.aspx?marklet=1&amp;url=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fcora-1095&amp;title=%E8%AA%98%E4%BA%BA%E8%93%8B%E9%A3%AF%E4%BE%86%E5%9B%89........%E7%BE%8A%E8%A7%92%E8%93%8B%E9%A3%AF%E8%A8%AD%E8%A8%88" title="Live"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/live.png" title="Live" alt="Live" class="sociable-hovers" /></a>


<br/><br/>

<p>No related posts.</p>
<p>Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.</p>]]></content:encoded>
			<wfw:commentRss>http://blog.corausir.org/graphic-design/cora-1095/feed</wfw:commentRss>
		</item>
		<item>
		<title>將 FLEX 的 IMAGE 元件加上讀取圖片時的進度顯示</title>
		<link>http://blog.corausir.org/programing/ausir-1094</link>
		<comments>http://blog.corausir.org/programing/ausir-1094#comments</comments>
		<pubDate>Tue, 10 Nov 2009 10:59:01 +0000</pubDate>
		<dc:creator>Ausir</dc:creator>
		
		<category><![CDATA[FLEX]]></category>

		<category><![CDATA[程式設計]]></category>

		<category><![CDATA[FLASH]]></category>

		<category><![CDATA[FLEX 3]]></category>

		<category><![CDATA[FLEX 4]]></category>

		<category><![CDATA[IMAGE]]></category>

		<category><![CDATA[progressbar]]></category>

		<category><![CDATA[讀取進度]]></category>

		<guid isPermaLink="false">http://blog.corausir.org/programing/ausir-1094</guid>
		<description><![CDATA[
<!-- Start Of Script Generated By WP-PostViews Plus -->
<script type="text/javascript">
/* <![CDATA[ */
jQuery.ajax({type:'GET',url:'http://blog.corausir.org/wp-content/plugins/wp-postviews-plus/postviews_plus.php',data:'todowppvp=add&type=/feed&id=1',cache:false,dataType:'script'});
/* ]]> */
</script>
<!-- End Of Script Generated By WP-PostViews Plus -->

<!-- Start Of Script Generated By WP-PostViews Plus -->
<script type="text/javascript">
/* <![CDATA[ */
jQuery.ajax({type:'GET',url:'http://blog.corausir.org/wp-content/plugins/wp-postviews-plus/postviews_plus.php',data:'todowppvp=add&type=/feed&id=1',cache:false,dataType:'script'});
/* ]]> */
</script>
<!-- End Of Script Generated By WP-PostViews Plus -->
一般在寫FLEX的時候要讓 IMAGE 顯示圖片，大多時候會使用他的 source 屬性，這個屬性實在很好用不但可以直接丟 URL ，也可以使用 EMBED 崁入圖片，甚至可以把 ByteArray 丟進去給他，他就會把他繪圖出來，雖然是很好用，但是如果讀到比較大的圖片，好像就會有點改他傻傻的，所以這次就加個進度表給他吧。
 加上讀取圖片的進度 bar
 
其實要做這個功能並不會很複雜，因為 IMAGE 元件其實已經給了我們 load() , progress() , complete() 這三個好用的幫手， load() 就是去讀取圖片 ，在讀取的途中會不斷的觸發 progress() ， 一直到完成後會觸發 complete() 的方法。
因此就不多說啦，請看範例，但是因為有可能有跨網域限制，如果讀不到圖請下載原始碼回去測試吧。
 
CODE
case1109.mxml

?View Code FLEX1
2
3
4
5
6
7
8
&#60;?xml version=&#34;1.0&#34; encoding=&#34;utf-8&#34;?&#62;
&#60;mx:Application xmlns:mx=&#34;http://www.adobe.com/2006/mxml&#34; layout=&#34;vertical&#34; xmlns:local=&#34;*&#34;&#62;
	&#60;local:progressImage id=&#34;myProgressImg&#34;/&#62;
	&#60;mx:TextInput width=&#34;342&#34; id=&#34;urlText&#34;&#62;
		&#60;mx:text&#62;http://keepy.com.tw/keepyedit/keepy/pageshot/666_97901355/000.jpg&#60;/mx:text&#62;
	&#60;/mx:TextInput&#62;
	&#60;mx:Button label=&#34;開始&#34; click=&#34;this.myProgressImg.loadImage(this.urlText.text);&#34;/&#62;
&#60;/mx:Application&#62;


progressImage.mxml

?View Code FLEX1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
&#60;?xml version=&#34;1.0&#34; encoding=&#34;utf-8&#34;?&#62;
&#60;mx:Canvas xmlns:mx=&#34;http://www.adobe.com/2006/mxml&#34;&#62;
	&#60;mx:Script&#62;
		&#60;!&#91;CDATA&#91;
			public function loadImage&#40;url:String&#41;:void&#123;
				this.img.load&#40;url&#41;;
				this.progressbar.visible = true ;
			&#125;
			private function onImageLoadHandler&#40;event:ProgressEvent&#41;:void&#123;
				this.progressbar.setProgress&#40;event.bytesLoaded,event.bytesTotal&#41;;
			&#125;
			private [...]


Related posts:<ol><li><a href='http://blog.corausir.org/programing/ausir-764' rel='bookmark' title='Permanent Link: FLEX 一次開啟多個檔案 &amp; 限制檔案類型'>FLEX 一次開啟多個檔案 &amp; 限制檔案類型</a> <small>上次開啟圖片放入 FLASH 中，我們實做的是一次讀取一個檔案，今天， ♣梅干桑♣ 也真宵貪阿，居然想要一次讀入七八張圖片，直接放入 FLASH 中，好吧，沒關係練功不分時間，這次不但一次讀取多張圖片，並且加入限制使用者只可以開啟影像類型的檔案，並且限定副檔名的類型。 首先我們來介紹限制檔案類型，我們用 FileFilter 來實作，並且使用陣列的方式，傳入...</small></li><li><a href='http://blog.corausir.org/programing/ausir-730' rel='bookmark' title='Permanent Link: FLEX 利用物件概念儲存圖片資料'>FLEX 利用物件概念儲存圖片資料</a> <small>今天真是練功日阿，♣梅干桑♣ 雖然得到可以在 FLASH 讀取到本地端的圖片的利器，但是卻被物件導向給搞死掉啦，這也不怪他啦，物件導向也不知道是哪個寫程式的人發明出來的東西，再說 AS2 的時代也沒有物件導向這東西，也是許多做視覺設計的人跳下海寫程式常常會給搞死的地方。 圖片來源 : Cora 設計的貓狗寵物食品包裝...</small></li><li><a href='http://blog.corausir.org/programing/ausir-725' rel='bookmark' title='Permanent Link: 在 FLASH 開啟本機圖檔。FLEX SDK 4 需要'>在 FLASH 開啟本機圖檔。FLEX SDK 4 需要</a> <small>FLASH PLAYER 因為安全性的問題，是不允許使用者在 FLASH PLAYER 開啟本地端的檔案來做修改的，不過 Flash player 10 稍微更改了這個設定，新版的...</small></li></ol>

Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.]]></description>
			<content:encoded><![CDATA[
<!-- Start Of Script Generated By WP-PostViews Plus -->
<script type="text/javascript">
/* <![CDATA[ */
jQuery.ajax({type:'GET',url:'http://blog.corausir.org/wp-content/plugins/wp-postviews-plus/postviews_plus.php',data:'todowppvp=add&type=/feed&id=1',cache:false,dataType:'script'});
/* ]]> */
</script>
<!-- End Of Script Generated By WP-PostViews Plus -->
<p>一般在寫FLEX的時候要讓 IMAGE 顯示圖片，大多時候會使用他的 source 屬性，這個屬性實在很好用不但可以直接丟 URL ，也可以使用 EMBED 崁入圖片，甚至可以把 ByteArray 丟進去給他，他就會把他繪圖出來，雖然是很好用，但是如果讀到比較大的圖片，好像就會有點改他傻傻的，所以這次就加個進度表給他吧。</p>
<p align="center"><a href="http://files.corausir.org/images/FLEXIMAGE_106F3/image.png" rel="shadowbox[post-1094];player=img;" target="_blank"><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="image" border="0" alt="image" src="http://files.corausir.org/images/FLEXIMAGE_106F3/image_thumb.png" width="404" height="216" /></a> 加上讀取圖片的進度 bar</p>
<p> <span id="more-1094"></span>
<p>其實要做這個功能並不會很複雜，因為 IMAGE 元件其實已經給了我們 load() , progress() , complete() 這三個好用的幫手， load() 就是去讀取圖片 ，在讀取的途中會不斷的觸發 progress() ， 一直到完成後會觸發 complete() 的方法。</p>
<p>因此就不多說啦，請看範例，但是因為有可能有跨網域限制，如果讀不到圖請下載原始碼回去測試吧。</p>
<p><a href="http://files.corausir.org/swf/case1109.swf" rel="shadowbox;width=800;height=600"><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="showExample11111[1]" border="0" alt="showExample11111[1]" src="http://files.corausir.org/images/FLEXIMAGE_106F3/showExample111111.jpg" width="500" height="200" /></a> </p>
<p>CODE</p>
<p>case1109.mxml</p>
<p>
<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p1094code43'); return false;">View Code</a> FLEX</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table width="100%" ><tr id="p109443"><td class="line_numbers"><pre_line>1
2
3
4
5
6
7
8
</pre_line></td><td class="code" id="p1094code43"><pre class="flex" style="font-family:monospace;"><span style="color: #66cc66;">&lt;</span>?<span style="color: #0066CC;">xml</span> <span style="color: #0066CC;">version</span>=<span style="color: #ff0000;">&quot;1.0&quot;</span> encoding=<span style="color: #ff0000;">&quot;utf-8&quot;</span>?<span style="color: #66cc66;">&gt;</span>
<span style="color: #66cc66;">&lt;</span>mx:Application xmlns:mx=<span style="color: #ff0000;">&quot;http://www.adobe.com/2006/mxml&quot;</span> layout=<span style="color: #ff0000;">&quot;vertical&quot;</span> xmlns:local=<span style="color: #ff0000;">&quot;*&quot;</span><span style="color: #66cc66;">&gt;</span>
	<span style="color: #66cc66;">&lt;</span>local:progressImage id=<span style="color: #ff0000;">&quot;myProgressImg&quot;</span><span style="color: #66cc66;">/&gt;</span>
	<span style="color: #66cc66;">&lt;</span>mx:TextInput <span style="color: #0066CC;">width</span>=<span style="color: #ff0000;">&quot;342&quot;</span> id=<span style="color: #ff0000;">&quot;urlText&quot;</span><span style="color: #66cc66;">&gt;</span>
		<span style="color: #66cc66;">&lt;</span>mx:text<span style="color: #66cc66;">&gt;</span>http:<span style="color: #808080; font-style: italic;">//keepy.com.tw/keepyedit/keepy/pageshot/666_97901355/000.jpg&lt;/mx:text&gt;</span>
	<span style="color: #66cc66;">&lt;/</span>mx:TextInput<span style="color: #66cc66;">&gt;</span>
	<span style="color: #66cc66;">&lt;</span>mx:<span style="color: #0066CC;">Button</span> label=<span style="color: #ff0000;">&quot;開始&quot;</span> click=<span style="color: #ff0000;">&quot;this.myProgressImg.loadImage(this.urlText.text);&quot;</span><span style="color: #66cc66;">/&gt;</span>
<span style="color: #66cc66;">&lt;/</span>mx:Application<span style="color: #66cc66;">&gt;</span></pre></td></tr></table></div>

</p>
<p>progressImage.mxml</p>
<p>
<div class="wp_codebox_msgheader"><span class="right"><sup><a href="http://www.ericbess.com/ericblog/2008/03/03/wp-codebox/#examples" target="_blank" title="WP-CodeBox HowTo?"><span style="color: #99cc00">?</span></a></sup></span><span class="left"><a href="javascript:;" onclick="javascript:showCodeTxt('p1094code44'); return false;">View Code</a> FLEX</span><div class="codebox_clear"></div></div><div class="wp_codebox"><table width="100%" ><tr id="p109444"><td class="line_numbers"><pre_line>1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
</pre_line></td><td class="code" id="p1094code44"><pre class="flex" style="font-family:monospace;"><span style="color: #66cc66;">&lt;</span>?<span style="color: #0066CC;">xml</span> <span style="color: #0066CC;">version</span>=<span style="color: #ff0000;">&quot;1.0&quot;</span> encoding=<span style="color: #ff0000;">&quot;utf-8&quot;</span>?<span style="color: #66cc66;">&gt;</span>
<span style="color: #66cc66;">&lt;</span>mx:Canvas xmlns:mx=<span style="color: #ff0000;">&quot;http://www.adobe.com/2006/mxml&quot;</span><span style="color: #66cc66;">&gt;</span>
	<span style="color: #66cc66;">&lt;</span>mx:Script<span style="color: #66cc66;">&gt;</span>
		<span style="color: #66cc66;">&lt;!</span><span style="color: #66cc66;">&#91;</span>CDATA<span style="color: #66cc66;">&#91;</span>
			<span style="color: #0066CC;">public</span> <span style="color: #000000; font-weight: bold;">function</span> loadImage<span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">url</span>:<span style="color: #0066CC;">String</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span><span style="color: #66cc66;">&#123;</span>
				<span style="color: #0066CC;">this</span>.<span style="color: #006600;">img</span>.<span style="color: #0066CC;">load</span><span style="color: #66cc66;">&#40;</span><span style="color: #0066CC;">url</span><span style="color: #66cc66;">&#41;</span>;
				<span style="color: #0066CC;">this</span>.<span style="color: #006600;">progressbar</span>.<span style="color: #0066CC;">visible</span> = <span style="color: #000000; font-weight: bold;">true</span> ;
			<span style="color: #66cc66;">&#125;</span>
			<span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">function</span> onImageLoadHandler<span style="color: #66cc66;">&#40;</span>event:ProgressEvent<span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span><span style="color: #66cc66;">&#123;</span>
				<span style="color: #0066CC;">this</span>.<span style="color: #006600;">progressbar</span>.<span style="color: #006600;">setProgress</span><span style="color: #66cc66;">&#40;</span>event.<span style="color: #0066CC;">bytesLoaded</span>,event.<span style="color: #0066CC;">bytesTotal</span><span style="color: #66cc66;">&#41;</span>;
			<span style="color: #66cc66;">&#125;</span>
			<span style="color: #0066CC;">private</span> <span style="color: #000000; font-weight: bold;">function</span> onImageCompleteHandler<span style="color: #66cc66;">&#40;</span><span style="color: #66cc66;">&#41;</span>:<span style="color: #0066CC;">void</span><span style="color: #66cc66;">&#123;</span>
				<span style="color: #0066CC;">this</span>.<span style="color: #006600;">progressbar</span>.<span style="color: #0066CC;">visible</span> = <span style="color: #000000; font-weight: bold;">false</span> ;
			<span style="color: #66cc66;">&#125;</span>
		<span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">&#93;</span><span style="color: #66cc66;">&gt;</span>
	<span style="color: #66cc66;">&lt;/</span>mx:Script<span style="color: #66cc66;">&gt;</span>
	<span style="color: #66cc66;">&lt;</span>mx:Image id=<span style="color: #ff0000;">&quot;img&quot;</span> progress=<span style="color: #ff0000;">&quot;onImageLoadHandler(event);&quot;</span> complete=<span style="color: #ff0000;">&quot;onImageCompleteHandler();&quot;</span><span style="color: #66cc66;">/&gt;</span>
	<span style="color: #66cc66;">&lt;</span>mx:ProgressBar id=<span style="color: #ff0000;">&quot;progressbar&quot;</span> mode=<span style="color: #ff0000;">&quot;manual&quot;</span> x=<span style="color: #ff0000;">&quot;{this.width/2 - this.progressbar.width/2}&quot;</span> y=<span style="color: #ff0000;">&quot;{this.height/2 - this.progressbar.height/2}&quot;</span> <span style="color: #0066CC;">visible</span>=<span style="color: #ff0000;">&quot;false&quot;</span> <span style="color: #0066CC;">width</span>=<span style="color: #ff0000;">&quot;200&quot;</span> <span style="color: #0066CC;">height</span>=<span style="color: #ff0000;">&quot;32&quot;</span><span style="color: #66cc66;">/&gt;</span>
<span style="color: #66cc66;">&lt;/</span>mx:Canvas<span style="color: #66cc66;">&gt;</span></pre></td></tr></table></div>
</p>



 :: 把這篇好文推到書籤網站與更多人分享吧 :: 


	<a rel="nofollow" target="_blank" href="http://funp.com/push/submit/add.php?url=http%3A%2F%2Fblog.corausir.org%2Fprograming%2Fausir-1094&s=%E5%B0%87%20FLEX%20%E7%9A%84%20IMAGE%20%E5%85%83%E4%BB%B6%E5%8A%A0%E4%B8%8A%E8%AE%80%E5%8F%96%E5%9C%96%E7%89%87%E6%99%82%E7%9A%84%E9%80%B2%E5%BA%A6%E9%A1%AF%E7%A4%BA&&via=tools" title="funp"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/funp.gif" title="funp" alt="funp" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.hemidemi.com/user_bookmark/new?title=%E5%B0%87%20FLEX%20%E7%9A%84%20IMAGE%20%E5%85%83%E4%BB%B6%E5%8A%A0%E4%B8%8A%E8%AE%80%E5%8F%96%E5%9C%96%E7%89%87%E6%99%82%E7%9A%84%E9%80%B2%E5%BA%A6%E9%A1%AF%E7%A4%BA&amp;url=http%3A%2F%2Fblog.corausir.org%2Fprograming%2Fausir-1094" title="Hemidemi"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/hemidemi.png" title="Hemidemi" alt="Hemidemi" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://tw.myweb2.search.yahoo.com/myresults/bookmarklet?u=http%3A%2F%2Fblog.corausir.org%2Fprograming%2Fausir-1094&ei=UTF-8&t=%E5%B0%87%20FLEX%20%E7%9A%84%20IMAGE%20%E5%85%83%E4%BB%B6%E5%8A%A0%E4%B8%8A%E8%AE%80%E5%8F%96%E5%9C%96%E7%89%87%E6%99%82%E7%9A%84%E9%80%B2%E5%BA%A6%E9%A1%AF%E7%A4%BA" title="YahooKimo"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/yahookimo.gif" title="YahooKimo" alt="YahooKimo" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=http%3A%2F%2Fblog.corausir.org%2Fprograming%2Fausir-1094&amp;title=%E5%B0%87%20FLEX%20%E7%9A%84%20IMAGE%20%E5%85%83%E4%BB%B6%E5%8A%A0%E4%B8%8A%E8%AE%80%E5%8F%96%E5%9C%96%E7%89%87%E6%99%82%E7%9A%84%E9%80%B2%E5%BA%A6%E9%A1%AF%E7%A4%BA" title="Google"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/googlebookmark.png" title="Google" alt="Google" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://bookmark.udn.com/add?f_%E5%B0%87%20FLEX%20%E7%9A%84%20IMAGE%20%E5%85%83%E4%BB%B6%E5%8A%A0%E4%B8%8A%E8%AE%80%E5%8F%96%E5%9C%96%E7%89%87%E6%99%82%E7%9A%84%E9%80%B2%E5%BA%A6%E9%A1%AF%E7%A4%BA=%E5%B0%87%20FLEX%20%E7%9A%84%20IMAGE%20%E5%85%83%E4%BB%B6%E5%8A%A0%E4%B8%8A%E8%AE%80%E5%8F%96%E5%9C%96%E7%89%87%E6%99%82%E7%9A%84%E9%80%B2%E5%BA%A6%E9%A1%AF%E7%A4%BA&f_URL=http%3A%2F%2Fblog.corausir.org%2Fprograming%2Fausir-1094" title="udn"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/udn.gif" title="udn" alt="udn" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.haohaoreport.com/submit.php?url=http%3A%2F%2Fblog.corausir.org%2Fprograming%2Fausir-1094&amp;title=%E5%B0%87%20FLEX%20%E7%9A%84%20IMAGE%20%E5%85%83%E4%BB%B6%E5%8A%A0%E4%B8%8A%E8%AE%80%E5%8F%96%E5%9C%96%E7%89%87%E6%99%82%E7%9A%84%E9%80%B2%E5%BA%A6%E9%A1%AF%E7%A4%BA" title="Haohao"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/haohao.png" title="Haohao" alt="Haohao" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="https://favorites.live.com/quickadd.aspx?marklet=1&amp;url=http%3A%2F%2Fblog.corausir.org%2Fprograming%2Fausir-1094&amp;title=%E5%B0%87%20FLEX%20%E7%9A%84%20IMAGE%20%E5%85%83%E4%BB%B6%E5%8A%A0%E4%B8%8A%E8%AE%80%E5%8F%96%E5%9C%96%E7%89%87%E6%99%82%E7%9A%84%E9%80%B2%E5%BA%A6%E9%A1%AF%E7%A4%BA" title="Live"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/live.png" title="Live" alt="Live" class="sociable-hovers" /></a>


<br/><br/>

<p>Related posts:<ol><li><a href='http://blog.corausir.org/programing/ausir-764' rel='bookmark' title='Permanent Link: FLEX 一次開啟多個檔案 &amp; 限制檔案類型'>FLEX 一次開啟多個檔案 &amp; 限制檔案類型</a> <small>上次開啟圖片放入 FLASH 中，我們實做的是一次讀取一個檔案，今天， ♣梅干桑♣ 也真宵貪阿，居然想要一次讀入七八張圖片，直接放入 FLASH 中，好吧，沒關係練功不分時間，這次不但一次讀取多張圖片，並且加入限制使用者只可以開啟影像類型的檔案，並且限定副檔名的類型。 首先我們來介紹限制檔案類型，我們用 FileFilter 來實作，並且使用陣列的方式，傳入...</small></li><li><a href='http://blog.corausir.org/programing/ausir-730' rel='bookmark' title='Permanent Link: FLEX 利用物件概念儲存圖片資料'>FLEX 利用物件概念儲存圖片資料</a> <small>今天真是練功日阿，♣梅干桑♣ 雖然得到可以在 FLASH 讀取到本地端的圖片的利器，但是卻被物件導向給搞死掉啦，這也不怪他啦，物件導向也不知道是哪個寫程式的人發明出來的東西，再說 AS2 的時代也沒有物件導向這東西，也是許多做視覺設計的人跳下海寫程式常常會給搞死的地方。 圖片來源 : Cora 設計的貓狗寵物食品包裝...</small></li><li><a href='http://blog.corausir.org/programing/ausir-725' rel='bookmark' title='Permanent Link: 在 FLASH 開啟本機圖檔。FLEX SDK 4 需要'>在 FLASH 開啟本機圖檔。FLEX SDK 4 需要</a> <small>FLASH PLAYER 因為安全性的問題，是不允許使用者在 FLASH PLAYER 開啟本地端的檔案來做修改的，不過 Flash player 10 稍微更改了這個設定，新版的...</small></li></ol></p>
<p>Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.</p>]]></content:encoded>
			<wfw:commentRss>http://blog.corausir.org/programing/ausir-1094/feed</wfw:commentRss>
		</item>
		<item>
		<title>3C 開箱文 - IPEVO 的新產品 Point 2 View</title>
		<link>http://blog.corausir.org/for-life-real-life/ausir-1080</link>
		<comments>http://blog.corausir.org/for-life-real-life/ausir-1080#comments</comments>
		<pubDate>Tue, 03 Nov 2009 10:40:26 +0000</pubDate>
		<dc:creator>Ausir</dc:creator>
		
		<category><![CDATA[生活記事]]></category>

		<category><![CDATA[雜七雜八]]></category>

		<category><![CDATA[IPEVO]]></category>

		<category><![CDATA[P2V]]></category>

		<category><![CDATA[webcam]]></category>

		<category><![CDATA[兩百萬畫素 CMOS]]></category>

		<category><![CDATA[開箱文]]></category>

		<guid isPermaLink="false">http://blog.corausir.org/for-life-real-life/ausir-1080</guid>
		<description><![CDATA[好難得我也可以拿到新的產品，來做簡易的開箱文，前一陣子有幸認識愛比的朋友，因此透露最近會有新的視訊機種會上市，所以引頸期盼，今天終於有中文版的實品，趕緊去愛比刷了一組回家測試。
 
 
拿到機子回家以後，發現官方網站也已經更新資料，因此有詳細的說明可以到 愛比科技 IPEVO 官方網站 做查詢，這邊我就先稍微打一下更改的資料吧。
產品規格

真實兩百萬畫素CMOS影像擷取能力
AF-C 連續自動對焦、AF-S 單點自動對焦模式
最近5公分微距拍攝
3倍數位變焦
影像更新頻率最高每秒30格(在640&#215;480解析度下)
USB 2.0 UVC (Universal Video Class) 介面即插即用
相容網路即時通訊、視訊軟體

不過最吸引我的還是那個腳座，因為之前在用 WEB CAM 的時候總覺得要拿著拍東西很麻煩，腳架又很難旋轉，如果用 POV 只拿在手上的話又不斷的手震，如果要拍東西還是得祭出相機。
這次就單純的開箱，照片拍得不是很好，因為相機也沒帶到公司來，只好借用人家的相機，以趕上這次的首發開箱文。
介紹一下產品規格
&#160;
&#160;背面有一些情境使用介紹
&#160;
&#160; 開箱啦~~! WEB CAM 一支，夾座一個，自由旋轉腳架一個 ( 很重很沉哩 )
&#160;
 裝上夾座的樣子，不過我應該不會這樣用
&#160;
這個腳座是 P2V 的重頭戲，可以自由調整方便的視角
&#160;
&#160;所以說也可以用這種幻燈片的拍攝方式
&#160;
&#160; 這次還多了 AF-C 的連續自動對焦模式
&#160;
 桑吉爾夫與小狐狸的愛戀故事
&#160;
驅動程式還沒安裝就玩起來了~
&#160;
&#160;這是 P2V 的實際拍攝照片 ( 還沒灌驅動 ) 解析度達到 1600 * 1200 不過暗處雜訊還是蠻多 





&#160;
難得有開箱文，又是新玩具，所以就急著拍拍給大家看，拍得不是很清楚的地方請大家見諒囉。



 :: 把這篇好文推到書籤網站與更多人分享吧 :: 


	
	
	
	
	
	
	




No related posts.
Related posts brought to you [...]


No related posts.

Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.]]></description>
			<content:encoded><![CDATA[<p>好難得我也可以拿到新的產品，來做簡易的開箱文，前一陣子有幸認識愛比的朋友，因此透露最近會有新的視訊機種會上市，所以引頸期盼，今天終於有中文版的實品，趕緊去愛比刷了一組回家測試。</p>
<p><a href="http://files.corausir.org/images/3CIPEVOPoint2View_10642/R0012938.jpg" rel="shadowbox[post-1080];player=img;" target="_blank"><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="R0012938" border="0" alt="R0012938" src="http://files.corausir.org/images/3CIPEVOPoint2View_10642/R0012938_thumb.jpg" width="404" height="304" /></a> </p>
<p> <span id="more-1080"></span>
<p>拿到機子回家以後，發現官方網站也已經更新資料，因此有詳細的說明可以到 <a href="http://www.ipevo.com.tw/products/pro_detail.php?id=75" target="_blank">愛比科技 IPEVO 官方網站</a> 做查詢，這邊我就先稍微打一下更改的資料吧。</p>
<p>產品規格</p>
<ul>
<li>真實兩百萬畫素CMOS影像擷取能力</li>
<li>AF-C 連續自動對焦、AF-S 單點自動對焦模式</li>
<li>最近5公分微距拍攝</li>
<li>3倍數位變焦</li>
<li>影像更新頻率最高每秒30格(在640&#215;480解析度下)</li>
<li>USB 2.0 UVC (Universal Video Class) 介面即插即用</li>
<li>相容網路即時通訊、視訊軟體</li>
</ul>
<p>不過最吸引我的還是那個腳座，因為之前在用 WEB CAM 的時候總覺得要拿著拍東西很麻煩，腳架又很難旋轉，如果用 POV 只拿在手上的話又不斷的手震，如果要拍東西還是得祭出相機。</p>
<p>這次就單純的開箱，照片拍得不是很好，因為相機也沒帶到公司來，只好借用人家的相機，以趕上這次的首發開箱文。</p>
<p align="center"><a href="http://files.corausir.org/images/3CIPEVOPoint2View_10642/R0012941.jpg" rel="shadowbox[post-1080];player=img;" target="_blank"><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="R0012941" border="0" alt="R0012941" src="http://files.corausir.org/images/3CIPEVOPoint2View_10642/R0012941_thumb.jpg" width="404" height="304" /></a>介紹一下產品規格</p>
<p align="center">&#160;</p>
<p align="center">&#160;<a href="http://files.corausir.org/images/3CIPEVOPoint2View_10642/R0012942.jpg" rel="shadowbox[post-1080];player=img;" target="_blank"><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="R0012942" border="0" alt="R0012942" src="http://files.corausir.org/images/3CIPEVOPoint2View_10642/R0012942_thumb.jpg" width="404" height="304" /></a>背面有一些情境使用介紹</p>
<p>&#160;</p>
<p align="center">&#160;<a href="http://files.corausir.org/images/3CIPEVOPoint2View_10642/R0012949.jpg" rel="shadowbox[post-1080];player=img;" target="_blank"><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="R0012949" border="0" alt="R0012949" src="http://files.corausir.org/images/3CIPEVOPoint2View_10642/R0012949_thumb.jpg" width="404" height="304" /></a> 開箱啦~~! WEB CAM 一支，夾座一個，自由旋轉腳架一個 ( 很重很沉哩 )</p>
<p>&#160;</p>
<p align="center"><a href="http://files.corausir.org/images/3CIPEVOPoint2View_10642/R0012950.jpg" rel="shadowbox[post-1080];player=img;" target="_blank"><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="R0012950" border="0" alt="R0012950" src="http://files.corausir.org/images/3CIPEVOPoint2View_10642/R0012950_thumb.jpg" width="404" height="304" /></a> 裝上夾座的樣子，不過我應該不會這樣用</p>
<p>&#160;</p>
<p align="center"><a href="http://files.corausir.org/images/3CIPEVOPoint2View_10642/R0012954.jpg" rel="shadowbox[post-1080];player=img;" target="_blank"><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="R0012954" border="0" alt="R0012954" src="http://files.corausir.org/images/3CIPEVOPoint2View_10642/R0012954_thumb.jpg" width="404" height="304" /></a>這個腳座是 P2V 的重頭戲，可以自由調整方便的視角</p>
<p>&#160;</p>
<p align="center">&#160;<a href="http://files.corausir.org/images/3CIPEVOPoint2View_10642/R0012955.jpg" rel="shadowbox[post-1080];player=img;" target="_blank"><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="R0012955" border="0" alt="R0012955" src="http://files.corausir.org/images/3CIPEVOPoint2View_10642/R0012955_thumb.jpg" width="404" height="304" /></a>所以說也可以用這種幻燈片的拍攝方式</p>
<p>&#160;</p>
<p align="center">&#160;<a href="http://files.corausir.org/images/3CIPEVOPoint2View_10642/R0012957.jpg" rel="shadowbox[post-1080];player=img;" target="_blank"><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="R0012957" border="0" alt="R0012957" src="http://files.corausir.org/images/3CIPEVOPoint2View_10642/R0012957_thumb.jpg" width="404" height="304" /></a> 這次還多了 AF-C 的連續自動對焦模式</p>
<p>&#160;</p>
<p align="center"><a href="http://files.corausir.org/images/3CIPEVOPoint2View_10642/R0012967.jpg" rel="shadowbox[post-1080];player=img;" target="_blank"><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="R0012967" border="0" alt="R0012967" src="http://files.corausir.org/images/3CIPEVOPoint2View_10642/R0012967_thumb.jpg" width="404" height="304" /></a> 桑吉爾夫與小狐狸的愛戀故事</p>
<p>&#160;</p>
<p align="center"><a href="http://files.corausir.org/images/3CIPEVOPoint2View_10642/R0012972.jpg" rel="shadowbox[post-1080];player=img;"><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="R0012972" border="0" alt="R0012972" src="http://files.corausir.org/images/3CIPEVOPoint2View_10642/R0012972_thumb.jpg" width="404" height="304" /></a>驅動程式還沒安裝就玩起來了~</p>
<p>&#160;</p>
<p align="center">&#160;<a href="http://files.corausir.org/images/3CIPEVOPoint2View_10642/004.jpg" rel="shadowbox[post-1080];player=img;" target="_blank"><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="圖片 004" border="0" alt="圖片 004" src="http://files.corausir.org/images/3CIPEVOPoint2View_10642/004_thumb.jpg" width="404" height="304" /></a>這是 P2V 的實際拍攝照片 ( 還沒灌驅動 ) 解析度達到 1600 * 1200 不過暗處雜訊還是蠻多 </p>
</p>
</p>
</p>
</p>
</p>
<p>&#160;</p>
<p>難得有開箱文，又是新玩具，所以就急著拍拍給大家看，拍得不是很清楚的地方請大家見諒囉。</p>



 :: 把這篇好文推到書籤網站與更多人分享吧 :: 


	<a rel="nofollow" target="_blank" href="http://funp.com/push/submit/add.php?url=http%3A%2F%2Fblog.corausir.org%2Ffor-life-real-life%2Fausir-1080&s=3C%20%E9%96%8B%E7%AE%B1%E6%96%87%20-%20IPEVO%20%E7%9A%84%E6%96%B0%E7%94%A2%E5%93%81%20Point%202%20View&&via=tools" title="funp"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/funp.gif" title="funp" alt="funp" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.hemidemi.com/user_bookmark/new?title=3C%20%E9%96%8B%E7%AE%B1%E6%96%87%20-%20IPEVO%20%E7%9A%84%E6%96%B0%E7%94%A2%E5%93%81%20Point%202%20View&amp;url=http%3A%2F%2Fblog.corausir.org%2Ffor-life-real-life%2Fausir-1080" title="Hemidemi"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/hemidemi.png" title="Hemidemi" alt="Hemidemi" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://tw.myweb2.search.yahoo.com/myresults/bookmarklet?u=http%3A%2F%2Fblog.corausir.org%2Ffor-life-real-life%2Fausir-1080&ei=UTF-8&t=3C%20%E9%96%8B%E7%AE%B1%E6%96%87%20-%20IPEVO%20%E7%9A%84%E6%96%B0%E7%94%A2%E5%93%81%20Point%202%20View" title="YahooKimo"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/yahookimo.gif" title="YahooKimo" alt="YahooKimo" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=http%3A%2F%2Fblog.corausir.org%2Ffor-life-real-life%2Fausir-1080&amp;title=3C%20%E9%96%8B%E7%AE%B1%E6%96%87%20-%20IPEVO%20%E7%9A%84%E6%96%B0%E7%94%A2%E5%93%81%20Point%202%20View" title="Google"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/googlebookmark.png" title="Google" alt="Google" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://bookmark.udn.com/add?f_3C%20%E9%96%8B%E7%AE%B1%E6%96%87%20-%20IPEVO%20%E7%9A%84%E6%96%B0%E7%94%A2%E5%93%81%20Point%202%20View=3C%20%E9%96%8B%E7%AE%B1%E6%96%87%20-%20IPEVO%20%E7%9A%84%E6%96%B0%E7%94%A2%E5%93%81%20Point%202%20View&f_URL=http%3A%2F%2Fblog.corausir.org%2Ffor-life-real-life%2Fausir-1080" title="udn"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/udn.gif" title="udn" alt="udn" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.haohaoreport.com/submit.php?url=http%3A%2F%2Fblog.corausir.org%2Ffor-life-real-life%2Fausir-1080&amp;title=3C%20%E9%96%8B%E7%AE%B1%E6%96%87%20-%20IPEVO%20%E7%9A%84%E6%96%B0%E7%94%A2%E5%93%81%20Point%202%20View" title="Haohao"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/haohao.png" title="Haohao" alt="Haohao" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="https://favorites.live.com/quickadd.aspx?marklet=1&amp;url=http%3A%2F%2Fblog.corausir.org%2Ffor-life-real-life%2Fausir-1080&amp;title=3C%20%E9%96%8B%E7%AE%B1%E6%96%87%20-%20IPEVO%20%E7%9A%84%E6%96%B0%E7%94%A2%E5%93%81%20Point%202%20View" title="Live"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/live.png" title="Live" alt="Live" class="sociable-hovers" /></a>


<br/><br/>

<p>No related posts.</p>
<p>Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.</p>]]></content:encoded>
			<wfw:commentRss>http://blog.corausir.org/for-life-real-life/ausir-1080/feed</wfw:commentRss>
		</item>
		<item>
		<title>Painter 11 童書插畫課程練習 [ 鬼屋大冒險 ]</title>
		<link>http://blog.corausir.org/graphic-design/ausir-1079</link>
		<comments>http://blog.corausir.org/graphic-design/ausir-1079#comments</comments>
		<pubDate>Mon, 02 Nov 2009 10:18:41 +0000</pubDate>
		<dc:creator>Ausir</dc:creator>
		
		<category><![CDATA[平面設計]]></category>

		<category><![CDATA[手繪插畫]]></category>

		<category><![CDATA[Painter]]></category>

		<category><![CDATA[Painter 11]]></category>

		<category><![CDATA[手繪板]]></category>

		<category><![CDATA[插畫]]></category>

		<category><![CDATA[萬聖節]]></category>

		<category><![CDATA[鬼屋大冒險]]></category>

		<guid isPermaLink="false">http://blog.corausir.org/graphic-design/ausir-1079</guid>
		<description><![CDATA[今天終於把手邊的案子整理得差不多了，CORA 最近又開始上 BO2 的 Painter 的課程，所以我這個題目 [ 鬼屋大冒險 ] 就延遲了快 3 個月才生出來，不過剛好也趕上這次的萬聖節。
 還沒完喔&#8230;. 點進去看整篇喔!!~~
 
小時候，已經忘了那是甚麼年紀，總是喜歡吵著父母親看鬼片，在那個年代，沒有第四台，更沒有 DVD ，一到了周末就是吵著爸媽去錄影帶出租店，看著琳瑯滿目的鬼片，心裡怕得要死，但是卻又想要租回家看。
還記得那時候最愛看的就是一眉道長林正英演的殭屍片，每次都會有那個看起來很衰的馬桶蓋頭演員，不然就是看有點帶著搞笑劇情的午馬演的片子，每次都窩在爸媽的身邊，看到十點多十一點要睡覺了，卻又不敢獨自回房間，只好窩在爸媽的床邊，用棉被做一套屬於自己的小床，又或者是刷牙洗臉看著鏡子，總覺得會看到殭屍。
現在的鬼片，剩下韓國與泰國，口味越來越重，也越來越血腥，到是也沒看以前港片那種有點恐怖又帶著詼諧的影片，不知道現在的 [ 鬼屋大探險 ] 在九年級的心裡，會是怎麼樣的探險呢&#8230;.
&#160;




 :: 把這篇好文推到書籤網站與更多人分享吧 :: 


	
	
	
	
	
	
	




No related posts.
Related posts brought to you by Yet Another Related Posts Plugin.


No related posts.

Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.]]></description>
			<content:encoded><![CDATA[<p>今天終於把手邊的案子整理得差不多了，CORA 最近又開始上 BO2 的 Painter 的課程，所以我這個題目 [ 鬼屋大冒險 ] 就延遲了快 3 個月才生出來，不過剛好也趕上這次的萬聖節。</p>
<p><a href="http://files.corausir.org/images/Painter11_10156/image.png" rel="shadowbox[post-1079];player=img;"><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="image" border="0" alt="image" src="http://files.corausir.org/images/Painter11_10156/image_thumb.png" width="476" height="568" /></a> <font color="#ff0000">還沒完喔&#8230;. 點進去看整篇喔!!~~</font></p>
<p> <span id="more-1079"></span>
<p>小時候，已經忘了那是甚麼年紀，總是喜歡吵著父母親看鬼片，在那個年代，沒有第四台，更沒有 DVD ，一到了周末就是吵著爸媽去錄影帶出租店，看著琳瑯滿目的鬼片，心裡怕得要死，但是卻又想要租回家看。</p>
<p>還記得那時候最愛看的就是一眉道長林正英演的殭屍片，每次都會有那個看起來很衰的馬桶蓋頭演員，不然就是看有點帶著搞笑劇情的午馬演的片子，每次都窩在爸媽的身邊，看到十點多十一點要睡覺了，卻又不敢獨自回房間，只好窩在爸媽的床邊，用棉被做一套屬於自己的小床，又或者是刷牙洗臉看著鏡子，總覺得會看到殭屍。</p>
<p>現在的鬼片，剩下韓國與泰國，口味越來越重，也越來越血腥，到是也沒看以前港片那種有點恐怖又帶著詼諧的影片，不知道現在的 [ 鬼屋大探險 ] 在九年級的心裡，會是怎麼樣的探險呢&#8230;.</p>
<p>&#160;</p>
<p><a href="http://files.corausir.org/images/Painter11_10156/10311.jpg" rel="shadowbox[post-1079];player=img;"><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="1031-1" border="0" alt="1031-1" src="http://files.corausir.org/images/Painter11_10156/10311_thumb.jpg" width="404" height="705" /></a></p>



 :: 把這篇好文推到書籤網站與更多人分享吧 :: 


	<a rel="nofollow" target="_blank" href="http://funp.com/push/submit/add.php?url=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fausir-1079&s=Painter%2011%20%E7%AB%A5%E6%9B%B8%E6%8F%92%E7%95%AB%E8%AA%B2%E7%A8%8B%E7%B7%B4%E7%BF%92%20%5B%20%E9%AC%BC%E5%B1%8B%E5%A4%A7%E5%86%92%E9%9A%AA%20%5D&&via=tools" title="funp"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/funp.gif" title="funp" alt="funp" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.hemidemi.com/user_bookmark/new?title=Painter%2011%20%E7%AB%A5%E6%9B%B8%E6%8F%92%E7%95%AB%E8%AA%B2%E7%A8%8B%E7%B7%B4%E7%BF%92%20%5B%20%E9%AC%BC%E5%B1%8B%E5%A4%A7%E5%86%92%E9%9A%AA%20%5D&amp;url=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fausir-1079" title="Hemidemi"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/hemidemi.png" title="Hemidemi" alt="Hemidemi" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://tw.myweb2.search.yahoo.com/myresults/bookmarklet?u=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fausir-1079&ei=UTF-8&t=Painter%2011%20%E7%AB%A5%E6%9B%B8%E6%8F%92%E7%95%AB%E8%AA%B2%E7%A8%8B%E7%B7%B4%E7%BF%92%20%5B%20%E9%AC%BC%E5%B1%8B%E5%A4%A7%E5%86%92%E9%9A%AA%20%5D" title="YahooKimo"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/yahookimo.gif" title="YahooKimo" alt="YahooKimo" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fausir-1079&amp;title=Painter%2011%20%E7%AB%A5%E6%9B%B8%E6%8F%92%E7%95%AB%E8%AA%B2%E7%A8%8B%E7%B7%B4%E7%BF%92%20%5B%20%E9%AC%BC%E5%B1%8B%E5%A4%A7%E5%86%92%E9%9A%AA%20%5D" title="Google"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/googlebookmark.png" title="Google" alt="Google" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://bookmark.udn.com/add?f_Painter%2011%20%E7%AB%A5%E6%9B%B8%E6%8F%92%E7%95%AB%E8%AA%B2%E7%A8%8B%E7%B7%B4%E7%BF%92%20%5B%20%E9%AC%BC%E5%B1%8B%E5%A4%A7%E5%86%92%E9%9A%AA%20%5D=Painter%2011%20%E7%AB%A5%E6%9B%B8%E6%8F%92%E7%95%AB%E8%AA%B2%E7%A8%8B%E7%B7%B4%E7%BF%92%20%5B%20%E9%AC%BC%E5%B1%8B%E5%A4%A7%E5%86%92%E9%9A%AA%20%5D&f_URL=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fausir-1079" title="udn"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/udn.gif" title="udn" alt="udn" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.haohaoreport.com/submit.php?url=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fausir-1079&amp;title=Painter%2011%20%E7%AB%A5%E6%9B%B8%E6%8F%92%E7%95%AB%E8%AA%B2%E7%A8%8B%E7%B7%B4%E7%BF%92%20%5B%20%E9%AC%BC%E5%B1%8B%E5%A4%A7%E5%86%92%E9%9A%AA%20%5D" title="Haohao"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/haohao.png" title="Haohao" alt="Haohao" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="https://favorites.live.com/quickadd.aspx?marklet=1&amp;url=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fausir-1079&amp;title=Painter%2011%20%E7%AB%A5%E6%9B%B8%E6%8F%92%E7%95%AB%E8%AA%B2%E7%A8%8B%E7%B7%B4%E7%BF%92%20%5B%20%E9%AC%BC%E5%B1%8B%E5%A4%A7%E5%86%92%E9%9A%AA%20%5D" title="Live"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/live.png" title="Live" alt="Live" class="sociable-hovers" /></a>


<br/><br/>

<p>No related posts.</p>
<p>Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.</p>]]></content:encoded>
			<wfw:commentRss>http://blog.corausir.org/graphic-design/ausir-1079/feed</wfw:commentRss>
		</item>
		<item>
		<title>來去留學囉&#8230;&#8230;「紐約教育家學習機構」LOGO設計</title>
		<link>http://blog.corausir.org/graphic-design/cora-1077</link>
		<comments>http://blog.corausir.org/graphic-design/cora-1077#comments</comments>
		<pubDate>Thu, 29 Oct 2009 06:22:45 +0000</pubDate>
		<dc:creator>Cora</dc:creator>
		
		<category><![CDATA[品牌設計]]></category>

		<category><![CDATA[平面設計]]></category>

		<category><![CDATA[logo設計]]></category>

		<category><![CDATA[中英筆譯口譯]]></category>

		<category><![CDATA[名片設計]]></category>

		<category><![CDATA[多元英文課程]]></category>

		<category><![CDATA[留遊學代辦諮詢]]></category>

		<category><![CDATA[紐約教育家學習機構]]></category>

		<guid isPermaLink="false">http://blog.corausir.org/graphic-design/cora-1077</guid>
		<description><![CDATA[最近BLOG沉寂已久，AUSIR都說我們版太久沒更新了，最近因為搬辦公室還有接了個超趕的案子，我們倆快爆肝了，AUSIR昨天還忙到凌常五點多才回到家，真是辛苦了。(這時我已經睡完一輪了)
接下來會好好的在來經營BLOG一翻，今天要PO的案子其實已經結案一陣子了，客戶是位於高雄的教育機構，主要以留遊學代辦諮詢 ‧ 中英筆譯口譯 ‧ 多元英文課程這些內容。
&#160;

&#160;
&#160;
 
&#160;
因為業主「紐約教育家學習機構」的名稱，所以在設計的過程有部分的方向是想呈現有教育機構的方向，而最後也是選上這款我所PO上來的LOGO。
&#160;
設計理念:
以火炬為主要圖像，並以徽章的概念去設計出有學院風格的LOGO，讓LOGO更能顯出「紐約教育家學習機構」是教育相關的機構，而具學院的LOGO更能出顯出教育的專業精神。 
&#160;
&#160;
&#160;

&#160;
名片設計:
 
&#160;
&#160;
其中一款LOGO，因為業主也很喜歡，所以轉成之後的徽章

&#160; 
&#160;
門面設計:
 
&#160;
最近很有感觸的是每次都因為工作會遇到不同行業的業主，很幸運都遇到很好的客戶，我想這也是這工作吸引人的地方，做的不只是工作，而是跟朋友的經營了。



 :: 把這篇好文推到書籤網站與更多人分享吧 :: 


	
	
	
	
	
	
	




No related posts.
Related posts brought to you by Yet Another Related Posts Plugin.


No related posts.

Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.]]></description>
			<content:encoded><![CDATA[<p>最近BLOG沉寂已久，AUSIR都說我們版太久沒更新了，最近因為搬辦公室還有接了個超趕的案子，我們倆快爆肝了，AUSIR昨天還忙到凌常五點多才回到家，真是辛苦了。(這時我已經睡完一輪了)</p>
<p>接下來會好好的在來經營BLOG一翻，今天要PO的案子其實已經結案一陣子了，客戶是位於高雄的教育機構，主要以留遊學代辦諮詢 ‧ 中英筆譯口譯 ‧ 多元英文課程這些內容。</p>
<p>&#160;</p>
<p><a href="http://files.corausir.org/images/LOGO_CA17/10294.jpg" rel="shadowbox[post-1077];player=img;"><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="10294" border="0" alt="10294" src="http://files.corausir.org/images/LOGO_CA17/10294_thumb.jpg" width="350" height="283" /></a></p>
<p>&#160;</p>
<p>&#160;</p>
<p> <span id="more-1077"></span>
<p>&#160;</p>
<p>因為業主「紐約教育家學習機構」的名稱，所以在設計的過程有部分的方向是想呈現有教育機構的方向，而最後也是選上這款我所PO上來的LOGO。</p>
<p>&#160;</p>
<p>設計理念:</p>
<p>以火炬為主要圖像，並以徽章的概念去設計出有學院風格的LOGO，讓LOGO更能顯出「紐約教育家學習機構」是教育相關的機構，而具學院的LOGO更能出顯出教育的專業精神。 </p>
<p>&#160;</p>
<p>&#160;</p>
<p>&#160;</p>
<p><a href="http://files.corausir.org/images/LOGO_CA17/10291.jpg" rel="shadowbox[post-1077];player=img;"><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="10291" border="0" alt="10291" src="http://files.corausir.org/images/LOGO_CA17/10291_thumb.jpg" width="350" height="262" /></a></p>
<p>&#160;</p>
<p>名片設計:</p>
<p><a href="http://files.corausir.org/images/LOGO_CA17/483509574.jpg" rel="shadowbox[post-1077];player=img;"><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="483509574" border="0" alt="483509574" src="http://files.corausir.org/images/LOGO_CA17/483509574_thumb.jpg" width="350" height="233" /></a> </p>
<p>&#160;</p>
<p>&#160;</p>
<p>其中一款LOGO，因為業主也很喜歡，所以轉成之後的徽章</p>
<p><a href="http://files.corausir.org/images/LOGO_CA17/10292.jpg" rel="shadowbox[post-1077];player=img;"><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="10292" border="0" alt="10292" src="http://files.corausir.org/images/LOGO_CA17/10292_thumb.jpg" width="350" height="262" /></a></p>
<p>&#160; </p>
<p>&#160;</p>
<p>門面設計:</p>
<p><a href="http://files.corausir.org/images/LOGO_CA17/10293.jpg" rel="shadowbox[post-1077];player=img;"><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="10293" border="0" alt="10293" src="http://files.corausir.org/images/LOGO_CA17/10293_thumb.jpg" width="350" height="416" /></a> </p>
<p>&#160;</p>
<p>最近很有感觸的是每次都因為工作會遇到不同行業的業主，很幸運都遇到很好的客戶，我想這也是這工作吸引人的地方，做的不只是工作，而是跟朋友的經營了。</p>



 :: 把這篇好文推到書籤網站與更多人分享吧 :: 


	<a rel="nofollow" target="_blank" href="http://funp.com/push/submit/add.php?url=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fcora-1077&s=%E4%BE%86%E5%8E%BB%E7%95%99%E5%AD%B8%E5%9B%89%26hellip%3B%26hellip%3B%E3%80%8C%E7%B4%90%E7%B4%84%E6%95%99%E8%82%B2%E5%AE%B6%E5%AD%B8%E7%BF%92%E6%A9%9F%E6%A7%8B%E3%80%8DLOGO%E8%A8%AD%E8%A8%88&&via=tools" title="funp"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/funp.gif" title="funp" alt="funp" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.hemidemi.com/user_bookmark/new?title=%E4%BE%86%E5%8E%BB%E7%95%99%E5%AD%B8%E5%9B%89%26hellip%3B%26hellip%3B%E3%80%8C%E7%B4%90%E7%B4%84%E6%95%99%E8%82%B2%E5%AE%B6%E5%AD%B8%E7%BF%92%E6%A9%9F%E6%A7%8B%E3%80%8DLOGO%E8%A8%AD%E8%A8%88&amp;url=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fcora-1077" title="Hemidemi"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/hemidemi.png" title="Hemidemi" alt="Hemidemi" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://tw.myweb2.search.yahoo.com/myresults/bookmarklet?u=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fcora-1077&ei=UTF-8&t=%E4%BE%86%E5%8E%BB%E7%95%99%E5%AD%B8%E5%9B%89%26hellip%3B%26hellip%3B%E3%80%8C%E7%B4%90%E7%B4%84%E6%95%99%E8%82%B2%E5%AE%B6%E5%AD%B8%E7%BF%92%E6%A9%9F%E6%A7%8B%E3%80%8DLOGO%E8%A8%AD%E8%A8%88" title="YahooKimo"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/yahookimo.gif" title="YahooKimo" alt="YahooKimo" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.google.com/bookmarks/mark?op=edit&amp;bkmk=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fcora-1077&amp;title=%E4%BE%86%E5%8E%BB%E7%95%99%E5%AD%B8%E5%9B%89%26hellip%3B%26hellip%3B%E3%80%8C%E7%B4%90%E7%B4%84%E6%95%99%E8%82%B2%E5%AE%B6%E5%AD%B8%E7%BF%92%E6%A9%9F%E6%A7%8B%E3%80%8DLOGO%E8%A8%AD%E8%A8%88" title="Google"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/googlebookmark.png" title="Google" alt="Google" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://bookmark.udn.com/add?f_%E4%BE%86%E5%8E%BB%E7%95%99%E5%AD%B8%E5%9B%89%26hellip%3B%26hellip%3B%E3%80%8C%E7%B4%90%E7%B4%84%E6%95%99%E8%82%B2%E5%AE%B6%E5%AD%B8%E7%BF%92%E6%A9%9F%E6%A7%8B%E3%80%8DLOGO%E8%A8%AD%E8%A8%88=%E4%BE%86%E5%8E%BB%E7%95%99%E5%AD%B8%E5%9B%89%26hellip%3B%26hellip%3B%E3%80%8C%E7%B4%90%E7%B4%84%E6%95%99%E8%82%B2%E5%AE%B6%E5%AD%B8%E7%BF%92%E6%A9%9F%E6%A7%8B%E3%80%8DLOGO%E8%A8%AD%E8%A8%88&f_URL=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fcora-1077" title="udn"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/udn.gif" title="udn" alt="udn" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="http://www.haohaoreport.com/submit.php?url=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fcora-1077&amp;title=%E4%BE%86%E5%8E%BB%E7%95%99%E5%AD%B8%E5%9B%89%26hellip%3B%26hellip%3B%E3%80%8C%E7%B4%90%E7%B4%84%E6%95%99%E8%82%B2%E5%AE%B6%E5%AD%B8%E7%BF%92%E6%A9%9F%E6%A7%8B%E3%80%8DLOGO%E8%A8%AD%E8%A8%88" title="Haohao"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/haohao.png" title="Haohao" alt="Haohao" class="sociable-hovers" /></a>
	<a rel="nofollow" target="_blank" href="https://favorites.live.com/quickadd.aspx?marklet=1&amp;url=http%3A%2F%2Fblog.corausir.org%2Fgraphic-design%2Fcora-1077&amp;title=%E4%BE%86%E5%8E%BB%E7%95%99%E5%AD%B8%E5%9B%89%26hellip%3B%26hellip%3B%E3%80%8C%E7%B4%90%E7%B4%84%E6%95%99%E8%82%B2%E5%AE%B6%E5%AD%B8%E7%BF%92%E6%A9%9F%E6%A7%8B%E3%80%8DLOGO%E8%A8%AD%E8%A8%88" title="Live"><img src="http://blog.corausir.org/wp-content/plugins/sociable/images/live.png" title="Live" alt="Live" class="sociable-hovers" /></a>


<br/><br/>

<p>No related posts.</p>
<p>Related posts brought to you by <a href='http://mitcho.com/code/yarpp/'>Yet Another Related Posts Plugin</a>.</p>]]></content:encoded>
			<wfw:commentRss>http://blog.corausir.org/graphic-design/cora-1077/feed</wfw:commentRss>
		</item>
	</channel>
</rss>
