There are several techniques that might do part of what you want, but whether you can combine them or find a script that already combines them I don't know.
CSS Hoverpopups http://www.wickham43.net/hoverpopups.php can create a text panel positioned somewhere on the page using only CSS and you may be able to position the link over an image but I don't think it will be an invisible hover link.
You could use javascript or jquery for the text tooltip popup on the right. Google jquery tooltip, like this:-
http://flowplayer.org/tools/tooltip/index.html
The hover over the background image can be done with only css with two methods:-
The first method is an image map. They aren't used a lot, but work well; often used over a map of a country with links over each city, or over a photo of people with links for each person.
http://www.wickham43.net/imagemaps.php
The same effect can be done with a div or list (item 2 in link above) but I found that it needed a transparent image or the background image disappeared where the link is.
For a totally CSS solution try combining a hoverpopups with an image map but you probably will find a jquery solution for all you want.
Last edited by Wickham; 07 Aug 2010 at 06:14 AM.
Code downloaded to my PC will be deleted in due course.
WIN7; IE9, Firefox, Opera, Chrome and Safari for Windows; screen resolution usually 1366*768.
Also IE6 on W98 with 800*600 and IE8 on Vista 1440*900.
Reply With Quote
