<?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>เทคนิคการเขียนเว็บ เขียนโปรแกรม php คัดมา เน้น ๆ : webshowpow.com &#187; link</title>
	<atom:link href="http://www.webshowpow.com/tag/link/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.webshowpow.com</link>
	<description>เทคนิคการเขียนเว็บ เขียนโปรแกรม php คัดมา เน้น ๆ</description>
	<lastBuildDate>Thu, 01 Dec 2011 10:20:38 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.1.2</generator>
		<item>
		<title>CSS Background image link</title>
		<link>http://www.webshowpow.com/css-background-image-link/</link>
		<comments>http://www.webshowpow.com/css-background-image-link/#comments</comments>
		<pubDate>Wed, 25 May 2011 11:34:15 +0000</pubDate>
		<dc:creator>แว่นตก</dc:creator>
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Tips]]></category>
		<category><![CDATA[background]]></category>
		<category><![CDATA[css]]></category>
		<category><![CDATA[image]]></category>
		<category><![CDATA[link]]></category>
		<category><![CDATA[xhtml]]></category>

		<guid isPermaLink="false">http://www.webshowpow.com/?p=36</guid>
		<description><![CDATA[ในการทำให้รูปภาพสามารถ link ได้ ถ้าเขียนโดย xhtml ก็จะเขียนในลักษณะนี้ 1 &#60;a href=&#34;urllink.html&#34;&#62;&#60;img src=&#34;logo.jpg&#34; alt=&#34;&#34; border=&#34;0&#34; /&#62;&#60;/a&#62; แต่ถ้าเราเขียนในรูปแบบของ css เรามักจะกำหนดรูปภาพไปอยู่ในส่วนของ css ซึ่งทำให้เราไม่ได้เขียนให้รูปภาพ link ได้ในรูปแบบเดิมได้ (รูปแบบ xhtml) แต่ถ้าจะให้รูปภาพ สามารถ link ได้ ขอแนะนำ 1 วิธีการ โดยทำตามนี้ [...]]]></description>
			<content:encoded><![CDATA[<p>ในการทำให้รูปภาพสามารถ link ได้ ถ้าเขียนโดย xhtml ก็จะเขียนในลักษณะนี้</p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
</pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;urllink.html&quot;</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">img</span> <span style="color: #000066;">src</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;logo.jpg&quot;</span> <span style="color: #000066;">alt</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;&quot;</span> <span style="color: #000066;">border</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;0&quot;</span> <span style="color: #66cc66;">/</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span></pre></td></tr></table></div>

<p>แต่ถ้าเราเขียนในรูปแบบของ css เรามักจะกำหนดรูปภาพไปอยู่ในส่วนของ css<br />
ซึ่งทำให้เราไม่ได้เขียนให้รูปภาพ link ได้ในรูปแบบเดิมได้ (รูปแบบ xhtml)<br />
แต่ถ้าจะให้รูปภาพ สามารถ link ได้ ขอแนะนำ 1 วิธีการ โดยทำตามนี้</p>
<p><strong>ส่วนของ css</strong></p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
4
5
6
7
8
9
10
</pre></td><td class="code"><pre class="css" style="font-family:monospace;"> &lt;style type<span style="color: #00AA00;">=</span><span style="color: #ff0000;">&quot;text/css&quot;</span><span style="color: #00AA00;">&gt;</span>
<span style="color: #cc00cc;">#logolink</span> <span style="color: #00AA00;">&#123;</span>
<span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">block</span><span style="color: #00AA00;">;</span>
<span style="color: #000000; font-weight: bold;">height</span><span style="color: #00AA00;">:</span> <span style="color: #933;">100px</span><span style="color: #00AA00;">;</span>
<span style="color: #000000; font-weight: bold;">width</span><span style="color: #00AA00;">:</span> <span style="color: #933;">200px</span><span style="color: #00AA00;">;</span>
<span style="color: #000000; font-weight: bold;">background-image</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">url</span><span style="color: #00AA00;">&#40;</span><span style="color: #ff0000; font-style: italic;">logo.jpg</span><span style="color: #00AA00;">&#41;</span><span style="color: #00AA00;">;</span>
<span style="color: #00AA00;">&#125;</span>
&nbsp;
<span style="color: #cc00cc;">#bglink</span> span <span style="color: #00AA00;">&#123;</span> <span style="color: #000000; font-weight: bold;">display</span><span style="color: #00AA00;">:</span> <span style="color: #993333;">none</span><span style="color: #00AA00;">;</span> <span style="color: #00AA00;">&#125;</span>
&lt;/style<span style="color: #00AA00;">&gt;</span></pre></td></tr></table></div>

<p><strong>ส่วนวิธีเรียกใช้ก็คือ</strong></p>

<div class="wp_syntax"><table><tr><td class="line_numbers"><pre>1
2
3
</pre></td><td class="code"><pre class="html4strict" style="font-family:monospace;"><span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">p</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;logolink&quot;</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #000000; font-weight: bold;">a</span> <span style="color: #000066;">id</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;bglink&quot;</span> <span style="color: #000066;">href</span><span style="color: #66cc66;">=</span><span style="color: #ff0000;">&quot;urllink.html&quot;</span>&gt;&lt;<span style="color: #000000; font-weight: bold;">span</span>&gt;</span>Click my logo<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">span</span>&gt;&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">a</span>&gt;</span>
<span style="color: #009900;">&lt;<span style="color: #66cc66;">/</span><span style="color: #000000; font-weight: bold;">p</span>&gt;</span></pre></td></tr></table></div>

<p>&nbsp;</p>
<p>ขอขอบคุณ </p>
<p>http://www.webdeveloper.com/forum/showthread.php?t=188503</p>
<p>&nbsp;</p>
<blockquote><p>หวังว่าคงทำกันได้นะครับ</p></blockquote>
<p>&nbsp;</p>
]]></content:encoded>
			<wfw:commentRss>http://www.webshowpow.com/css-background-image-link/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

