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

你好，我正在尝试使用Javascript和HTML为我的网站编写代码。我在我的网站上有一些图片，当你把鼠标放在链接上时，我想在屏幕的一侧弹出或浮动这些图片。我知道我需要在HTMl中使用onmouseover来实现这一点，但我在理解Javascript以及如何实现这一点上遇到了很多困难。我正在使用的这本书说，要在函数中添加一条语句，以便使用pix将元素的HTML代码值设置为文本 文件和描述是否已经使用javascripts语言？它知道这些是什么意思吗？或者我需要为它们添加防龋用品吗？如果是，我该怎么做？ 我知道它希望文件值是文件名，描述是HTML的alt部分中的文本

这是我做的编码

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

功能开关PIX（文件，描述）{
document.getElementById（“pix”）.innerHTML=（“”）；

}

---

我注意到很多人引用图片的方式都是通过http，但我的图片只是一个像museum.jpg这样的图片文件，我想它是从一个文件夹中取出并放到网站上的。我能像平常一样引用它吗？“我认为主要的问题是你使用的concat

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

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

功能开关PIX（文件，描述）{
document.getElementById（“pix”）.innerHTML=（“”）；
}
开关PIX（“https://http.cat/100“，”继续“）；

---

正如您标记jquery一样，我已经冒昧地使用了它

下面是一个关于如何使用jquery实现这一点的示例，我在这一过程中加入了一些注释来帮助解释发生了什么

编辑：请注意，它确实以全尺寸显示图像，但您必须向下滚动才能看到它，我已经制作了一个带注释的javascript，希望您能够花时间阅读注释并尝试了解发生了什么，但您将是根据您的需要对其进行样式设置的人

//美元符号是包含与jquery相关的所有内容的对象
//如果在找不到jquery时出错，请确保html中有jquery脚本引用。
//$（“css选择器”）-在这个类别中，类“picture”
//hover有两个参数，第一个是当鼠标移到元素上方时要调用的函数
//第二种是鼠标离开鼠标时
$（“.picture”）.hover（函数（）{
//“this”是悬停在上面的元素
//$（this）.attr（propertyName）从“this”返回属性
//在包含的代码段中，添加了变量名作为字符串文本
//这意味着如果我们做这样的事情
//var src=“image.jpg”；
//var img1=“”；
//var img2=“”；
//img1现在是=>
//img2现在=>
//一定要理解上面这5行中发生的事情，我相信这就是你自己的剧本中出错的地方。
$（“#pictureDisplayContainer”）.html（“”）；
},
函数（）{
$（“#pictureDisplayContainer”）.html（“”）；
})；

。图片{
显示：块；
最大宽度：100px；
边缘底部：10px；
}
#pictureDisplayContainer>img{
显示：块；
最大宽度：100%；
}

出于纯粹的懒惰，我在缩略图和全尺寸图中使用了相同的图像，我建议使用两种不同的图片，它们都经过缩放以符合目的

如果你的图像是你风格的一部分，而不是关键内容的一部分，请将它们用作背景图像，并使用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)

//首先了解有关串联的更多信息。
功能开关PIX（文件，描述）{
document.getElementById（“pix”）.innerHTML=（“”）；
}
//把你想让人们看到的第一张照片放在第一位
switchPix（“firstPicURL”、“我的alt”）；
var pix=document.getElementById（“pix”）；
//使用第二张图片进行鼠标悬停
pix.addEventListener（'mouseover'，function（）{
switchPix（“secondPicURL”、“我的alt”）；
}，假）；
//将firstPic用于mouseout
pix.addEventListener（'mouseout'，function（）{
switchPix（“firstPicURL”、“我的alt”）；
}，错）

包括一个示例代码片段供大家使用

我们创建了一个带有少量链接的示例HTML页面，目的是在这些链接上显示基于操作的相关图像（这里我包括

单击
操作/事件；可以根据您的要求将其更改为任何内容）

回答以下问题：

我在理解JavaScript和如何制作JavaScript方面遇到了很多困难
这件事发生了

如上所述，我们在元素
a
中包含了
click
事件的处理程序。在操作（即click）时，将使用我们传递的参数调用处理程序。在本例中，是一个文件（图像）和描述（图像描述）


功能开关PIX（文件，描述）{
//构建HTML
var html=“”；
//找到元素并将其设置为内部HTML
document.getElementById（“pix”）.innerHTML=html；
}
.navlist{
列表样式类型：无；
}
李先生{
显示：内联块；
填充：20px；
背景色：#F3；
}
李娜先生{
文字装饰：无；
颜色：#76432a；
}

我的网站








请不要思考，要确定。