Creating hover effect in HTML from visio diagram or JPEG file

Question

Hi All,

I'd like to know if it is possible to achieve this scenario for my web design,

I've got company ITIL diagram that I'd like to make it show the hyperlink to a file download for each respective box (mouse hover / over effect) should I create a HTML table for this or create image mappings from the VISIO diagram .vsd file ?

so when the user hover above one of the box it should display the hyperlinks to the document in another page then click that URL to go to that particular document.

anyone know how to achieve this ?

Thanks

Answer 1

You can actually do this but I can´t write the whole code for you, this takes quite a while.

To do the rectangles you can perfectly do them with simple .jpg images of rectangles, position them with css, that will be fairly easy to do.

Then to link those images with the file:

The on hover effect,

Read this tutorial for only simple only css positioning:

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

For a more advanced but with more interesting effect:

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

Good luck.

Maybe if you are more specific with your question I´ll be able to helo you more!

EDIT:

In reply to your comment, I think this might do the job:

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