背景色の変更と画像置換
背景色の変更
Point
ボタン要素に以下を指定document.bgColor
HTML
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<title>オブジェクトの利用</title>
<style type="text/css">
<!--
body {
text-align: center;
}
-->
</style>
<body>
</head>
<body>
<h1>Change the world</h1>
<p>Let's try to think about it from a different point of view.</p>
<button onClick="document.bgColor = '#FA8072' ">salmon</button>
<button onClick="document.bgColor = '#FF8C00' ">darkorange</button>
<button onClick="document.bgColor = '#008B8B' ">darkcyan</button>
<button onClick="document.bgColor = '#20B2AA' ">lightseagreen</button>
<button onClick="document.bgColor = '#DDA0DD' ">plum</button>
<button onClick="document.bgColor = '#F5F5F5' ">whitesmoke</button>
<br>
<button onClick="document.bgColor = '#FF6347' ">tomato</button>
<button onClick="document.bgColor = '#DAA520' ">goldenrod</button>
<button onClick="document.bgColor = '#4169E1' ">royalblue</button>
<button onClick="document.bgColor = '#98FB98' ">palegreen</button>
<button onClick="document.bgColor = '#DC143C' ">crimson</button>
<button onClick="document.bgColor = '#FFF8DC' ">cornsilk</button>
</body>
</html>
||<
<h2>画像置換</h2>
<a href="http://000.tyabo.com/JavaScript/Pepole/pepole.html">▲Project site</a>
<center>[http://000.tyabo.com/JavaScript/Pepole/pepole.html:image=
[f:id:Cochlea:20111110083853p:image:w640]
</center>
<h5>Point</h5>
イメージ要素に以下を指定
マウスオーバー時
<font color="#CD5C5C">onmouseover="this.src='画像'"</font>
マウスアウト時
<font color="#CD5C5C">onmouseout="this.src='画像'"</font>
<h5>HTML</h5>
>||
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=UTF-8">
<title>画像置換</title>
<style type="text/css">
<!--
* {
margin: 0;
padding: 0;
}
body {
background-image: url(images/Map3.jpg);
width: auto;
height; auto;
font-family;
Helvetica,
Arial,
serif,
}
#container {
background-color: #000;
text-align: center;
margin: 20px auto;
padding: 60px 10px 0;
width: 650px;
}
h1 {
font-size: 3em;
font-weight: 900;
color: #FFFFFF;
padding: 0 0 40px 0;
}
p {
font-size: 1.1em;
color: #FFFFFF;
padding: 0 0 40px 0;
}
p img {
margin: 10px;
}
-->
</style>
</head>
<body>
<div id="container">
<h1>Pepole</h1>
<p></p>
<p>
<img src="images/girlG.jpg" width="300" height="200"
alt=""onMouseOver="this.src='images/girlC.jpg'"
onMouseOut="this.src='images/girlG.jpg'"><img
src="images/men1G.jpg" width="300" height="200"
alt="" onMouseOver="this.src='images/men1C.jpg'"
onMouseOut="this.src='images/men1G.jpg'"><img
src="images/men3G.jpg" width="300" height="200"
alt=""onMouseOver="this.src='images/men3C.jpg'"
onMouseOut="this.src='images/men3G.jpg'"><img
src="images/girl2G.jpg" width="300" height="200"
alt=""onMouseOver="this.src='images/girl2C.jpg'"
onMouseOut="this.src='images/girl2G.jpg'"><img
src="images/childrensG.jpg" width="300" height="200"
alt=""onMouseOver="this.src='images/childrensC.jpg'"
onMouseOut="this.src='images/childrensG.jpg'"><img
src="images/men4G.jpg" width="300" height="200"
alt=""onMouseOver="this.src='images/men4C.jpg'"
onMouseOut="this.src='images/men4G.jpg'">
</p>
</div>
</body>
</html>
サムネールで画像置換
Point
image要素に以下を指定onMouseOver="document.mainImg
HTML
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Mirano salone</title>
<style type="text/css">
<!--
* {
margin: 0;
padding: 0;
}
body {
background-image: url(images/bg.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>Mirano salone 2015</h1>
<p class="thumbnail">
<img src="images/int1s.jpg" width="112" height="84" alt=""
onMouseOver="document.mainImg.src='images/int1.jpg'">
<img src="images/int2s.jpg" width="112" height="84" alt=""
onMouseOver="document.mainImg.src='images/int2.jpg'">
<img src="images/int3s.jpg" width="112" height="84" alt=""
onMouseOver="document.mainImg.src='images/int3.jpg'">
<img src="images/int4s.jpg" width="112" height="84" alt=""
onMouseOver="document.mainImg.src='images/int4.jpg'">
<img src="images/int5s.jpg" width="112" height="84" alt=""
onMouseOver="document.mainImg.src='images/int5.jpg'">
</p>
<p class="main"><img src="images/int1.jpg" width="610" height="440"
alt="" name="mainImg"></p>
</div>
</body>
</html>
