還記得去年教的那個簡單貼圖嗎?
大家回去有復習嗎 沒關係
忘記的了快回去看 現在要來教一些比較進階了的喔~
大家有沒有很興奮啊
(有~~~)

好的 現在開始
已經忘光了想復習的可以點這邊回去看[簡單的貼圖教學]


繼上次的那個＜img＞這個tag的一些基本介紹後
現在我們要將這個img的功能更發揚光大
為了要讓他更三八一點　我們還要再引進一個tag
這個tag叫＜a＞
主要的用途就是要連結到別的地方去的一個標籤

　＜a href="你要連結到的地方去"＞ ＜/a＞

像你現在在這整個網頁上只要移上去　游標會變小手的
這個地方就是用了＜a＞這個tag
這個tag跟＜img＞比較不一樣的地方就是
他需要一個結束的tag 來包圍你要發生的地方

比如說　＜a href="http://www.yahoo.com.tw"＞這裡是雅虎＜/a＞

那結果會是啥呢？

就是

---

這裡是雅虎

---

你只要點"這裡是雅虎"　這段被＜a＞＜/a＞包圍的文字
就會被轉到"http://www.yahoo.com.tw"這個網址去
懂了嗎

超簡單～

不過很遺憾的　我們要的不是＜a＞的連結功能
他現在只是我們要觸發一個事件的橋樑罷了

所以　要再開始介紹一些進階的東西了

我們要介紹兩個觸發的事件
一個是滑鼠移上去
一個是滑鼠移出來

OnMouseOver
OnMouseOut

這邊事件觸發我就不多講了　記住這兩個就對了
在搞網頁花俏化（三八化）　這兩招受用無窮

那現在的＜a＞會變什麼樣子呢？

＜a href="AAAA" OnMouseOver="BBBB" OnMouseOut="CCCC"＞

上面這行的意思就是
將滑鼠移到這個標籤以後的東西上去時
會觸發BBBB這個動作
將游標移出後面的這個東西之後
會觸發CCCC這個動作
而點下這個標籤之後的東西
會連到AAAA這個地方去

有沒有很簡單？！


再來　就先試試看插入小圖　滑鼠移上去會變大圖
基本的概念就是

AAAA不重要
BBBB是把圖換成大張的動作
CCCC是把圖換回小張的動作

從這行開始接下的教學　
如果再有不懂 你背起來就對了　
老師在教　不要有問題　（因為我跳過好多東西沒講..好累..）

---

在我們插入的圖片中＜img＞標籤　多先定義一個id的屬性
那在這個網頁的範圍裡　我們只要提到這個id 那流覽器就會知道是指他
像我們現在插入一個圖片　就是這個漢堡圖
我有先查過了　他的縮圖位址是
　　http://pic3.pic.wretch.cc/photos/1/p/pen2/36/
　　thumbs/t1130663820.jpg
寬90　高68
 
大圖的位址是
http://pic3.pic.wretch.cc/photos/10/p/pen2/36/1130663820.jpg
寬450 高337

然後先定義他叫pic1好了　你喜歡叫他pen2也ok啦

　　＜img id="pic1" src="http://pic3.pic.wretch.cc/p
　　hotos/1/p/pen2/36/thumbs/t1130663820.jpg"＞

再來　我們要把他用＜a＞＜/a＞包圍起來

　　＜a＞＜img id="pic1" src="http://pic3.pic.wretch.cc/p
　　hotos/1/p/pen2/36/thumbs/t1130663820.jpg"＞
　　＜/a＞

我們並不想讓使用者按下圖片時就會連到那兒去　我們純脆只是想要利用他onmouseover跟onmouseout這兩個觸發事件的功能　所以我們就不寫 href了　所以現在改成這樣

　　＜a Onmouseover="" OnMouseOut=""＞＜img id="pi
　　c1" src="http://pic3.pic.wretch.cc/photos/1/p/pen2/36/
　　thumbs/t1130663820.jpg"＞＜/a＞

那我們觸發事件後　要幹嘛呢？
我們想把這張小圖掉包成大圖！！
How to do this?

那我們就再OnMouseOver後的雙引號中東西改成

　　pic1.src=http://pic3.pic.wretch.cc/photos/1/p/pen2
　　/36/1130663820.jpg;
　　pic1.width=450;
　　pic1.width=337;

(全部是連成一行的)
這邊要用心體會一下這幾行到底在講什麼 其實不難懂喔!
第一行是(到;之前對電腦來說都是一行) 要把pic1這個id的圖的
src改成後面這一個新的網址
第二行是pic1這個id的圖寬變450
第三行是pic1這個id的圖高變337


當然　滑鼠移出來想讓他變回原尺寸囉～

所以在OnMouseOut後的雙引號中改成

　　pic1.src=http://pic3.pic.wretch.cc/photos/1/p/
　　pen2/36/thumbs/t1130663820.jpg;
　　pic1.width=90;pic1.height=68;

搞定
這段就靠你自己體會啦 我不再贅述

結果會變什麼呢

---

---

啊~~ 福氣啦~~~

不知所云的結尾~
在這個怪介面寫教學有夠難寫的~
快起笑了~ 越後面越亂寫~


希望這篇教學真的有人看得懂啊
超辛苦的這篇