Making a Band Layout, Version 2 |
Making a Band Layout, Version 2 |
![]()
Post
#1
|
|
![]() Senior Member ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: Staff Alumni Posts: 7,063 Joined: Jul 2008 Member No: 670,288 ![]() |
MySpace Band Layout Tutorial Welcome to Version 2 of the Band Layout Tutorial! This tutorial will help you out in making those professional looking layouts that graphic designers are making for these rising bands. A lot of people are getting into this kind of thing, and resources for Band Layouts are very slim, so I hope this topic helps anyone out that needs the help and resources. Rules:
|
|
|
![]() |
![]()
Post
#2
|
|
![]() Senior Member ![]() ![]() ![]() ![]() ![]() ![]() ![]() Group: Staff Alumni Posts: 7,063 Joined: Jul 2008 Member No: 670,288 ![]() |
Working With Rollover Images This, as well is an optional part of the tutorial, but it is also one of the hardest parts. You're going to have to pay super close attention to what I say so you can grasp a better understanding of how to do this. There are other methods as to how to do rollovers with images, but I find my way a lot easier, especially if you slice your images to make them links. There isn't really any explanation needed as far as the codes go to get this to work, you just need to be able to position things correctly, and this should be a snap for you. Here is the code you will use for your rollovers: CODE .topbannerhover {position:absolute; top:###px; left:50%; margin-left:###px; _margin-left:###px; width:###px; height:###px; z-index:1;} div.topbanner a:hover{ border-top: none; opacity: 0.0; filter: alpha(opacity=0); width: 0px; height: 0px; z-index:1; } .topbanner {position:absolute; top:###px; left:50%; margin-left:###px; _margin-left:-###px; width:###px; height:###px; z-index:1;} I'll try to give the best explanation of this I can, but it's pretty self-explanatory. The first code for positioning will be the hover layer (the rollover images), the middle code causes the image to change on rollover. The only thing you need to change in that code is the name of the layer to the name of the layer used for positioning the image before hovering. In this case for the coding, the code with the rollover images will be .topbannerhover, and the two parts, div.topbanner a:hover and .topbanner, for the image before rollover. If you are having trouble understanding, the screenshots provided will give you an idea of what you're going to be doing: Screenshots are temporarily unavailable... The .topbannerhover and .topbanner need the same exact attributes for positioning, that way one is on top of the other. When you put the DIV classes up for them, they will look something like this: CODE <div class="topbannerhover"> Image rollover code </div> <div class="topbanner"> Sliced image code </div> Your on-hover layer will always come first. Once you're done, save changes and check to see if you've done it correctly. If not, keep trying. If you do get it, keep doing the same process any other time you may need it. |
|
|
![]() ![]() |