View Full Version : HTML Link Preview a Document when rolled over with mouse

12-23-2010, 06:09 PM
Hello again,

I would like to have an HTML link on my website display a preview of the document it is linked to when rolled over with the mouse.

The website is: http://www.frankltrading.com

I would like to have the link: 'Daily Grain Report', on the site above, pop up a preview of the report it is linked to so the user can read the first part of the report before clicking on it.

I have looked into rollovers and I have created a .gif that simply has the word 'Daily Grain Report' on it.

Do I have to create a .gif of each days' report and then update the rollover image to swap in this image each time? If so there is a problem. I have tried to convert the report into a .gif with Fireworks, but receive the following error; "Fireworks has encountered a problem with the HTML in this table. Verify that the HTML is valid".

Is there an easier and less forceful means of doing this?

Your input is greatly appreciated.
Thank you and Merry Christmas

12-23-2010, 10:03 PM
Beautiful piece of web design that mate.

Sorry I couldn't resist.

Do you mean an actual visual thumbnail of the item?

These could be done with just CSS using the :hover pseudo class or could be cool and animate them with jQuery.

12-26-2010, 07:18 AM
there is a solution possibly. there are a number of asp.net activex controls you can install on the server which will service your needs for an automatic preview of a document. for Word documents, there's
and for excel there's
and for html there's

12-26-2010, 07:20 AM
for pdf's

12-26-2010, 07:23 AM
you will find that asp.net is very application-enhanceable, however, you will probably end up paying for the solution you need.

and, windows/asp.net hosting is typically more expensive than UNIX hosting, although the prices have come down significantly.

12-26-2010, 09:16 AM
you could try something like

<a href="blah.html" onmouseover="document.getElementById('1').src='/images/report1thumb.png'" onmouseout="document.getElementById('1').src='/images/hover.png'">
<img border="0" id="1" src="/images/hover.png">

part of the problem comes in when the link is not active. there should be something there, otherwise there is going to be no real estate to hover over for the mouse pointer. so you need to have a small image that says "hover"

by the way, you can draw text with gd or imagemagick and PHP, since most of your stuff is just plain text. formatting it might be a pain though.

12-26-2010, 09:19 AM
sorry about throwing you off with some useless answers earlier. (well, not totally useless, info is useful elsewhere)

12-26-2010, 12:40 PM
Jmichae3 have you been reading a different post?