Encodez Blog » Uncategorized http://encodez.com/blog Computer language design is just like a stroll in the park. Jurassic Park, that is. — Larry Wall Thu, 22 Jul 2010 05:34:40 +0000 en hourly 1 http://wordpress.org/?v=3.0 Adding link to Banner Image (Multi-transition Banner) http://encodez.com/blog/2010/02/adding-link-to-banner-image-multi-transition-banner/ http://encodez.com/blog/2010/02/adding-link-to-banner-image-multi-transition-banner/#comments Wed, 03 Feb 2010 09:55:02 +0000 Muneer Shaheed http://encodez.com/blog/?p=319 I received comments and email from many of our visitor requesting “How to make the large image as clickable link?” under the post Javascript Multitransition Banner released. I am writing this post in response to them.

To create a link on the large image of the banner,, we need to alter the function encTransformBanner = function(ids)
Add the following code at the end of the function

1
2
3
4

	$("div#bannerContainer").css("cursor", "pointer");
	$("div#bannerContainer").click(function() {		
		window.location.href = encBannerTexts[ids][2];
	});

The final code will looks like following for the function.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

encTransformBanner = function(ids)
{
    encCurrentBanner = ids;
    var currentBg = $("div#bannerContainerCover").css("background-image");
    $("div#bannerContainer").css("background-image", currentBg);
 
    var cssObj = {"opacity": "0.1", "background-repeat": "no-repeat", "background-image": "url(" + encImg [ids].src + ")"}
    $("div#bannerContainerCover").css(cssObj);
 
    if(encTransitionType == "slide")
    {     
        $("div#bannerContainerCover").css("background-position", "-50px 0");                
        $("div#bannerContainerCover").stop().animate({backgroundPosition:"(0 0)", opacity:"1"}, {duration:600});
    }    
    else if(encTransitionType == "slideDown")
    {      
        $("div#bannerContainerCover").css("background-position", "0 -50px");                
        $("div#bannerContainerCover").stop().animate({backgroundPosition:"(0 0)", opacity:"1"}, {duration:600});
    }
    else
    {      
        $("div#bannerContainerCover").stop().animate({opacity:"1"}, {duration:1000});
    }
 
	$("div#bannerContainer").css("cursor", "pointer");
	$("div#bannerContainer").click(function() {		
		window.location.href = encBannerTexts[ids][2];
	});
}

Cool. Thats it. :)

]]> http://encodez.com/blog/2010/02/adding-link-to-banner-image-multi-transition-banner/feed/ 1