<?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>Wed, 06 Jul 2011 09:12:09 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=</generator>
		<item>
		<title>[ Javascript ] 變更圖片</title>
		<link>http://businesswing.net/webdesign/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版本）。 接著寫入基本的html code。 HTML 及簡單的css style（請參考以下code，不給予並不影響js運作）。 CSS 以上只是準備工作而已，接下來才是這次主要js的內容。 Javascript 首先，$(document).ready(function(){})相當於js中的window.onload事件，$(“ul.gallery img”)是jQuery的selector用法，和css的selector差不多，意指找出ul且class名稱為gallery底下所有的img；接下來，依據滑鼠滑入滑出，所以我們必須分成上下二個事件， mouseover（滑入） 我命名了一im,gLink的變名，$(this)即取得我們滑過的該圖片，$(this).attr(“src”)即取得該圖片的路徑，之後將圖片的路徑傳給了imgLink。 imgLink.replace(“.png”,”-hover.png”) 這裡用到了字串（string）處理中的replace()，若imgLink中有&#8217;.png&#8217;的字串，以&#8217;-hover.png&#8217;取代，這也就是為什麼在一開始要將圖片以此規則命名，若有需要請自行更改此命名，取代完之後再將值回傳給imgLink。 接著，再將值指定到圖片路徑。 mouseout（滑出） 和mouseover沒有什麼太大的差異，重點在於replace()的地方將檔名再互換回來就可以了，所以就不再多述了。 底下提供了完整的code下載。 DOWNLOAD！]]></description>
		<wfw:commentRss>http://businesswing.net/webdesign/javascript-changepics/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

