使用Javascript编写html代码并更改文件和描述

Question

您好，我正在尝试使用 Javascript 和 HTML 为我的网站编写代码。当您将鼠标悬停在链接上时，我希望在我的网站上弹出或漂浮在屏幕一侧的图像。我知道我需要在 HTMl 中为此使用 onmouseover，但我在理解 Javascript 以及如何实现这一点时遇到了很多麻烦。我正在使用的书说要向我所做的函数添加一条语句，以将带有 pix 的元素的 HTML 代码的值设置为文本 file 和 desc 已经是 javascripts 语言了吗？它知道这些是什么意思吗，还是我需要为它们添加 cariables，如果是，我该怎么做？ 我知道它希望文件值是文件名，而 desc 是我 HTML 的 alt 部分中的文本。

这是我编写的代码。

function switchPix(file, desc){
document.getElementById("pix").innerHTML=("<img src=\"images/file.jpg\" width\"480\" height=\"270\" alt=\"desc\" />");

}

我注意到每个人引用图像的很多方式都是使用 http，但我拥有的图像只是一个图像文件，如博物馆.jpg，我想从文件夹中取出并放入网站。我可以像往常一样引用它吗？ "

Answer 1

如果您的图片是您的风格的一部分，而不是关键内容的一部分，请将它们用作背景图片并使用 css 更改它们（例如 img:hover）。对于效果，使用 css 中的过渡和动画。现在是 2016 年，现在它们得到了很好的支持。今年我将尽可能多的 UI 效果移到 CSS 中。

用纯js解决你的问题。

//First of all learn more about concatenation.
function switchPix(file, desc){
    document.getElementById("pix").innerHTML=('<img src="' + file + '" width="480" height="270" alt="' + desc + '" />');
}

//Place first pic you want people to see
switchPix("firstPicURL", "My alt");


var pix = document.getElementById("pix");
//Use second pic for mouseover
pix.addEventListener('mouseover', function(){
switchPix("secondPicURL", "My alt");
}, false);

//Use firstPic for mouseout
pix.addEventListener('mouseout',function() {
switchPix("firstPicURL", "My alt");
},false)

Answer 2

我认为主要问题是您使用的 concat

function switchPix(file, desc){
    document.getElementById("pix").innerHTML=('<img src="' + file + '" width="480" height="270" alt="' + desc + '" />');
}

switchPix("https://http.cat/100", "Continue");

https://jsfiddle.net/coins5/vu80586x/

Answer 3

由于您已标记 jquery，我冒昧地使用它。

下面是一个关于如何使用 jquery 执行此操作的示例，我在此过程中添加了几个 cmets 来帮助解释发生了什么

编辑：请注意，它确实以全尺寸显示图像，但您必须向下滚动才能看到它，我已经制作了一个注释 javascript，希望您能花时间阅读 cmets 并尝试理解发生了什么事，但您会根据自己的需要来设计它的样式

// The dollar sign is the object which contains everything related to jquery
// If you get an error about it not finding jquery, make sure you have the jquery script reference in the html.

// $("css selecter") - In this clase the class "picture"
// hover has 2 arguments, first is the function to call when your mouse moves in above an element
// 2nd is when your mouse leaves the lement
$(".picture").hover(function() {
// "this" is the element that is hovered above

// $(this).attr(propertyName) returns a property from "this"
// In the snippet you included, you added the the names of the variables as string literals
// That means if we do something like this

// var src = "image.jpg";
// var img1 = "<img src=\"src\" >";
// var img2 = "<img src=\"" + src  + "\" >";
// img1 is now => <img src="src" />
// img2 is now => <img src="image.jpg" />
// Be sure to understand what's going on in these 5 lines above, I do believe that's what went wrong in your own script.

	$("#pictureDisplayContainer").html("<img src=\"" + $(this).attr("data-displaySrc") + "\" />");
},
function() {
	$("#pictureDisplayContainer").html("");
});

.picture {
  display: block;
  max-width: 100px;
  margin-bottom: 10px;
}
#pictureDisplayContainer > img {
  display: block;
  max-width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Out of pure laziness, I've used the same image for thumbnail and full-size, I recommend having 2 different pictures which are both scaled to match the purpose.</p>
<img class="picture" src="http://cdn.artobserved.com/2014/02/Andisheh-Avini-Marianne-Boesky-Gallery-8.jpg" data-displaySrc="http://cdn.artobserved.com/2014/02/Andisheh-Avini-Marianne-Boesky-Gallery-8.jpg" />
<img class="picture" src="http://www.wentrupgallery.com/media/gallery.jpg" data-displaySrc="http://www.wentrupgallery.com/media/gallery.jpg" />

<div id="pictureDisplayContainer"></div>

Answer 4

包括一个示例 sn-p 来玩。

我们创建了一个带有少量链接的示例 HTML 页面，其想法是根据操作显示相关图像（这里我包括 click 操作/事件；它可以根据您的要求）在这些链接上。

回答问题：

我在理解 JavaScript 以及如何制作时遇到了很多麻烦 发生这种情况

如上所述，我们已将click 事件的处理程序包含到元素a 中。在操作（即单击）时，将使用我们传递的参数调用处理程序。在这种情况下 - file（图像）和 description（图像的描述）。

function switchPix(file, desc) {
  // construct the HTML
  var html = "<img src='" + file + "' width='480' height='270' alt='" + desc + "' />";

  // Find the element and set as it's inner HTML
  document.getElementById("pix").innerHTML = html;
}

.navlist {
  list-style-type: none;
}
.navlist li {
  display: inline-block;
  padding: 20px;
  background-color: #F3F3F3;
}
.navlist li a {
  text-decoration: none;
  color: #76432a;
}

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta charset="utf-8" />
  <title>My Website</title>
</head>

<body>

  <div class="nav">
    <ul class="navlist">
      <li>
        <a href="#" onclick='switchPix("https://upload.wikimedia.org/wikipedia/commons/b/bf/Bucephala-albeola-010.jpg", "Duck");'>Duck</a>
      </li>
      <li><a href="#" onclick='switchPix("https://upload.wikimedia.org/wikipedia/commons/0/08/South_Shetland-2016-Deception_Island%E2%80%93Chinstrap_penguin_%28Pygoscelis_antarctica%29_04.jpg", "Penguin");'>Penguin</a>
      </li>
      <li><a href="#" onclick='switchPix("https://upload.wikimedia.org/wikipedia/commons/b/bb/Kittyply_edit1.jpg", "Cat");'>Cat</a>
      </li>
    </ul>
  </div>

  <div id="pix">
  </div>
</body>

</html>

我知道它希望文件值是文件名，而 desc 是 我的 HTML 的 alt 部分中的文本。

可以根据我们的选择来构造和调用 JavaScript 函数。在这种情况下，我们为图像元素提供源（文件）和 alt（描述；当图像无法加载时，我们至少必须显示我们想要的内容）。