私は次のことを達成するためにJavascriptを使用しようとしています:
- ページが読み込まれると画像が表示されます。この画像は、識別キャプションのない体の一部の画像であるため、以下のサンプル コードでは「Wk1_2_Medial_Border_uncaptioned.jpg」と呼ばれています。
- その上にマウスを置くと、キャプション付きの同一の 2 番目の画像が表示されます。以下のコードでは、「Wk1_2_Medial_Border_captioned.jpg」と呼ばれています。
- Web ページの画像以外の場所をクリックすると、キャプションのない画像に戻ります。
- 画像内をクリックすると、キャプション付きの画像が読み込まれます。
コンピューターでは、マウス アウトせずに画像の外側をクリックすることは明らかにできないため、手順 3 と 4 はおそらく冗長に思えます。手順 3 と 4 の目的は、ページが Iphone と Ipad で正しく機能するようにすることです。body タグまたは image タグに onmousedown イベントがない場合、コンピューターと Android タブレットで問題なく動作しました。
タブレットは、ページのタップをマウスダウンとマウスオーバーの両方のイベントとして登録しているようです。私のコードが行っていることは次のようです:
Uncaptioned画像が読み込まれます。ユーザーが画像をタップします。
画像の
onmousedownイベントがトリガーされ、キャプション付きの画像が表示されます。ボディの
onmousedownイベントはほぼ瞬時にトリガーされ、キャプションなしの画像が表示されます。
私は困惑しています。本体でその onmousedown イベントを発生させたくない、または画像の onmousedown イベントでそれを元に戻す何らかの方法が必要です。しかし、私は方法を理解できません。
これが私のコードです:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link style="text/css" rel="stylesheet" href="../ptwebsite.css" >
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script>
function toggleCaption(picture)
{
var pic = document.getElementById("bodyPartPic");
pic.src = picture;
}
</script>
<title>Name The Body Part</title>
</head>
<body onmousedown="toggleCaption('images/Wk 1_1_Spine_of_Scapula_uncaptioned.jpg')">
<div class="maincontent">
<ul id="navbar">
<li><a href="../main.html">Return to Main</a></li>
<li><a href="bodypart1002.php">Next</a></li>
</ul>
<h1 id="welcomebanner">Can You Name The Body Part?</h1>
<h3>Roll your mouse over the image to see the name</h3>
<img id="bodyPartPic" class="portraitImage"
src="images/Wk 1_1_Spine_of_Scapula_uncaptioned.jpg"
onmouseover="toggleCaption('images/Wk 1_1_Spine_of_Scapula_captioned.jpg')"
onmouseout="toggleCaption('images/Wk 1_1_Spine_of_Scapula_uncaptioned.jpg')"
onmousedown="toggleCaption('images/Wk 1_1_Spine_of_Scapula_captioned.jpg')"
/>
</div>
</body>
</html>