以下の外部JSシートコードを更新しました。簡単なフォトギャラリーを実行しようとしています。私のクラスのタスクは、小さな画像にカーソルを合わせて、代替テキストと画像を大きなボックスに表示することです。マウスがテキストを離れると、背景画像が元の状態で表示されます。htmlは次のとおりです。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Photo Gallery</title>
<link rel="stylesheet" href="css/gallery.css">
<script src = "js/gallery.js"></script>
</head>
<body>
<div id = "image">
Hover over an image below to display here.
</div>
<img class = "preview" alt = "Styling with a Bandana" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg" onmouseover = "upDate(this)" onmouseout = "unDo()">
<img class = "preview" alt = "With My Boy" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG" onmouseover = "upDate(this)" onmouseout = "unDo()">
<img class = "preview" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg" alt = "Young Puppy" onmouseover = "upDate(this)" onmouseout = "unDo()">
</body>
</html>
これが私の(壊れた)外部Javascriptシートです:
function upDate(PreviewPic){
var imageLarge= document.getElementById('image');
document.getElementById('image').innerHTML = PreviewPic.alt;
document.getElementById('image').backgroundImage =imageLarge.src;
}
function unDo(){
document.getElementById('image').innerHTML = "Hover over an image below to display here.";
}
これはバニラjsで動作し、私は多くのことをコメントしました、あなたはそのコーディングクラスがあなたが学ぶのに役立つことを願っていればあなたはクラスのためにそれをやっていると言いました。あなたがcssであるあなたのエディタで出てください。
//grabing the ellements by id
var imgOne = document.getElementById("img1");
var imgTwo = document.getElementById("img2");
var imgThree = document.getElementById("img3");
var displayText = document.getElementById("displayText");
var displayImg = document.getElementById("displayImg");
//add eventlisteners to events
//this can be done in the html; but i prefer it in the javaScript
// event listeners for first img
imgOne.addEventListener("mouseover", function () {
displayImg.src = imgOne.src;
displayText.innerHTML = imgOne.alt;
});
// to replace
imgOne.addEventListener("mouseout", function () {
displayImg.src = "";
displayText.innerHTML = "Hover over an image below to display here.";
});
// event listeners for second img
// adds the stuff
imgTwo.addEventListener("mouseover", function () {
displayImg.src = imgTwo.src;
displayText.innerHTML = imgTwo.alt;
});
// reverts stuff
imgTwo.addEventListener("mouseout", function () {
displayImg.src = "";
displayText.innerHTML = "Hover over an image below to display here.";
});
// event listener for third img
imgThree.addEventListener("mouseover", function () {
displayImg.src = imgThree.src;
displayText.innerHTML = imgThree.alt;
});
imgThree.addEventListener("mouseout", function () {
displayImg.src = "";
displayText.innerHTML = "Hover over an image below to display here.";
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Photo Gallery</title>
<link rel="stylesheet" href="css/gallery.css">
</head>
<body>
<div id = "image">
<!-- you could create a text node and append it rather than adding a p tag
but hard codeing it is a little easier -->
<img src="" alt="" id="displayImg">
<p id="displayText">Hover over an image below to display here.</p>
</div>
<img class = "preview" alt = "Styling with a Bandana" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg" id="img1">
<img class = "preview" alt = "With My Boy" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG" id="img2">
<img class = "preview" src = "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg" alt = "Young Puppy" id="img3">
<!-- i moved the script to the bottom so that you're html will load before the js
this can prevent some "can not get/append/set ****** to undefined" errors.
(i've heard either way is fine but this just the way i learned)-->
<script src="main.js"></script>
</body>
</html>
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加