滑鼠移入就換圖
透過互動形成的圖像變化，
可以讓創作者進行更豐富的意義表達。↙↙
|
1 實作範例
1.語法的作用實例 ââ 請把8移至圖內
2.語法練習素材照片，供同學習作用↙。
第一張：http://farm8.staticflickr.com/7065/6868049716_15fc49cb6c_z.jpg
第二張：http://farm8.staticflickr.com/7195/6909391890_89b10a66c8_z.jpg
語法說明
原始語法如下：
<img src="http://farm8.staticflickr.com/7065/6868049716_15fc49cb6c_z.jpg" onmouseover="this.src='http://farm8.staticflickr.com/7195/6909391890_89b10a66c8_z.jpg';" onmouseout="this.src='http://farm8.staticflickr.com/7065/6868049716_15fc49cb6c_z.jpg';" width=640>
語法說明：
- img src="xxx"是指瀏覽器一進入此頁就要出現的圖片。xxx是指圖片的位置網址。
- 「onmouseover="this.src='xxx';''」，是指滑鼠移到這張圖片位置時，要換成另一張圖片。xxx是指要換成的圖片的位置網址。英文字很清楚的表示了：on（在） mouse（滑鼠） over（移過）。
- 「onmouseout="this.src='xxx';"，是指滑鼠離開時，要出現的圖片。在此例，是同第一張出現的圖。
- 這是利用視覺的誤差所形成的效果，用來說明圖片內容很好用。
- 二張圖片的大小最好一樣，比較容易處理。請注意： 「；」分號及各種標點符號都要打對，才行。
影音教學第二版 with KompoZer。 ↙↙
實例示範二
再來提供一個使用這技巧的寫作範例：
老鏡並不銳利，但顏色卻很古典。至少是一種溫暖的顏色感。
這種溫暖素，是現代鏡比較感受不到。
Olympus om 50mm f3.5 Macro拍的。移滑鼠去看它！â8 |
 |
更多
這支鏡頭的所拍的照片，請進。
滑鼠移入，換圖，小移動變化
這個練習，是直接寫入圖像就可以了。
再來是，於圖像中 img 設定各種參數及互動語法，即可。簡單，好用。
範例呈現：
大家都有口福了！
設寫入jQuery程式
於<head>xxx</head>之間：
<script
src="http://code.jquery.com/jquery-1.12.4.js"></script>
HTML：
<img style="width: 420px; height: 315px;
position:
relative; left: 0px; top: 0px;"
onmouseout="$(this).animate({left: '-=
5px', top: '+=
5px'},200).attr('src',
'移出時的照片網址');"
onmouseover="$(this).animate({left: '+=
5px', top: '-=
5px'},200).attr('src',
'移入時的照片網址');"
alt=""
src="一開始時的照片網址"
align="top">
【說明：】
- 請記得在img style裡加入參數： position:
relative; left: 0px; top: 0px;
- 移動的距離，可自行設定數字（藍色字
體）。
PART II 低調炫技的換圖法
滑鼠移入的低調震動，引起讀者的注意。
教學影音
1.請copy下列程式並貼到<head>xxx</head>之間或<body>之後。使用KompoZer建議放到<body>
之後。
<script
src="http://code.jquery.com/jquery-1.9.1.js"></script>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css">
<script
src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
2.請copy下語法貼到要呈現的編輯區域。
<script>
$(function() {
$('#
chp001').hover( function(){
$('#
chp001>img').attr({src:
'滑鼠移入後要出現的照片位置網址'}).effect({effect: 'shake', direction: 'up', distance:
2, times: 1});
},
function(){
$('#
chp001>img').attr({src:'滑鼠移出後要出現的照片位置網址'});
});
});
</script>
<div id="
chp001" style="width: 480px; height: 270px;">
<img style="width: 480px; height: 270px;" alt=""
src="一開始要出現的照片位置網址"><br>
</div>
說明：
第 2 部分的語法，只能產生一個換圖，如果要再做第二個，請再將第 2 部分語法重貼一次，並更改所有的 id 識別碼，如上例
紅色字部分，例如全部改成 chp002 。
純CSS語法的「滑鼠移入即換圖」：下面範例
作
法：
|
語法：
|
|
一、請先做一個div，並把寬度和高度設成和圖像的大小一致。並設好id。此例為id="divchpic01"，即紅色字體者。
二、再來把圖像以「背景圖」的作法，塞到div裡面，即有圖片呈現的效果。
利用css的hover功能，即「滑鼠移入會變化」的功能，並設定成滑鼠移入就換掉背影圖。【即把右邊的css語法貼到<body>之後或<head>xxx</head>之間】。
三、如此就形成範例中的效果。
|
<style>
#divchpic01 {
background-image:
url(第一張照片網址);
background-repeat: no-repeat;
background-size: 560px;
}
#divchpic01:hover {
background-image:
url(第二張照片網址);
</style>
|
教
學影音：
|
|
滑鼠移入，照片就會滑動
教學影音：
CSS語法：
<style>
.baimg032801 {
background-image:
url(
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlmz6uJQQXH57bHkr1uaWvc_jMLTdC1v6rzqYMzE_oTykiNQVPOMozgsd4KHtBHTZOpNq_te7ScQbFzl1u0ax8bUNxkWUOFbr9kEyk_XBu7mABl38K4tCqPD_LqjwCzwBYzcfIip8jbNk/w1049-h700-no/IMG_4621.JPG);
background-repeat: no-repeat;
background-size:
420px;
}
</style>
jQuery程式：請放
到<body>之後
<script
src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script
src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.9.2/themes/smoothness/jquery-ui.css">
驅動程式碼：請放到
<body>之後
<script>
$(function() {
$('.
baimg032801').hover(function()
{
$(this).find('>img').hide('slide', {direction: '
right'}, 400);
},
function() {
$(this).find('>img').show('slide', {direction: 'right'}, 400);
});
});
</script>
說明：
移動的方向有：
left,
right, up, down 四種方向。
移動的速度是：一秒為1000。所以400是0.4秒。
FTP教學影音片：
教學內容注意事項：
建立FileZilla連線的相關資料：
FileZilla連線軟體下載：http://filezilla-project.org/
。
