
スキルアップ
2021.01.08
社会人の勉強は何をするべき?勉強のメリットと勉強方法も紹介!
社会人になっても勉強は必要!と言われても、何を勉強したら良いのか迷いますよね。仕事に関わるスキルを磨いたり、資格を取得したりする他にも、勉強できることはたくさんあります。ここでは、社会人が勉強するメリット、オススメの勉強 […]
JavaScript
2017.12.25
JavaScript の記述方法のサンプルを挙げてみます。
今回は、マウスオーバー時の処理の記述方法についてのサンプルを紹介します。
1.マウスオーバー時に画像を切り替える
2.マウスオーバー時にテキストを表示する
マウスオーバー時に画像を切り替えます。
画像にマウスポインタを当ててみて下さい。
上のサンプルのソースコードは次の通りです。
<script type="text/javascript"> <!-- var img = new Array(); img[0] = new Image(100,100); img[1] = new Image(100,100); img[0].src = "img_0.jpg"; img[1].src = "img_1.jpg"; function changeImg(num) { document.getElementById("image").src = img[num].src; } //--> </script> <div style="background-color : #CCC;"> <img id="image" src="img_0.jpg" width="100" height="100" onmouseover="changeImg(0)" onmouseout="changeImg(1)"> </div>
マウスポインタが当たった際の処理は onmouseover 属性で指定し、マウスポインタが外れた際の処理は onmouseout 属性で指定します。
マウスオーバー時にテキストを表示します。
リンクにマウスポインタを当ててみて下さい。
上のサンプルのソースコードは次の通りです。
<script type="text/javascript"> <!-- var infoAry = [ "本サイトのトップページです。", "JavaScriptの基本的な書き方のサンプルを紹介しています。", "JavaScriptの便利な書き方のサンプルを紹介しています。", "JavaScriptの数字関連の書き方のサンプルを紹介しています。", "JavaScriptの表示関連の書き方のサンプルを紹介しています。", "JavaScriptの画面サイズや使用ブラウザに関するサンプルを紹介しています。", "JavaScriptのウィンドウの開閉と生成の書き方のサンプルを紹介しています。" ]; function mOver(num,obj) { document.getElementById(obj).innerHTML = infoAry[num]; document.getElementById(obj).style.visibility = "visible"; } function mOut(obj) { document.getElementById(obj).style.visibility = "hidden"; } //--> </script> <div style="background-color : #CCC;"> <a href="https://programmercollege.jp/" onmouseover="mOver(0,'info0')" onmouseout="mOut('info0')">プログラマカレッジ</a> <div id="info0" style="position:absolute; visibility:hidden; font-size:0.8em; background-color:#FFFFFF; border-style:ridge;">info</div> <a href="https://programmercollege.jp/column/8438" onmouseover="mOver(1,'info1')" onmouseout="mOut('info1')">JavaScript【 サンプル 】1</a> <div id="info1" style="position:absolute; visibility:hidden; font-size:0.8em; background-color:#FFFFFF; border-style:ridge;">info</div> <a href="https://programmercollege.jp/column/8451" onmouseover="mOver(2,'info2')" onmouseout="mOut('info2')">JavaScript【 サンプル 】2</a> <div id="info2" style="position:absolute; visibility:hidden; font-size:0.8em; background-color:#FFFFFF; border-style:ridge;">info</div> <a href="https://programmercollege.jp/column/8509" onmouseover="mOver(3,'info3')" onmouseout="mOut('info3')">JavaScript【 サンプル 】3</a> <div id="info3" style="position:absolute; visibility:hidden; font-size:0.8em; background-color:#FFFFFF; border-style:ridge;">info</div> <a href="https://programmercollege.jp/column/8525" onmouseover="mOver(4,'info4')" onmouseout="mOut('info4')">JavaScript【 サンプル 】4</a> <div id="info4" style="position:absolute; visibility:hidden; font-size:0.8em; background-color:#FFFFFF; border-style:ridge;">info</div> <a href="https://programmercollege.jp/column/8550" onmouseover="mOver(5,'info5')" onmouseout="mOut('info5')">JavaScript【 サンプル 】5</a> <div id="info5" style="position:absolute; visibility:hidden; font-size:0.8em; background-color:#FFFFFF; border-style:ridge;">info</div> <a href="https://programmercollege.jp/column/8584" onmouseover="mOver(6,'info6')" onmouseout="mOut('info6')">JavaScript【 サンプル 】6</a> <div id="info6" style="position:absolute; visibility:hidden; font-size:0.8em; background-color:#FFFFFF; border-style:ridge;">info</div> </div>
表示させたいテキストを 配列変数 infoAry に格納しておいて、マウスポインタが当たった際に表示させています。
マウスポインタが外れた際の処理も忘れずに onmouseout 属性で指定します。
スキルアップ
2021.01.08
社会人になっても勉強は必要!と言われても、何を勉強したら良いのか迷いますよね。仕事に関わるスキルを磨いたり、資格を取得したりする他にも、勉強できることはたくさんあります。ここでは、社会人が勉強するメリット、オススメの勉強 […]
スキルアップ
2021.01.08
独学でフリーランスエンジニアを目指す方へ向けて、未経験からフリーランスエンジニアになるための手順や独学でのプログラミング学習法、必要なスキルなどをご紹介します。 独学とスクールどちらで勉強すればいいか迷っている、そもそも […]
スキルアップ
2021.01.05
高卒女子の就職内定率は大卒女子とほぼ同じ。でも知恵袋には「高卒女性が応募できる正社員求人って少ないのでは…?」と心配する人たちもいるようですが、資格なしでも高収入が期待できる仕事はたくさんあります。そこで今回は現役女子高 […]
スキルアップ
2020.12.30
プログラマの仕事に興味はあるものの「プログラマの仕事はきつい」というのを耳にして不安に思ったりしていませんか?なぜプログラマの仕事はきついといわれるのか?そもそも未経験からでもプログラマになれるのか?本記事では、プログラ […]
スキルアップ
2020.12.21
技術の進歩に伴い、IT業界も人気の業界のひとつとなりましたが、「IT業界はブラック企業が多いからエンジニアを目指すのはやめとけ」という声も聞こえてきます。これは本当なのでしょうか?この記事では、実際の疑問の声に対する理由 […]
スキルアップ
2020.12.18
仕事にやりがいを感じられず悩んではいませんか?本記事では、仕事で満足感を得るにはどうすればいいのか、やりがいの感じやすいお仕事7選、仕事にやりがいを見つけるポイント、転職しなくても仕事の満足度をあげる方法などをご紹介しま […]
INTERNOUS,inc. All rights reserved.