从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>