我正在使用 javascript 制作一种假期幻灯片，主要图像会根据您将鼠标悬停在哪个链接上而变化。我对 javascript 还是个新手，过去两个小时一直在努力弄清楚如何让图像现在在下方显示标题，我真的很想得到一些帮助。
这是我的js文件:
var canadaOver = new Image();
canadaOver.src = 'images/canada.jpg';
var italyOver = new Image();
italyOver.src = 'images/italy.jpg';
var ukraineOver = new Image();
ukraineOver.src = 'images/ukraine.jpg';
var japanOver = new Image();
japanOver.src = 'images/japan.jpg';
var icelandOver = new Image();
icelandOver.src = 'images/iceland.jpg';
document.getElementById("canada").onmouseover = doMouseOver;
document.getElementById("italy").onmouseover = doMouseOver;
document.getElementById("ukraine").onmouseover = doMouseOver;
document.getElementById("japan").onmouseover = doMouseOver;
document.getElementById("iceland").onmouseover = doMouseOver;
function doMouseOver(evt) {
var anchor = evt.target || evt.srcElement;
var img = document.getElementById("destinations");
var textDiv = document.getElementById('caption');
if (anchor.id == "canada") {
img.src = canadaOver.src;
}
else if (anchor.id == "italy")
{
img.src = italyOver.src;
textDiv.innerHTML = imgText;
}
else if (anchor.id == "ukraine") {
img.src = ukraineOver.src;
textDiv.innerHTML = imgText;
}
else if (anchor.id == "japan") {
img.src = japanOver.src;
textDiv.innerHTML = imgText;
}
else if (anchor.id == "iceland") {
img.src = icelandOver.src;
textDiv.innerHTML = imgText;
}
}
我的链接位于主图像旁边的表格中。我什至不知道字幕放在哪里!
最佳答案
我想这就是你要找的
https://jsfiddle.net/84cfy1Lf/
HTML
<body>
<section id="country-stuff">
</section>
</body>
脚本
var countries = ['canada', 'italy', 'ukraine', 'japan', 'iceland'];
countries.forEach(function(country) {
var img = document.createElement('img');
img.id = country;
img.className = 'image';
img.src = 'https://upload.wikimedia.org/wikipedia/commons/thumb/0/06/CallingCodesWorld-Labeled.svg/500px-CallingCodesWorld-Labeled.svg.png' // swap for real image director: images/' + country +'.jpg';
var mouser = document.getElementById('country-stuff').appendChild(img);
mouser.addEventListener('mouseover', function(event) {
doMouseOver(event);
})
});
var caption = document.createElement('div');
caption.id = 'caption';
document.getElementById('country-stuff').appendChild(caption);
function doMouseOver(event) {
var anchor = event.target;
populateCountryText(anchor)
}
function populateCountryText(anchor) {
document.getElementById('caption').innerHTML = event.target.id;
return caption;
}
CSS
.image {
width: 150px;
}
关于Javascript 图像翻转 - 需要标题，如何添加？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46919365/