为什么在悬停时更改源时这些 SVG 图像无法正确加载？答案

【问题标题】：Why do these SVG images not loading properly when changing source on hover?为什么在悬停时更改源时这些 SVG 图像无法正确加载？
【发布时间】：2016-05-02 15:20:37
【问题描述】：

我正在尝试使用 HTML 和 JavaScript 在悬停时在两个 SVG 文件之间切换来实现效果，但由于某种原因，当我悬停时，图像无法正确加载，而是显示默认缩略图，就好像文件不存在一样.此图像标签包含在纯 CSS 模式中，我正在使用 Blogger。顺便说一句，我知道我可能可以在 CSS 中使用 background-image 来做到这一点，但我真的很想用这种方法来做到这一点，因为如果我在 Blogger 中学会这样做，其他一些元素可以从这段代码中受益。我在 Google Drive 上托管 SVG 文件。

<div id='OrderForm' class='OrderFormWindow'>
    <div id='OrderFormBox'><a href='#CloseOrderForm'><img id='CloseButton' src='https://drive.google.com/uc?export=download&amp;id=0B72zeCWWNwv9MndXVXRVaTN6ZHM' onmouseover='closebuttonhover(this);' onmouseout='closebuttonunhover(this);'/></a></div>
</div>

<script type='text/javascript'>
//<![CDATA[
function closebuttonhover(CloseButton) {
    CloseButton.setAttribute('src', 'http://drive.google.com/uc?export=download&amp;id=0B72zeCWWNwv9QjdDdm80UFpNemM');
}
function closebuttonunhover(CloseButton) {
    CloseButton.setAttribute('src', 'http://drive.google.com/uc?export=download&amp;id=0B72zeCWWNwv9MndXVXRVaTN6ZHM');
}
//]]>
</script>

【问题讨论】：

标签： javascript html image blogger imagesource

【解决方案1】：

我的错误是在 JavaScript 函数中使用与 &amp 代码相同的 Google Drive 直接链接。一旦您更改并返回并链接有效。

【讨论】：