不知道如何配色嗎? 這是一個協助您配色的實用網站, 由Petr Stanicek, 一位來自捷克的網頁設計師製作而成, 從暖色系到冷色系, 各種搭配組合都幫您建議好了!!任何人都可方便的來使用並挑選自己想要的網頁配色。
+Read more
- Businesswing Design BLOG
- Assist to join the global market.
- works
- Link 連結
- godaddy01
- godaddy02
- godaddy03
0 comments
常常在網頁頁面上看到的一種效果－當滑鼠滑過（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。
HTML
<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運作）。
CSS
<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的內容。
Javascript
<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；接下來，依據滑鼠滑入滑出，所以我們必須分成上下二個事件，
- mouseover（滑入）
- 我命名了一im,gLink的變名，$(this)即取得我們滑過的該圖片，$(this).attr(“src”)即取得該圖片的路徑，之後將圖片的路徑傳給了imgLink。
- imgLink.replace(“.png”,”-hover.png”) 這裡用到了字串（string）處理中的replace()，若imgLink中有’.png’的字串，以’-hover.png’取代，這也就是為什麼在一開始要將圖片以此規則命名，若有需要請自行更改此命名，取代完之後再將值回傳給imgLink。
- 接著，再將值指定到圖片路徑。
- mouseout（滑出）
- 和mouseover沒有什麼太大的差異，重點在於replace()的地方將檔名再互換回來就可以了，所以就不再多述了。
底下提供了完整的code下載。
DOWNLOAD！
Cascading Style Sheets（層疊樣式表／串樣式列表），簡寫為CSS，由W3C定義和維護的標準，一種用來為結構化文檔（如HTML文檔或XML應用）添加樣式（字體、間距和顏色等）的計算機語言。目前最新版本是CSS 2.1，為W3C的候選推薦標準。下一版本CSS 3仍然在開發過程中。
一個網頁的讀者和作者都可以使用CSS來決定文件的顏色、字體、排版等顯示特性。CSS最主要的目的是將文件的結構（用HTML或其他相關的語言寫的）與文件的顯示（CSS）分隔開來。這個分隔有許多好處：
- 文件的可讀性被加強
- 文件的結構更加靈活
- 作者和讀者可以自己決定文件的顯示
- 文件的結構簡化了。
CSS還可以使用其他的顯示方式，比如聲音（假如瀏覽器有閱讀功能的話）或給盲人用的感受裝置。此外CSS還可以與XHTML、XML或其他結構文件一起使用，唯一條件是顯示這種文件的瀏覽器裝備了接受CSS的功能。
HTML文件中的每一個class或id都可以有自己的顯示特徵，而且每一個沒有id特性的HTML結構也可以有自己的顯示特徵。這些結構有的是HTML自己需要的，有的是專門為CSS設置的。
CSS信息可以來自：
- 作者樣式
- 作者可以在他的HTML文件中確定一個外來的、獨立的CSS文件
- 作者可以將CSS信息包含在HTML文件內
- 作者可以在一個HTML指令內結合CSS指令，這樣做一般是為了在一個特殊情況下將總體的CSS指令抵消掉
- 讀者樣式
- 讀者可以在他的瀏覽器內設立一個地區性的CSS文件。這個CSS文件可以用在所有的HTML文件上。假如作者的CSS文件與讀者的相衝突，那麼讀者可以確定他想使用哪個
- 瀏覽器的樣式
- 假如外部沒有特別指定一個樣式的話，一般瀏覽器自己有一個內在的樣式
使用CSS的優點有：
- 一個整個網站或其中一部分網頁的顯示信息被集中在一個地方，要改變它們很方便
- 不同的讀者可以有不同的樣式，比如有的讀者需要字體比較大
- HTML文件本身的範圍變小了，它的結構簡單了，它不需要包含顯示的信息
copyright © wikipedia