*YouTube 教學頻道* *影像布落格*
首頁
初學者技能教案專區
融媒體Wix教學
數位影音敘事專題寫作
西洋哲學史導讀
老子探義導讀
《論語》小談
《法華經》的思
Unsplash圖像集
我的給大學生書單

2012年4月8日 星期日

移動滑鼠就換圖的多媒體互動寫作技能



滑鼠移入就換

透過互動形成的圖像變化,
可以讓創作者進行更豐富的意義表達。↙↙




1 實作範例

1.語法的作用實例 ââ 請把8移至圖內


2.語法練習素材照片,供同學習作用↙。

第一張:http://farm8.staticflickr.com/7065/6868049716_15fc49cb6c_z.jpg

第二張:http://farm8.staticflickr.com/7195/6909391890_89b10a66c8_z.jpg
P3182950
6868049716_15fc49cb6c_z (2)

語法說明

原始語法如下:
<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>

語法說明:
  1. img src="xxx"是指瀏覽器一進入此頁就要出現的圖片。xxx是指圖片的位置網址。
  2. 「onmouseover="this.src='xxx';''」,是指滑鼠移到這張圖片位置時,要換成另一張圖片。xxx是指要換成的圖片的位置網址。英文字很清楚的表示了:on(在) mouse(滑鼠) over(移過)。
  3. 「onmouseout="this.src='xxx';",是指滑鼠離開時,要出現的圖片。在此例,是同第一張出現的圖。
  4. 這是利用視覺的誤差所形成的效果,用來說明圖片內容很好用。
  5. 二張圖片的大小最好一樣,比較容易處理。請注意: 「;」分號及各種標點符號都要打對,才行。

影音教學第一版。【video ↗】
影音教學第二版 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">

【說明:】
  1. 請記得在img style裡加入參數: position: relative; left: 0px; top: 0px;
  2. 移動的距離,可自行設定數字(藍色字 體)。



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://lh3.googleusercontent.com/--SjwjQEH5iw/VRQegF-l_kI/AAAAAAAAaxY/X4Hl4PW5odI/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秒。







CSS:hover  圖片連動效果


網友:
請問這個語法有辦法做連動嗎?
例如我滑鼠移到A圖片上 除了A圖片會變換成B圖片之外 另一邊的C圖片也會改變成D圖片的語法?


寫作構思:
一、設置一列二欄的表格。將表格格子的寬度和高度設定好。
二、將背景圖的css語法寫入到<head>xxx</head>之間。
三、將class "tdgacgroimg161216" 設置到 table 裡。注意哦,是 table 裡。
四、背景圖的寬度及高度,要和表格的格子寬、高度,一致。






<style>

