Question

更新了下面的外部JS表格代码 我正在尝试执行一个简单的照相馆。我的课程的任务是将鼠标悬停在一个小图像上，并在较大的框中显示alt文本和图像，当鼠标离开文本时，背景图像应显示为原始图像这是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.";
}

Answer 1

更新的javascript，我希望这可行，因为我还没有测试过它：

function upDate(PreviewPic){
    var imageLarge = document.getElementById("image");
    imageLarge.innerHTML += '<img src="'+PreviewPic.src+'">';
    imageLarge.innerHTML += PreviewPic.alt;
}

function unDo(){
    document.getElementById('image').innerHTML = "Hover over an image below to display here.";
}

upDate函数将使用(this)的{{1}}值，此元素将是PreviewPic，此变量将用于将src和alt插入onmouseover=""元素。我没有编辑unDo函数，这将重置#image元素的innerHTML。

Answer 2

我使用棱角分明，女巫过度杀人;但它的工作原理，您可以轻松添加更多图像。 :)

＆＃13;

var app = angular.module("MainApp", []);

app.controller("mainController", ["$scope", function($scope) {
    $scope.display = {};
    $scope.album = [{
        img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon.jpg",
        name: "Styling with a Bandana"
    }, {
        img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon2.JPG",
        name: "With My Boy"
    }, {
        img: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/389177/bacon3.jpg",
        name: "Young Puppy"
    }];
    
    $scope.newDisplay = function(item) {
        $scope.display = item;
    }
    
}]);

＆＃13;

div.gallery {
    box-sizing: border-box;
    width: 33%;
    display: inline-block;
}

＆＃13;

<!DOCTYPE html>
<html lang="en" ng-app="MainApp">

<head>
    <meta charset="UTF-8">
    <title>Photo Gallery</title>
    <link rel="stylesheet" href="main.css">
    <!--    <link rel="stylesheet" href="css/gallery.css">-->
</head>

<body ng-controller="mainController">
    <div class="display" ng-model="display">
        <img ng-src="{{ display.img }}" alt="">
        <h1>{{ display.name }}</h1></div>
    <div class="gallery" ng-repeat="item in album" ng-mouseover="newDisplay(item)">
        <img ng-src="{{ item.img }}" alt="">
    </div>

    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.js"></script>
    <script src="app.js"></script>
</body>

</html>

＆＃13;

Answer 3

这个有香草js工作，我评论过很多东西，你说你是为一个班级做的，如果它的编码类希望这有助于你学习。代码片段有效，但没有设计成一个好的方法，所以在你的编辑器中尝试一下css。

＆＃13;

//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.";
});

＆＃13;

<!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>

＆＃13;

无法执行事件

3 个答案: