WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

View previous topic View next topic Go down  Message [Page 1 of 1]

1Accespted Awesome Affilates on Wed Jan 05, 2011 2:29 am

RockerMan

avatar
Technician
Technician
Awesome Affilates
Creating attractive affiliate links


Today we are going to learn how to make a very pretty and effective affilates pannel. It can be used on a forum or a standard HTML page. As always you can view a demo on the bottom of the page. You can also download the files required to complete this project there too. OK, lets get started!

STEP 1: First off we need some basic HTML:

Code:
<div id="affilates">
    <span>Our Affilates:</span>
 
    <a class="webartz" title="Web Artz" href="http://www.webartzforum.com"></a>
    <a class="webartz" title="Web Artz" href="http://www.webartzforum.com"></a>
    <a class="webartz" title="Web Artz" href="http://www.webartzforum.com"></a>
    <a class="webartz" title="Web Artz" href="http://www.webartzforum.com"></a>
    <a class="webartz" title="Web Artz" href="http://www.webartzforum.com"></a>
    <a class="webartz" title="Web Artz" href="http://www.webartzforum.com"></a>
    <a class="webartz" title="Web Artz" href="http://www.webartzforum.com"></a>
    <a class="webartz" title="Web Artz" href="http://www.webartzforum.com"></a>
    <a class="webartz" title="Web Artz" href="http://www.webartzforum.com"></a>
    </div>


STEP 2: CSS Sprites:

A sprite is basically multiple graphics combined into one single file. To display a single image from the master image, one would use the background-position property in CSS, defining the exact position of the image to be displayed. Facebook amkes good use of CSS sprites... The main advantages of using sprites are: * Fewer images for the browser to download, which means less http requests. * Total images size is generally smaller. * Rollover image appears instanlty on mouseover. For this example, we are going to create a color version and a grayscale version and merge them into one file as you can see below:



Code:
#affilates {
    width: 783px;
    display: block;
    clear: both;
    border: 1px solid #eee;
    padding: 10px 5px;
    margin: 15px auto;
    text-transform: uppercase;
    font-weight: bold;
    color: #666;
}
#affilates span {
    display: block;
    float: left;
    padding: 0 10px;
    height: 20px;
    line-height: 20px;
}
#affilates a {
    display: block;
    float: left;
    height: 20px;
    padding: 0 10px;
}
a.webartz {background: url(img/webartz.png) no-repeat 0 0; width:87px;}
a.webartz {background: url(img/webartz.png) no-repeat 0 0; width:87px;}
a.webartz {background: url(img/webartz.png) no-repeat 0 0; width:87px;}
a.webartz {background: url(img/webartz.png) no-repeat 0 0; width:87px;}
a.webartz {background: url(img/webartz.png) no-repeat 0 0; width:87px;}
a.webartz {background: url(img/webartz.png) no-repeat 0 0; width:87px;}
a.webartz {background: url(img/webartz.png) no-repeat 0 0; width:87px;}
a.webartz {background: url(img/webartz.png) no-repeat 0 0; width:87px;}
a.webartz {background: url(img/webartz.png) no-repeat 0 0; width:87px;}
 
    /*mouseover*/
    a:hover.webartz,
    a:hover.webartz,
    a:hover.webartz,
    a:hover.webartz,
    a:hover.webartz,
    a:hover.webartz,
    a:hover.webartz,
    a:hover.webartz,
    a:hover.webartz {background-position: 0 -30px;} /* reveal color version */


In the initial state, we only want to see the grayscale version. In order to do that, we set the background-position property to “0 0″ in our CSS. On mouseover, we change background-position to “0 -30px” to reveal the color version.
(If you want to learn more about sprites, check this excellent tutorial from Nick: CSS Sprite Tutorial)

STEP 3: The JavaScript:

I have commented the JS. It should be self-explanatory but if you have any questions, ask below.

Code:
window.addEvent('domready', function(){
 
    var sponsors = $$('#affilates a').setStyle('opacity', 0.5); // Set opacity to 0.5 for grayscale image
 
    sponsors.set('tween',{duration:200, wait:false}).addEvents({
 
        //On mouseenter
        'mouseenter': function(){
            this.setStyle('background-position','0 -30px'); //Reveal color image
            this.get('tween').start('opacity',1); //set opacity to 1
        },       
 
        //on mouseleave
        'mouseleave':function(){
            this.setStyle.delay(500,this,['background-position','0 0']); //set back initial background-position
            for grayscale image
            var tween =  this.get('tween');
            tween.start.delay(500, tween,['opacity',0.5]); //set back initial opacity
        }
 
    });
});


STEP 4: The Final Links

Finally, add links to the Mootools 1.2 and colorize.js in the head of your html document:

