Home
1
Awesome Affilates Wed Jan 05, 2011 2:29 am
RockerMan
Technician
Posts : 901
Points : 388
Age : 32
Location : Georgia
Browser :
| 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:
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: 
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.
STEP 4: The Final Links Finally, add links to the Mootools 1.2 and colorize.js in the head of your html document:
You can view a demo here: http://graphics-post.com/affilates/ Enjoy and Thanks!  |
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
