前提・実現したいこと
前提
プログラム超初心者&独学です。
そもそもどのように検索すればいいかわからない事が多く,質問させていただきます。
用語や表現などが間違っているかもしれないので,不快に思われたら申し訳ありません。
(間違っていたら教えてください!)
実現したいこと
- 以下のページのExampleにあるデモのように,mouseoverで画像が替わり,mouseoutで元の画像に戻るような設定をしたい
<参考> http://www.mouselabweb.org/index.html
- (1)mouseoverを始めた時間と(2)mouseoverを終了した時間を記録して,csvファイルで出力したい
- Node.jsで実装したい
試したこと
- 「マウスホバー 画像切り替え」で検索したら,jQueryで作っているページが多かったので,参考にしつつjQueryで作成した
jQuery
1<!DOCTYPE html> 2<html lang="ja"> 3 <head> 4 <meta charset="utf-8"> 5 <title>jQueryの練習</title> 6 <script src="jquery-3.3.1.min.js"></script> 7 <!--画像パスを指定--> 8<img src="smartphone_blank_woman.png"> 9<script type="text/javascript"> 10 $(function() { 11 //画像にマウスを乗せたら発動 12 $('img').hover(function() { 13 //画像のsrc属性が別画像のパスに切り替わる 14 $(this).attr('src', 'smartphone_blank_man.png'); 15 //ここにはマウスを離したときの動作を記述 16 }, function() { 17 //画像のsrc属性を元の画像のパスに戻す 18 $(this).attr('src','smartphone_blank_woman.png'); 19 }); 20 }); 21</script> 22 </head> 23</html> 24
- 画像はいらすとやのものです
https://www.irasutoya.com/2019/01/blog-post_228.html
わからないこと
- マウスホバーで画像が切り替わるような仕様は作れたが,ホバー時間の記録のやり方がわからない
ホバー時間の記録は,このページにあるような処理時間計測で可能なのか?
http://write-remember.com/program/javascript/console_time/
2. 記録した時間をcsvファイルに出力するにはどうすれば良いのか?
検索ワードなどを教えていただけると助かります。
よろしくお願いします。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/02/22 05:10
2019/02/22 05:13 編集
2019/02/22 06:17
2019/02/22 06:28
2019/02/22 07:59