サムネイル画像から別ウィンドウを開く

JavaScript

ウィンドウを開く・閉じる

▲Project site



Point

ウィンドウを開く

onClick="window.open('URL','ウィンドウ名(省略可)','幅 高さ 左からの距離 上からの距離')"

onClick="window.open('URL','ウィンドウ名(省略可)','width=# height=# left=# top=#');"

ウィンドウを閉じる

ボタン要素に以下を指定
onClick="window.close()"

関数を使う

・関数
function　関数名() {
onClick="window.open('URL')"
}

・イベントハンドラ
onClick="関数名()"

HTML

<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>サムネイル画像から別ウィンドウを開く</title>
<style type="text/css">
<!--
* {
	margin: 0;
	padding: 0;
}

body {
    background-image: url(images/bg1.jpg);
	 background-attachment: fixed;
	font-family:
	Georgia, 
	"Times New Roman",
	 Times, 
	 serif		
}


#container {
	width: 700px;
	margin: 0 auto;
	padding: 10px 0 0 0;
	text-align: center;
	background-color: #B7AC80;
}

h1 {
	color: #A53535;
	font-size: 2em;
	margin: 0 0 30px 0;
}

p.main {
	background-color: #B7AC80;
	background-image: url(images/int1.jpg);
	background-repeat: no-repeat;
	background-position: center;
	height: 510px;
	width: 660px;
	margin: 0px auto;
}
p.main img {
	margin-top: 30px;
}
p.thumbnail {
	margin: 0 0 0 5px;
}
p.thumbnail img {
	margin: 0 5px 0 0;
}
-->
</style>
</head>
<body>
<div id="container">
<noscript>
<p>このWebページはJavaScriptを使用しています。<br>
お使いのブラウザがJavaScriptに未対応の場合や<br>
JavaScriptの設定が無効になっている場合には、<br>
正しく表示されないことがあります。</p>
</noscript>
<h1>Milano salone 2016</h1>
<p class="thumbnail">
<img src="images/int1s.jpg" width="112" height="84" alt="" 
onClick="window.open('big1.html','','width=700 height=600');">

<img src="images/int2s.jpg" width="112" height="84" alt="" 
onClick="window.open('big2.html','','width=700 height=600');">

<img src="images/int3s.jpg" width="112" height="84" alt="" 
onClick="window.open('big3.html','','width=700 height=600');">

<img src="images/int4s.jpg" width="112" height="84" alt=""
onClick="window.open('big4.html','','width=700 height=600');">

<img src="images/int5s.jpg" width="112" height="84" alt="" 
onClick="window.open('big5.html','','width=700 height=600');">
</p>
<p class="main"><img src="images/int1.jpg" width="610" 
height="440" alt="" name="mainImg"></p>
</div>
</body>
</html>

HTML.2

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" 
content="text/html; charset=utf-8">
<title>サムネイル画像から別ウィンドウを開く2</title>
<style type="text/css">
<!--
body {
     background-image: url(images/bg1.jpg);
	 background-attachment: fixed;
}

#container {
	width: 700px;
	margin: 0 auto;
	padding: 10px 0 15px 0;
	text-align: center;
	background-color: #B7AC80;
}

p {
     text-align: center;   	
}
-->
</style>
</head>
<body>
<div id="container">
<p><img src="images/int1.jpg" width="600" height="450" 
alt=""></p>
<p><button onClick="window.close();">Close</button></p>
</div>
</body>
</html>