ボタンを押したら画像を表示

スポンサーリンク


右のボタンを押したら画像を表示します。
右のボタンを押したら、画面の一番上のヘッダの画像を変更します。

まず1つ目のボタンのソースです。

<input type="button" value="クリック" onclick="(function(){var e=document.getElementById(‘print’);e.style.display=’block’})()"/>
<div id="print" style="display:none">
<img src="画像のURL"/>
</div>

つづいて、2つ目のボタンのソースです。

<input type="button" value="クリック" onclick="(function(){var e=document.getElementById(‘header’);e.style.background=’url(\’画像のURL\’)’})()"/>

コピペされる場合は、inputの行を改行せずに使ってください。(長さの都合で複数行になって表示されていますが、実際は1行で打っています)

以下は、ソースの説明です。興味のある方だけどうぞ。


今回は、スタイルシートのiddisplay属性についての理解が必要です。

上の参考記事のページの途中にリンクするidを、ブログの特定の項目を消したいdisplayを説明していますので、先に読まれると理解が早いと思います。

ボタンを押すと、画像を表示する

これは、画像を後から挿入しているわけではなく、<div id=”print”></div>の中にある画像を、最初は非表示にしているだけです。

ボタンを押すとJavaScriptというスクリプト(簡単なプログラム)が作動して、非表示から表示に切り替えます。

どうやって切り替えるかというとdisplay:nonedisplay:blockに変更するだけです。

ボタンを表示するHTML

<input type=”button” value=”ボタンに表示する文字onclick=”押したらおこなう動作”/>

というのがボタンをあらわす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にしてください。

ということです。
詳しく説明すると奥が深くて、数ページでは書けませんので、徐々にということで!


関連コンテンツ

スポンサーリンク

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください