
スキルアップ
2021.01.08
社会人の勉強は何をするべき?勉強のメリットと勉強方法も紹介!
社会人になっても勉強は必要!と言われても、何を勉強したら良いのか迷いますよね。仕事に関わるスキルを磨いたり、資格を取得したりする他にも、勉強できることはたくさんあります。ここでは、社会人が勉強するメリット、オススメの勉強 […]
JavaScript
2017.12.27
JavaScript の記述方法のサンプルを挙げてみます。
今回は、JavaScript の 画像関連の記述方法についてのサンプルを紹介します。
背景画像を設定・変更します。
画像ボタンをクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<script type="text/javascript"> <!-- function disp(dat) { document.body.style.backgroundImage = "url(" + dat + ")"; } //--> </script> <div style="background-color : #CCC;"> <a href="javascript:disp('photo1.jpg')"> <img src="photo1.jpg" width="100" height="100"> </a> <a href="javascript:disp('photo2.jpg')"> <img src="photo2.jpg" width="100" height="100"> </a> <input type="button" value="リセット" onClick="disp('none')"> </div>
ページ全体に背景画像を設定する場合は、「 document.body.style.backgroundImage = “url(‘画像ファイルのURL’)”; 」として 画像ファイルのURLを指定します。
背景画像は デフォルト設定が「 リピート有 」のため、指定した画像ファイルが縦横にリピート表示されます。
画像ファイルを リピートさせずに背景画像に指定すると、次のようになります。
画像ボタンをクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<script type="text/javascript"> <!-- function disp(dat) { document.body.style.backgroundImage = "url(" + dat + ")"; document.body.style.backgroundRepeat = "no-repeat"; document.body.style.backgroundSize = "cover"; } //--> </script> <div style="background-color : #CCC;"> <a href="javascript:disp('photo1.jpg')"> <img src="photo1.jpg" width="100" height="100"> </a> <a href="javascript:disp('photo2.jpg')"> <img src="photo2.jpg" width="100" height="100"> </a> <input type="button" value="リセット" onClick="disp('none')"> </div>
「 document.body.style.backgroundRepeat = “no-repeat”; 」として 画像ファイルをリピートしないように指定しています。
そして、「 document.body.style.backgroundSize = “cover”; 」で、背景に表示する画像ファイルのサイズを指定しています。
「 cover 」は、画像の縦横比を維持したまま 背景領域に収まる最大サイズに自動調整する指定です。
背景画像のサイズ指定については、background-sizeプロパティをご参照下さい。
スライドショーのように、画像を一定時間で切り替えることもできます。
STARTボタンとSTOPボタンをクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<div style="background-color : #CCC;"> <div style="display:inline-flex;"> <input type="button" value="START" onClick="timerStart()"> <input type="button" value="STOP" onClick="timerStop()"> </div> <img src="photo3.jpg" id="dat" width="500" height="500"> </div> <script type="text/javascript"> <!-- var img = ["photo1.jpg","photo2.jpg","photo3.jpg","photo4.jpg"]; var timer; var count = -1; function timerStart() { //画像インデックス count++; //画像数確認 if (count == img.length) count = 0; //画像出力 document.getElementById("dat").src = img[count]; //タイマーを設定 timer = setTimeout("timerStart()",1000); } function timerStop() { //タイマーをクリア clearInterval(timer); } //--> </script>
複数の画像ファイルを配列変数 img に格納して、START ボタンがクリックされたタイミングで 1 秒後( 1000ミリ秒後 )に 画像表示処理を行う関数 timerStart を呼び出し、変数 timer にタイマーを設定しています。
カウント変数を、タイミング良く0に戻すことがポイントです。
STOP ボタンがクリックされると、関数 timerStop を呼び出して 変数 timer に設定されたタイマーを終了させています。
スキルアップ
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.