Question

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

这是我编写的代码。

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

}

我注意到每个人都引用图像的方式很多都是http，但我的图像只是像museum.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执行此操作的示例，我在此过程中引用了几条评论来帮助解释正在发生的事情

编辑：请注意，它确实以fullsize显示图片，但您必须向下滚动才能看到它，我已经发表评论的javascript，我希望您花时间阅读评论并尝试理解发生了什么，但你会成为根据你的需求设计它的人

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

包含一个样本片段。

我们创建了一个包含少量链接的示例HTML页面，其目的是根据操作显示相关图像（此处我包含click操作/事件;它可以更改为基于任何内容根据您的要求）在这些链接上。

回答问题：

我在理解JavaScript和如何制作方面遇到了很多麻烦这发生了

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

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（描述;当图像无法加载时，我们必须至少显示我们的意图）。

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

}

4 个答案: