Help!, Rollover Code Help Options

[dyindyinjohnson]

Okay, I finally got the rollover thing down except I need to move my rollover image somewhere else.
How?

CODE

<style type="text/css">
div, table, tr, td, tbody {background-color:white;}

a.home{
display: block;
height: 50px;
width: 116px;
overflow: hidden;
background-image: url("http://img24.imageshack.us/img24/2995/homexzf.png");
background-position: center;
background-repeat: no-repeat;
}

a.home:hover{
background-image: url("http://img24.imageshack.us/img24/9471/home2w.png");
background-position: center;
background-repeat: no-repeat;
}
</style>


<a href="http://www.google.com/" class="home">

[Mikeplyts]

Exactly what do you mean? Do you need to position the rollover?

Just make DIV container to position it:

CODE

<div style="position:absolute; top:###px; _top:###px; left:50%; _left:50%; margin-left:-###px; _margin-left:-###px;">
<a href="http://www.google.com/" class="home">
</div>

[dyindyinjohnson]

Thank you! I was just putting the DIV container in the wrong place.
Thanks!

[Mikeplyts]

lol, no problem.

[dyindyinjohnson]

Okay how do I get the rollovers in one line? (Not stacked)

CODE

<style type="text/css">
div, table, tr, td, tbody {background-color:transparent;}

a.home{
display: block;
height: 50px;
width: 116px;
overflow: hidden;
background-image: url("http://img24.imageshack.us/img24/2995/homexzf.png");
background-position: center;
background-repeat: no-repeat;
}

a.home:hover{
background-image: url("http://img24.imageshack.us/img24/9471/home2w.png");
background-position:center;
background-repeat: no-repeat;
}

a.message{
display: block;
height: 50px;
width: 176px;
overflow: hidden;
background-image: url("http://img193.imageshack.us/img193/5378/message2p.png");
background-position: center;
background-repeat: no-repeat;
}

a.message:hover{
background-image: url("http://img22.imageshack.us/img22/9484/messagexma.png");
background-position:center;
background-repeat: no-repeat;
}

a.comment{
display: block;
height: 50px;
width: 192px;
overflow: hidden;
background-image: url("http://img30.imageshack.us/img30/4681/commentlhk.png");
background-position: center;
background-repeat: no-repeat;
}

a.comment:hover{
background-image: url("http://img33.imageshack.us/img33/2288/comment2.png");
background-position:center;
background-repeat: no-repeat;
}
</style>



<div style="position:absolute; top:20px; _top:50px; left:50%; _left:50%; margin-left:-250px; _margin-left:-150px;">

<a href="http://home.myspace.com/index.cfm?fuseaction=user" class="home"></a>
<a href="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=XXXXXXXX" class="message"></a>
<a href="http://comment.myspace.com/index.cfm?fuseaction=user.viewProfile_commentForm&friendID=XXXXXXXX&MyToken=8b2108be-2301-4485-a399-e782c86fa854" class="comment"></a>

</div>

Reason for edit: Please use [codebox] tags instead of [code] tags when posting longer codes. - Mike

[Mickey]

Replace your code with this:

CODE

<style type="text/css">
div, table, tr, td, tbody {background-color:transparent;}

a.home{
height: 50px;
width: 116px;
overflow: hidden;
background-image: url("http://img24.imageshack.us/img24/2995/homexzf.png");
background-position: center;
background-repeat: no-repeat;
}

a.home:hover{
background-image: url("http://img24.imageshack.us/img24/9471/home2w.png");
background-position:center;
background-repeat: no-repeat;
}

a.message{
height: 50px;
width: 176px;
overflow: hidden;
background-image: url("http://img193.imageshack.us/img193/5378/message2p.png");
background-position: center;
background-repeat: no-repeat;
}

a.message:hover{
background-image: url("http://img22.imageshack.us/img22/9484/messagexma.png");
background-position:center;
background-repeat: no-repeat;
}

a.comment{
height: 50px;
width: 192px;
overflow: hidden;
background-image: url("http://img30.imageshack.us/img30/4681/commentlhk.png");
background-position: center;
background-repeat: no-repeat;
}

a.comment:hover{
background-image: url("http://img33.imageshack.us/img33/2288/comment2.png");
background-position:center;
background-repeat: no-repeat;
}
</style>



<div style="position:absolute; top:20px; _top:50px; left:50%; _left:50%; margin-left:-250px; _margin-left:-150px;">

