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

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


繼上次的那個<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;

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

結果會變什麼呢






啊~~ 福氣啦~~~

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


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





pen2 發表在 痞客邦 留言(19) 人氣()