もう少し、ホームページの作成技術を高めたい、なあんて思っていて、時間もあるので、サイトでいろいろチェックをしていた。 CSSはある程度、把握したので、次なる挑戦は、JavaScriptをざっくり使いこなせるようになりたい。 初っぱなは、ヘッドラインのとおり、これはよく使われてるけれどリンクをちょっとした説明とか、画像を小窓で開くというテクニック。 JavaScriptの
window.open() というメソッドで小窓となるウィンドウを生成できるもの。 これから必要に応じて使ってみようと思う。
1 |
ポップアップで小窓を開くサンプル1 |
size
width=128
height=96
|
<A onclick="window.open
('https://iwasashougo.com/0811090017_thumb.JPG','ウインドウの名前','width=128,height=96')
; return false ;"
href="https://iwasashougo.com/0811090017_thumb.JPG">ポップアップで小窓を開くサンプル1</A> |
2 |
ポップアップで小窓を開くサンプル2 |
size
width=714
height=536
アドレスバーカット、ウィンドウ位置をを左100、上100に
|
<A nclick="window.open('https://iwasashougo.com/0811090017.JPG',null,'
width=714,height=536,location=no,left=100,top=100') ; return false ;" href="https://iwasashougo.com/0811090017.JPG">ポップアップで小窓を開くサンプル2</A>
|
※onclickはイベントのひとつ、マウスボタンイベント、マウスがクリックされた場合に発生するイベント。
※オプションで以下の設定変更が可能。
menubar |
yes/noもしくは1/0 |
メニューバーの表示/非表示 |
location |
yes/noもしくは1/0 |
ロケーションバー(アドエス・バー)の表示/非表示 |
directories |
yes/noもしくは1/0 |
ディレクトリバーの表示・非表示 |
scrollbars |
yes/noもしくは1/0 |
スクロールバーの表示・非表示 |
toolbar |
yes/noもしくは1/0 |
ツールバーの表示・非表示 |
status |
yes/noもしくは1/0 |
ステータスバーの表示・非表示 |
resizable |
yes/noもしくは1/0 |
ウインドウサイズの変更可・不可 |
width |
ピクセル指定 |
ウインドウの横幅 |
height |
ピクセル指定 |
ウインドウの高さ |
resizable |
yes/noもしくは1/0 |
リサイズ可否 |
left |
数値 |
ウィンドウ位置左 |
top |
数値 |
ウィンドウ位置上 |
|