/*滑鼠未移入前,左邊格子的背景圖css*/
table.tdgacgroimg161216 >tbody >tr >td:nth-of-type(1) {
background-image: url(https://c2.staticflickr.com/6/5621/30836315425_21ac8c49a9_b.jpg);
background-repeat: no-repeat;
background-size: 279px; /*這裡設置背景圖的寬度、高度*/
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s;
}

/*滑鼠未移入前,右邊格子的背景圖css*/
table.tdgacgroimg161216 >tbody >tr >td:nth-of-type(2) {
background-image: url(https://c1.staticflickr.com/6/5586/30837219312_7c8a8ee18f_b.jpg);
background-repeat: no-repeat;
background-size: 279px; /*這裡設置背景圖的寬度、高度*/
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
-ms-transition: 0.3s;
transition: 0.3s;
}

/*滑鼠移入後,左邊格子的背景圖css*/
table.tdgacgroimg161216 >tbody >tr:hover >td:nth-of-type(1) {
background-image: url(https://c3.staticflickr.com/6/5642/30491037130_c585d097cb_b.jpg);
}

/*滑鼠移入後,左邊格子的背景圖css*/
table.tdgacgroimg161216 >tbody >tr:hover >td:nth-of-type(2) {
background-image: url(https://c3.staticflickr.com/6/5563/30817634722_09455344ae_b.jpg);
}

</style>



CSS:hover  套圖緩慢移動效果



滑鼠移入DIV後,裡面的照片就會緩慢的移動。




構思方向:

一、請先做出一個DIV。
二、在DIV內置入你想放入的多圖片,圖片請設定好大小一致。
三、把<style>xxx</style>置入到<head>xxx</head>中間,即寫入 css。
四、把class  " teat00290b ",置入到DIV 裡。就可以了。


<style>
div.teat00290b {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
overflow: hidden;
border-top: 1px solid gray;
border-bottom: 1px solid gray;
}

div.teat00290b >img {
margin: 3px 7px 3px 2px;

}

div.teat00290b:hover >img:nth-of-type(1) {
margin-left: -390px; /*這裡的數字決定了離動之距離*/
-webkit-transition: 3s linear;
-moz-transition: 3s linear;
-o-transition: 3s linear;
-ms-transition: 3s linear;
transition: 3s linear;
}
</style>





文繞 圖;滑鼠移入,圖變大,版型不變


CSS語法:

<style>

/*DIV的設置*/
.divimg2017101501 {
width: 420px;
height: 280px;
float: left;
padding: 2px;
margin: 0px 5px 5px 0px;
border: 1px solid gray;
}

/*裡面圖像大小的設置*/
.divimg2017101501 img {
width: 420px;
transition: 0.6s linear;
}

/*滑入DIV後的互動設置*/
.divimg2017101501:hover img {
width: 560px;
position: relative;
z-index: 2;
}

</style>


HTML編輯區的語法:

<div class="divimg2017101501">
<img  alt=""
src="https://c3.staticflickr.com/9/8720/28767341842_11b2a4d8df_b.jpg"><br>
</div>



互動呈現效果:



這是文是文字這是文字這是文字
這是文字
這是文字這是
這是文字是文字這是文是文字
這是文字這是文字這是文字這是文文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字這是文字



滑鼠移入,圖像移動,文字秀出來。純CSS。easy!!

 純CSS互動,構思也簡單。運用上也很有可創意性。例如,鳥的圖象,滑鼠移入後,鳥的名字就可以秀出來。


呈現範例:






    這裡是那裡呢?
    一種黑暗中的動態感。
   
    在新北市的一個十字路口中!



構思及作法:

  1. 做出一個文字框(DIV),設定寬、高,要和圖像的寬、高一致。
  2. 文字框的意欲位置,寫入文字。
  3. 緊接著就把圖像置入於文字後。寬、高要和文字框一致。
  4. 將class " wordimgcla20171217 "寫入到文字框,即可。這裡使用選擇器父子關係的觀念。


CSS語法:

<style>
/*文字框的設定,字變化*/
.wordimgcla20171217 {
font-family: Verdana, '微軟正黑體';
font-size: 1.21em;
font-weight: 800;
line-height: 1.7;
letter-spacing: 0.1em;
text-shadow: 0px 0px 15px rgba(255,215,0, 0.7);
position: relative;
}

/*使用position: absolute 移動圖片*/
.wordimgcla20171217 img {
position: absolute;  
left: 0px;
top: 0px;        /*以上三個參數值使圖片移到文字框左上角定位*/
transition: 1s linear;
}

/*滑鼠移入後的變化*/
.wordimgcla20171217:hover img {
left: 0px;      /*圖移動的方置和距離,使用left, top來設定*/
top: -180px;
}

</style>


試看看?

你可以把參數值

overflow: hidden;

加到文字框的 Class 設定中,看看會什麼變化。



滑 鼠移入,放大照片




CSS:

<style>

.flex-container03 {
display: flex;
width: 540px;
height: 360px;
justify-content: center;
align-items: center;
overflow: hidden;
border: 1px solid lightgray;
}

.flex-container03 >img {
width: 95%;
transition: 0.8s;
}

.flex-container03:hover >img {
width: 150%;
}

</style>


HTML語法:

<div class="flex-container03">
<img alt=""
src="https://farm2.staticflickr.com/1923/45411339412_bab3351a32_c.jpg">
</div>

做法:

  1. 做一個DIV。
  2. 裡面放入照片。
  3. DIV使用flex功能設定照片垂直居中。
  4. 加入 hover 互動功能,放大照片。



7 則留言:

  1. 請問這個語法有辦法做連動嗎?
    例如我滑鼠移到A圖片上 除了A圖片會變換成B圖片之外 另一邊的C圖片也會改變成D圖片的語法?

    回覆刪除
    回覆
    1. 有做了一個,你看看是不是你想像中的。

      刪除
  2. 這個語法目前沒有辦法,但你想要的功能,javascript可以很決的做出來。你可能要去學一下…

    回覆刪除
  3. 請問滑鼠移入即換圖可以使用在ppt上嗎?

    回覆刪除
  4. 大神 謝謝你 幫了我好大的忙

    回覆刪除