1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Image preview on mouseover

Discussion in 'jQuery' started by SEOnazi, May 3, 2011.

0
  1. #1
    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 :)
     
    SEOnazi, May 3, 2011 IP
  2. SEOnazi

    SEOnazi Active Member

    Messages:
    23
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    58
    #2
    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?
    :)
     
    SEOnazi, May 4, 2011 IP
  3. Jan Novak

    Jan Novak Peon

    Messages:
    121
    Likes Received:
    5
    Best Answers:
    1
    Trophy Points:
    0
    #3
    Jan Novak, May 4, 2011 IP
  4. SEOnazi

    SEOnazi Active Member

    Messages:
    23
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    58
    #4
    I can't upload any plugin to blogger. I need a code to do the job.
     
    SEOnazi, May 4, 2011 IP
  5. Jan Novak

    Jan Novak Peon

    Messages:
    121
    Likes Received:
    5
    Best Answers:
    1
    Trophy Points:
    0
    #5
    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.
     
    Jan Novak, May 4, 2011 IP
  6. JonasProductions

    JonasProductions Peon

    Messages:
    33
    Likes Received:
    0
    Best Answers:
    0
    Trophy Points:
    0
    #6
    Google it ,very easy
     
    JonasProductions, May 5, 2011 IP