Help - Search - Members - Calendar
Full Version: Help!
Forums > Resource Center > Webmasters' Corner > Webmasters' Corner Resolved Topics
dyindyinjohnsonlayouts
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>
dyindyinjohnsonlayouts
Thank you! I was just putting the DIV container in the wrong place.
Thanks!
Mikeplyts
lol, no problem. happy.gif
dyindyinjohnsonlayouts


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>
Mike
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.
Mike
OMG you noticed the difference! Want a cookie?
dyindyinjohnsonlayouts
QUOTE(Mike @ Jul 22 2009, 05:23 AM) *
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>

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. aniwink.gif


EDIT:
Or are you putting them all in one DIV container? If you are, you should use a different rollover code. mellow.gif
dyindyinjohnsonlayouts
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. shrug.gif
dyindyinjohnsonlayouts
If you want to, I mean if the code is easier, than sure.
Mike
Try this method.
Mikeplyts
^ What Mike posted can work, or you could also try one of my favorite methods which can be found here. wink.gif
dyindyinjohnsonlayouts
^That one is kinda confusing. XD
But with the one Mike posted works, except for having them staked up again. mad.gif
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. tongue.gif
dyindyinjohnsonlayouts
Filters as in the class name?
Mikeplyts
Yep. Along with the pound signs and all that mumbo jumbo.
dyindyinjohnsonlayouts
Haha. Okay. And for the images it would look like this:
Correct?
Mikeplyts
Correct. _smile.gif
Mike
My method should be able to display the links on a single line. Just remove display: block; from each rollover class.
Mikeplyts
^Or that. haha. laugh.gif



I didn't even see his codes had display:block; in them. LOL. xD
dyindyinjohnsonlayouts
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!
Mike
Is this alright for closing then?
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.
dyindyinjohnsonlayouts
^ 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;?
Mike
Posts merged.

That should do. If not, just add a spacer image in between or something. Or you can add padding on each link to move the next link over.
alek
or you could always add positioning elements to the link itself, this really cleans up your code

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;

position:absolute;
top: #px;
left: #px;
}

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"></a>
Mike
^That's recommended if the links are on different spots. In this case, it's unnecessary because the links are all in one line. Anyway, this is already resolved so I'll go ahead and close it. OP, PM me if you need it reopened. Topic closed & moved.
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.