スポンサーリンク
右のボタンを押したら画像を表示します。 | |
右のボタンを押したら、画面の一番上のヘッダの画像を変更します。 |
まず1つ目のボタンのソースです。
<div id="print" style="display:none">
<img src="画像のURL"/>
</div>
つづいて、2つ目のボタンのソースです。
コピペされる場合は、inputの行を改行せずに使ってください。(長さの都合で複数行になって表示されていますが、実際は1行で打っています)
以下は、ソースの説明です。興味のある方だけどうぞ。
今回は、スタイルシートのidとdisplay属性についての理解が必要です。
上の参考記事のページの途中にリンクするでidを、ブログの特定の項目を消したいでdisplayを説明していますので、先に読まれると理解が早いと思います。
ボタンを押すと、画像を表示する
これは、画像を後から挿入しているわけではなく、<div id=”print”></div>の中にある画像を、最初は非表示にしているだけです。
ボタンを押すとJavaScriptというスクリプト(簡単なプログラム)が作動して、非表示から表示に切り替えます。
どうやって切り替えるかというとdisplay:noneをdisplay:blockに変更するだけです。
ボタンを表示するHTML
というのがボタンをあらわすHTMLの書き方です。
このonclickの中に書いてあるのがJavaScriptです。
このスクリプトを日本語に直すとこうなります。
var e=document.getElementById(‘print‘)
idがprintのタグを探して、eに入れてください。
e.style.display=’block‘
e(つまりidがprintのタグ)のスタイルシートのdisplayをblockにしてください。
以上で、非表示から表示に切り替わります。
ヘッダの画像を変える
これも同じやりかたで、backgroundの画像を変更しているだけです。
var e=document.getElementById(‘header‘)
idがheaderのタグを探して、eに入れてください。
e.style.background=’url(\’画像のURL\’)‘
e(つまりidがheaderのタグ)の背景画像を画像のURLにしてください。
ということです。
詳しく説明すると奥が深くて、数ページでは書けませんので、徐々にということで!
関連コンテンツ
スポンサーリンク