Code:
<script src="js/mootools-1.2.1-core-yc.js" type="text/javascript"></script>
<script src="js/colorize.js" type="text/javascript"></script>

You can view a demo here: http://graphics-post.com/affilates/

Enjoy and Thanks! Smile

Notice : This tutorial is copyrighted by WebArtz Forum. You may not publish it on anywhere without written permission from the administrators.



Last edited by RockerMan on Wed Jan 05, 2011 3:07 am; edited 1 time in total

http://www.graphics-post.com/

2Accespted Re: Awesome Affilates on Wed Jan 05, 2011 2:33 am

Guest


Guest
Great tut and the js makes it even more pretty Very Happy
I think you should place a link to the css sprites tuts so that they can understand how to use them Wink

3Accespted Re: Awesome Affilates on Wed Jan 05, 2011 3:08 am

RockerMan

avatar
Technician
Technician
I added the link in the web page but forgot to add it in the post Razz

Hey, Add the part 2 link in your first tutorial Smile and vise versa Wink

http://www.graphics-post.com/

4Accespted Re: Awesome Affilates on Wed Jan 05, 2011 3:11 am

Guest


Guest
I always liked sprites..but i am always bored to start measuring Razz

A question,where is the download link? Rolling Eyes

5Accespted Re: Awesome Affilates on Wed Jan 05, 2011 4:17 am

RockerMan

avatar
Technician
Technician
Nick wrote:
A question,where is the download link? Rolling Eyes

At the bottom of the page next to the demo button Wink

http://www.graphics-post.com/

6Accespted Re: Awesome Affilates on Wed Jan 05, 2011 9:28 am

verrell123

avatar
Registered Member
Registered Member
They cool!

http://www.freshartz.co.cc/

7Accespted Re: Awesome Affilates on Wed Jan 05, 2011 7:53 pm

RockerMan

avatar
Technician
Technician
Thanks Smile

http://www.graphics-post.com/

8Accespted Re: Awesome Affilates on Wed Jan 05, 2011 8:13 pm

Matti

avatar
Registered Member
Registered Member
Very nice tutorial. but do we need to use 2 images.

http://csshelp.forumotion.net/

9Accespted Re: Awesome Affilates on Wed Jan 05, 2011 8:29 pm

Guest


Guest
Maki wrote:Very nice tutorial. but do we need to use 2 images.

you can use 2 images(standard and hover) for a better effect Smile using css sprites.

10Accespted Re: Awesome Affilates on Wed Jan 05, 2011 10:13 pm

RockerMan

avatar
Technician
Technician
As nick said you could use two images but I mad the MooTools JS for a sprite so you would have to alter the JS to get the same effect Smile

Mucch easier to use a sprite Razz

http://www.graphics-post.com/

11Accespted Re: Awesome Affilates on Wed Jan 05, 2011 10:25 pm

Unknown Data

avatar
Registered Member
Registered Member
Great work - thumbs up! Very Happy

http://woops.dk

12Accespted Re: Awesome Affilates on Wed Jan 05, 2011 10:36 pm

RockerMan

avatar
Technician
Technician
Thanks UD Smile

http://www.graphics-post.com/

13Accespted Re: Awesome Affilates on Sat Jan 15, 2011 6:30 pm

ankillien

avatar
Administrator
Administrator
Tutorial Accepted

14Accespted Re: Awesome Affilates on Sat Jan 15, 2011 10:10 pm

RockerMan

avatar
Technician
Technician
Thanks ani Smile

http://www.graphics-post.com/

15Accespted Re: Awesome Affilates on Thu Feb 10, 2011 8:38 pm

verrell123

avatar
Registered Member
Registered Member
Congrats! Very Happy
Spoiler:

It was useful for webartz cool affilates

http://www.freshartz.co.cc/

16Accespted Re: Awesome Affilates on Sun Jul 08, 2012 7:02 am

Teknas

avatar
Registered Member
Registered Member
Rocker, Your Demo link does not seem to work for me.

http://gaminghub.forumotion.com

17Accespted Re: Awesome Affilates on Sun Jul 08, 2012 7:25 am

Mr.Joker

avatar
Mr. WebArtz
Mr. WebArtz
Same for me.

18Accespted Re: Awesome Affilates on Tue Jul 10, 2012 5:30 pm

Ado '-.-

avatar
Registered Member
Registered Member
Mr.Joker wrote:Same for me.

19Accespted Re: Awesome Affilates on Fri Jul 13, 2012 11:07 am

aldoani


Registered Member
Registered Member
Thanks

http://dowan.7olm.org/

Sponsored content


View previous topic View next topic Back to top  Message [Page 1 of 1]

Permissions in this forum:
You cannot reply to topics in this forum