Hello, I'd like to add an image preview when the cursor goes over a link. The website is on blogger. I found this code and it works. The only (big) problem is that it only works for simple text, not link. In this formula is useless to me, since when I click it sends me to the image location. Could someone help? plz Thanks
It looks like this http://www.cinematografree.com/2010/05/test.html Code (markup): And I want the text to be a link to another page, not the image. Anyone?
Try to use e.g. this plugin: http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery Here is in action http://cssglobe.com/lab/tooltip/03/
Code like this may works. <head> <script src="path to/jquery.js" type="text/javascript"></script> <script> /* * Url preview script * powered by jQuery ([url]http://www.jquery.com[/url]) * * written by Alen Grakalic ([url]http://cssglobe.com[/url]) * * for more info visit [url]http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery[/url] * */ this.screenshotPreview = function(){ /* CONFIG */ xOffset = 10; yOffset = 30; // these 2 variable determine popup's distance from the cursor // you might want to adjust to get the right result /* END CONFIG */ $("a.screenshot").hover(function(e){ this.t = this.title; this.title = ""; var c = (this.t != "") ? "<br/>" + this.t : ""; $("body").append("<p id='screenshot'><img src='"+ this.rel +"' alt='url preview' />"+ c +"</p>"); $("#screenshot") .css("top",(e.pageY - xOffset) + "px") .css("left",(e.pageX + yOffset) + "px") .fadeIn("fast"); }, function(){ this.title = this.t; $("#screenshot").remove(); }); $("a.screenshot").mousemove(function(e){ $("#screenshot") .css("top",(e.pageY - xOffset) + "px") .css("left",(e.pageX + yOffset) + "px"); }); }; // starting the script on page load $(document).ready(function(){ screenshotPreview(); }); </script> </head> <body> <p>If you want to see screenshot with caption, roll over this <a href="http://www.cssglobe.com" class="screenshot" rel="cssg_screenshot.jpg" title="Web Standards Magazine">Css Globe</a> link.</p> </body> Code (markup): In the rel attributte is path to an image.