webかたつむり ウェブデザインを勉強中 ウェブ初心者のおぼえがき

webかたつむり

WEB制作会社のフォトグラファー

MouseOver 画像置換 課題:05-01

  • Q01
  • ポイントは、メイン画像にname属性をつけること。
  • id , class はCSSを使うようになってからのやり方、だそう。
  • name 属性は旧式のやり方。
  • 要素の値を使うときは、name属性を使う。
  • onMouseOver="mainImg.src='abc.jpg`"
  • ダブルクオーテーションの中は、シングルクオーテーション。

<!doctype html>

<html lang="ja">
<head>
<meta charset="utf-8">
<title>Q1</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div id="container">
<p><img src="img/ph01.jpg" alt="ph01" name="mainImg"></p>
<ul>
<li><a href="#"><img src="img/s01.jpg" alt="s01" onMouseOver="mainImg.src='img/ph01.jpg'"></a></li>
<li><a href="#"><img src="img/s02.jpg" alt="s02" onMouseOver="mainImg.src='img/ph02.jpg'"></a></li>
<li><a href="#"><img src="img/s03.jpg" alt="s03" onMouseOver="mainImg.src='img/ph03.jpg'"></a></li>
<li><a href="#"><img src="img/s04.jpg" alt="s04" onMouseOver="mainImg.src='img/ph04.jpg'"></a></li>
<li><a href="#"><img src="img/s05.jpg" alt="s05" onMouseOver="mainImg.src='img/ph05.jpg'"></a></li>
</ul>
</div>
</body>
</html>