JavaScript图像翻转-需要字幕，如何添加字幕？

Question

I'm using javascript to make a sort of vacation slideshow, where the main image changes depending on what link you're hovering over. 我正在使用JavaScript制作休假幻灯片，其中主图像会根据您所悬停的链接而变化。 I'm still new to javascript, and have spent the last two hours trying to figure out how to get the image to now display a caption underneath, I'd really love some help. 我对javascript还是很陌生，并且花了最后两个小时试图弄清楚如何使图像现在在下面显示标题，我真的很乐意提供帮助。

This is my js file: 这是我的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;
        }
        }

My links are in a table next to the main image. 我的链接在主图像旁边的表格中。 I just can't figure out where the captions even go! 我只是不知道字幕在哪里！

Answer 1

I think this is what you are looking for 我想这就是你要找的

https://jsfiddle.net/84cfy1Lf/ https://jsfiddle.net/84cfy1Lf/

HTML 的HTML

<body>
  <section id="country-stuff">

  </section>
</body>

SCRIPT 脚本

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 的CSS

.image {
  width: 150px;
}

JavaScript图像翻转-需要字幕，如何添加字幕？

问题描述

1 个解决方案

解决方案1
0 2017-10-24 22:43:56

JavaScript图像翻转-需要字幕，如何添加字幕？

问题描述

1 个解决方案

解决方案1 0 2017-10-24 22:43:56

解决方案1
0 2017-10-24 22:43:56