I need an image popping up when the visitor of my site moves the cursor over a thumbnail image.
The image needs to show in the same place *inside* the the respective thumbnail, no matter where the users cursor entered the thumbnail. I attached an image to show you what it should look like in mouseover state.
This overlay image needs to be clickable, with an url that will get the nuber of the thumbnail passed in a variable, like this:
/[url removed, login to view] The link with this url must be on the page with the thumbnails, so that the script that creates the thumbnail table can insert the right id for every thumbnail.
The rest of the thumbnail should lead to another url, if clicked. (see second image attachment)
On mouseout, the images should be hidden again.
There will be several (up to 60) of these thumbnails on the page, in a table. You can find a test-version with the first row of thumbnails in the html attachment.
The attached html file is to be used, including all the mouseover code that it contains at the moment.
The script needs to be very lightweight.