読者です 読者をやめる 読者になる 読者になる

ねっとぱんだ

Webデザイン、プログラミングの勉強ブログ。

【javascript】画像置換、for文での表組み作成

onmouseoverによる画像置換

DEMO

html

<li><img src="img/photoS1.jpg" alt="1" onmouseover="change(1);" onmouseout="end();"></li>
<li><img src="img/photoS2.jpg" alt="2" onmouseover="change(2);" onmouseout="end();"></li>
<li><img src="img/photoS3.jpg" alt="3" onmouseover="change(3);" onmouseout="end();"></li>
<li><img src="img/photoS4.jpg" alt="4" onmouseover="change(4);" onmouseout="end();"></li>
<li><img src="img/photoS5.jpg" alt="5" onmouseover="change(5);" onmouseout="end();"></li>
</ul>
</nav>
<p><img src="img/cover_photo.jpg" alt="cv" name="cv"></p>
<script>
function change(x){
	cv.src = ('img\/photo' + x + '.jpg');
}
function end(){
	cv.src = ('img\/cover_photo.jpg');
}
</script>

css

body{
	width:540px;
	margin:50px auto;
}
ul,li{
	padding:0;
	margin:0;
}
ul{
	list-style:none;
}
nav{
	width:540px;
	margin-bottom:50px;
	padding:0 20px;
	overflow:hidden;
}
li{
	float:left;
}
li + li{
	margin-left:10px;
}
img{
	border:0;
	vertical-align:bottom;
	box-shadow:0 0 3px #888;
}
p img {
	padding:20px;
}


for構文で100桁掛け算表

DEMO

document.write('<table>');
document.write('<tr>');
document.write('<th></th>');
for(var i = 1;i <= 100;i++){
	document.write('<th>' + i + '</th>');
}
document.write('</tr>');
for(var j = 1;j <= 100;j++){
	document.write('<tr>')
	document.write('<th>' + j + '</th>');
	for(var h = 1;h <= 100;h++){
		document.write('<td>' + j * h + '</td>');
	}
	document.write('</tr>')
}
document.write('</table>');
table{
	border-collapse:collapse;
	margin:0 auto;
}
table,th,td{
	border:1px solid #000;
}
th,td{
	text-align:center;
	width:40px;
}
th{
	background:#f55;
	color:#fff;
}