<?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/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>網頁設計,網路行銷新知&#187; BUSINESSWING &#8211; 整合提供網頁設計,網站企劃,網路行銷等新知</title>
	<atom:link href="http://businesswing.net/tag/%e8%ae%8a%e6%9b%b4%e5%9c%96%e7%89%87/feed/" rel="self" type="application/rss+xml" />
	<link>http://businesswing.net</link>
	<description>提供的不只是網頁設計,網頁製作,網頁企劃,更重視網頁優化(SEO)及網頁行銷概念的注入</description>
	<lastBuildDate>Fri, 20 Aug 2010 09:25:58 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=abc</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>[ Javascript ] 變更圖片</title>
		<link>http://businesswing.net/webdesign/javascript-changepics/?utm_source=rss&amp;utm_medium=rss&amp;utm_campaign=javascript-changepics</link>
		<comments>http://businesswing.net/webdesign/javascript-changepics/#comments</comments>
		<pubDate>Mon, 09 Nov 2009 11:19:06 +0000</pubDate>
		<dc:creator>hikaru</dc:creator>
				<category><![CDATA[網頁設計]]></category>
		<category><![CDATA[CSS]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[web design]]></category>
		<category><![CDATA[變更圖片]]></category>

		<guid isPermaLink="false">http://businesswing.net/?p=569</guid>
		<description><![CDATA[常常在網頁頁面上看到的一種效果－當滑鼠滑過（onmouseover）時，會變換成另一張圖片，這裡我們會利用字串（string）處理中的一個方法（replace）來製作。
		首先，在此範例中，我將第一張圖命名為logo.png，將要替換的圖命名為logo-hover.png；再者，我使用了jQuery這個framework以迅速找到頁面的物件，所以在HTML中得先載入這隻js（可以先到jQuery官網下載min版本）。



&#60;!DOCTYPE html PUBLIC &#34;-//W3C//DTD XHTML 1.0 Strict//EN&#34; &#34;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&#34;&#62;
&#60;html xmlns=&#34;http://www.w3.org/1999/xhtml&#34; xml:lang=&#34;zh-tw&#34; lang=&#34;zh-tw&#34;&#62;
&#60;head&#62;
&#60;meta http-equiv=&#34;Content-Type&#34; content=&#34;text/html; charset=utf-8&#34; /&#62;
&#60;title&#62;js string&#60;/title&#62;
&#60;script src=&#34;script/jquery.js&#34; type=&#34;text/javascript&#34;&#62;&#60;/script&#62;
&#60;/head&#62;
…


接著寫入基本的html code。

HTML


&#60;body&#62;
		&#60;ul class=&#34;gallery&#34;&#62;
			&#60;li&#62;&#60;a href=&#34;http://www.google.com.tw/&#34; title=&#34;google search engine&#34;&#62;&#60;img src=&#34;images/logo.png&#34; alt=&#34;logo&#34; /&#62;&#60;/a&#62;&#60;/li&#62;
			&#60;li&#62;&#60;a href=&#34;http://www.google.com.tw/&#34; title=&#34;google search engine&#34;&#62;&#60;img src=&#34;images/logo.png&#34; alt=&#34;logo&#34; /&#62;&#60;/a&#62;&#60;/li&#62;
			&#8230;
			&#60;li&#62;&#60;a href=&#34;http://www.google.com.tw/&#34; title=&#34;google search engine&#34;&#62;&#60;img src=&#34;images/logo.png&#34; alt=&#34;logo&#34; /&#62;&#60;/a&#62;&#60;/li&#62;
		&#60;/ul&#62;
	&#60;/body&#62;
&#60;/html&#62;


及簡單的css style（請參考以下code，不給予並不影響js運作）。

CSS


&#60;style type=&#34;text/css&#34;&#62;
	body {
		padding-top:4em
	}
	.gallery {
		width:60%;
		min-width:800px;
		margin:auto;
		padding:1em 0 2em;
		border:4px dashed #666;
		text-align:center;
		list-style:none
	}
	.gallery li {
		display:inline-block;
		margin-top:1em;
		vertical-align:top
	}
	.gallery img {
		border:0;
		vertical-align:bottom
	}
&#60;/style&#62;


以上只是準備工作而已，接下來才是這次主要js的內容。

Javascript


&#60;script type=&#34;text/javascript&#34;&#62;
	$(document).ready(function(){
		$(&#34;ul.gallery img&#34;).mouseover(function(){
			var [...]]]></description>
		<wfw:commentRss>http://businesswing.net/webdesign/javascript-changepics/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
