Pictures as Links

Do you wonder how fancy sites have buttons to designate links instead of our (boring) basic underlined text?
Well, it’s actually pretty simple–they just design the buttons themselves in Photoshop and put the jpg. files into Dreamweaver. After the files are in, they work like every other image file.

In my exploration on the topic I’ve found that to control positioning, it’s easiest to create a container of whatever dimensions you want your link bank to be and float it to whatever side of the page you want it to be on. Remember to clear your float after you’ve closed this div in the HTML page, or else everything below the div on your site will wonk out to the float specifications.
Also keep in mind that the size of your links container will be highly dependent on the size of the images that you create to be your buttons. Be specific and pay attention to what size they are (mine are 100px by 100px, but that’s large by normal standards…maybe 50px wide and 25px tall? Or measure in ems if you’re more comfortable with that. Either way: be Specific! Know your pixel ratios and totals for the whole site. It’s the little details that are going to mess this up, so make sure all of your numbers are copacetic and your sizes are standardized.

Next, go back into your CSS sheet and put in a new class (.) I found this handy dandy page on W3 schools that tells you how to make an image bank. Use the code for their .thumbnail class in your own CSS. Trust me. It will save your life and teach you how to use floats efficiently.

Go back to your HTML page and start putting in the .thumbnail divs, dragging each of your images for your fancy self-designed link buttons into each of the .thumbnail divs. Make sure the .thumbnail divs are nested inside of your #links_container div, or else they will just hang on the page instead of being contained in your links bank. Mess with the pixel number of the float margin in CSS until everything fits nicely and bada-bing you’ve got a bank of links.

Now, if your site is set up properly, click on each of the button images and link them to their corresponding pages using the link tool (looks like a compass on the bottom toolbar). Save everything, upload it to your server and you should be up and running, much fancier than before.


~ by hobodreams on September 28, 2010.

%d bloggers like this: