| 01 | <html><head><title>第一個PHP網頁</title></head><body> |
| 02 | <? |
| 03 | echo "你好！"; |
| 04 | ?></body></html> |
【圖1 第一個執行的PHP網頁】
開啟時需使用http://方式，所以網頁需放在網頁伺服器指定的位置，而不能放在我的文件夾或桌面。若使用開啟舊檔的方式，您會看到語法，而不是執行的結果，這是為什麼呢？因為PHP需經過Web Server解析後才會送到瀏覽器上顯示。很高興，您寫了第一個PHP網頁！這個網頁內，您看到什麼不同的地方呢？
+Read more 
常常在網頁頁面上看到的一種效果－當滑鼠滑過（onmouseover）時，會變換成另一張圖片，這裡我們會利用字串（string）處理中的一個方法（replace）來製作。
首先，在此範例中，我將第一張圖命名為logo.png，將要替換的圖命名為logo-hover.png；再者，我使用了jQuery這個framework以迅速找到頁面的物件，所以在HTML中得先載入這隻js（可以先到jQuery官網下載min版本）。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-tw" lang="zh-tw"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>js string</title> <script src="script/jquery.js" type="text/javascript"></script> </head> …
接著寫入基本的html code。
<body> <ul class="gallery"> <li><a href="http://www.google.com.tw/" title="google search engine"><img src="images/logo.png" alt="logo" /></a></li> <li><a href="http://www.google.com.tw/" title="google search engine"><img src="images/logo.png" alt="logo" /></a></li> ... <li><a href="http://www.google.com.tw/" title="google search engine"><img src="images/logo.png" alt="logo" /></a></li> </ul> </body> </html>
及簡單的css style（請參考以下code，不給予並不影響js運作）。
<style type="text/css">
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
}
</style>
以上只是準備工作而已，接下來才是這次主要js的內容。
<script type="text/javascript">
$(document).ready(function(){
$("ul.gallery img").mouseover(function(){
var imgLink = $(this).attr("src");
imgLink = imgLink.replace(".png","-hover.png");
$(this).attr("src",imgLink);
});
$("ul.gallery img").mouseout(function(){
var imgLink = $(this).attr("src");
imgLink = imgLink.replace("-hover.png",".png");
$(this).attr("src",imgLink);
});
});
</script>
首先，$(document).ready(function(){})相當於js中的window.onload事件，$(“ul.gallery img”)是jQuery的selector用法，和css的selector差不多，意指找出ul且class名稱為gallery底下所有的img；接下來，依據滑鼠滑入滑出，所以我們必須分成上下二個事件，
底下提供了完整的code下載。
DOWNLOAD！