<a href="http://home.myspace.com/index.cfm?fuseaction=user" class="home"></a>
<a href="http://messaging.myspace.com/index.cfm?fuseaction=mail.message&friendID=XXXXXXXX" class="message"></a>
<a href="http://comment.myspace.com/index.cfm?fuseaction=user.viewProfile_commentForm&friendID=XXXXXXXX&MyToken=8b2108be-2301-4485-a399-e782c86fa854" class="comment"></a>

</div>

[theerinkal]

^^ You could've just told him to remove the display: block; in the code.

[dyindyinjohnson]

yeah that made them just disappear.

[Mikeplyts]

Put them all in a separate DIV container.

CODE

<div style="position:absolute; top:###px; _top:###px; left:50%; _left:50%; margin-left:-###px; _margin-left:-###px;">
<a href="#" class="home">
</div>

<div style="position:absolute; top:###px; _top:###px; left:50%; _left:50%; margin-left:-###px; _margin-left:-###px;">
<a href="#" class="message">
</div>

<div style="position:absolute; top:###px; _top:###px; left:50%; _left:50%; margin-left:-###px; _margin-left:-###px;">
<a href="#" class="comment">
</div>

Replace the pound symbols with the appropriate values. You don't have to remove the display:block; from your codes.


EDIT:
Or are you putting them all in one DIV container? If you are, you should use a different rollover code.

[dyindyinjohnson]

Well I had them all in one DIV container but putting them in separate ones like you said, worked.

[Mikeplyts]

Ok. There is another code you could use though that will allow you to have them all in on DIV container. I could tell you if you want.

[dyindyinjohnson]

If you want to, I mean if the code is easier, than sure.

[Mickey]

Try this method.

[Mikeplyts]

^ What Mike posted can work, or you could also try one of my favorite methods which can be found here.

[dyindyinjohnson]

^That one is kinda confusing. XD
But with the one Mike posted works, except for having them staked up again.

[Mikeplyts]

You could also do the same method that I linked to but just more simpler.



Simply open the image that represents the normal state of the rollover. Now make the canvas size's height twice as high as the original image's height. Make sure your normal state is in the top half. Now paste the image that represents the hover state of the rollover into the bottom half. Save that image and upload it to the web.

Once you have the URL of the image, use this code:

CODE

<style>
a.CLASS_NAME {width:###px; height:###px; background-image: url("URL_OF_SAVED_IMAGE"); background-repeat:no-repeat; background-position:top left;}
a.CLASS_NAME:hover {width:###px; height:###px; background-image: url("URL_OF_SAVED_IMAGE"); background-repeat:no-repeat; background-position:bottom left;}</style>

I assume you know how to replace the fillers and such. One thing though, when you're putting in the value for the height, put half of the height of the saved image since your saved image is double the height of the rollover. We do this because you'll notice for the background position, we have top left as the value before the rollover and bottom left as the value after rollover. Since we inserted half the height, we cut the saved image in two halves and the background position tells the image to display either the top or bottom half.

Now, all you have to do is add your DIV code and your done. (Remember, just repeat the first code for every new rollover.)

CODE

<div style="position:absolute; top:###px; _top:###px; left:50%; _left:50%; margin-left:-###px; _margin-left:-###px;">
<a href="#" class="CLASS_NAME"> <a href="#" class="CLASS_NAME2"> <a href="#" class="CLASS_NAME3">
</div>

Just replace the fillers accordingly.

Hopefully that wasn't too confusing.

[dyindyinjohnson]

Filters as in the class name?

[Mikeplyts]

Yep. Along with the pound signs and all that mumbo jumbo.

[dyindyinjohnson]

Haha. Okay. And for the images it would look like this:
Correct?

[Mikeplyts]

Correct.

[Mikeplyts]

^Or that. haha.



I didn't even see his codes had display:block; in them. LOL. xD

[dyindyinjohnson]

I'm just going to use my old code, and us seperate DIV Containers, that seems to work the best. And the quality of the images looks best when I do it that way.
Thanks you two!

[fixtatik]

Float, float, float.

Whenever you have something with a block display, and you want them lined up next to each other, use float:left;. You can also use display:inline-block;, but that doesn't work in older browsers, specifically Firefox 2.

[dyindyinjohnson]

^ Thanks. Works, much easier than having like 6 Div Containers.


If I wanted to put a space between each rollover, instead of being pushed together, wouldn't I use: &nbsp;?

[Mickey]

Posts merged.