html - 从 Visio 图表或 JPEG 文件在 HTML 中创建悬停效果

Question

我想知道是否可以为我的网页设计实现这种情况。

我有公司 ITIL 图，我想让它显示指向每个相应框的文件下载的超链接(鼠标悬停/悬停效果)我应该为此创建一个 HTML 表格还是从 VISIO 图表 .vsd 文件创建图像映射？

因此，当用户将鼠标悬停在其中一个框上方时，它应该在另一页中显示指向该文档的超链接，然后单击该 URL 转到该特定文档。

Answer 1

您实际上可以这样做，但我不能为您编写完整的代码，这需要相当长的时间。

要制作矩形，您可以使用简单的矩形 .jpg 图像完美地制作它们，使用 css 定位它们，这将非常容易做到。

然后将这些图像与文件链接:

悬停效果，

阅读本教程仅了解简单的 css 定位:

http://kyleschaeffer.com/best-practices/pure-css-image-hover/

更高级但更有趣的效果:

http://www.sohtanaka.com/web-design/css-on-hover-image-captions/

祝你好运。

也许如果你的问题更具体，我就能给你更多的帮助!

编辑:

在回复您的评论时，我认为这可能会起到作用:

<div id="description" style="height:50px;"></div>
<ul id="list-images">
    <li><img src="img/img1.jpg"><div style="display: none;">description 1</div></li>
    <li><img src="img/img2.jpg"><div style="display: none;">description 2</div></li>
    <li><img src="img/img3.jpg"><div style="display: none;">description 3</div></li>
    <li><img src="img/img4.jpg"><div style="display: none;">description 4</div></li>
</ul>
<script type="text/javascript">
$(function(){
    $('#list-images li img').hover(
    function(){
        $('#description').html($(this).next().html());
    },
    function(){
        $('#description').html('');
    });
});
</script>