Jump to content
  • Advertisement
Sign in to follow this  
d000hg

[web] Image behind text.

This topic is 4735 days old which is more than the 365 day threshold we allow for new replies. Please post a new topic.

If you intended to correct an error in the post then please contact us.

Recommended Posts

I want to have a row of links at the base of a page as the navigation system for the site. Currrently these are jsut in cells for a 1-row, 100% wide table. I'd like the ability to have a small image behind either the current page you're on, or which entry the mouse is over. My first problem is how to get the text over the image - if I use positioning it puts the image outside the cell of the table wheras I want the image and text both positioned centrally in the cell. Secondly comes making the image be visible/invisible. I want to use the CSS filters to let it fade nicely (although an alpha .png would do the job). How can I make an image appear when the mouse is over the link? I'm looking primarily for CSS, but javascript is fine too.

Share this post


Link to post
Share on other sites
Advertisement
Quote:
Currrently these are jsut in cells for a 1-row, 100% wide table.

You can do it without a table. Just put the links in a <div> ahd set the padding for it to be greater than or equal to the padding on the links.

Quote:
I'd like the ability to have a small image behind either the current page you're on, or which entry the mouse is over.

See this: background-image property

Quote:
Secondly comes making the image be visible/invisible. I want to use the CSS filters to let it fade nicely (although an alpha .png would do the job).

There are no 'filters' in CSS.

Quote:
How can I make an image appear when the mouse is over the link?

:hover pseudo-element

Share this post


Link to post
Share on other sites
I don't understand about the padding thing can you elaborate? And how does this ensure the links have spaces between them - ideally spread evenly over the whole width of the browser window.

The background-image doesn't allow you to resize the image or set any attributes for it I think. I actually want to have the image as an element of the page, underneath the link element.

For filters, see this page for examples

Is :hover available for everything, or just links? How'd I use this to make an image appear/disappear? I suppose if I was setting it as a background I could change that, or can I have an image which is set to be invisible, then in the :hover section for that style I set it to be visible?

Thankyou.

Share this post


Link to post
Share on other sites
Quote:
Original post by d000hg
Is :hover available for everything, or just links? How'd I use this to make an image appear/disappear? I suppose if I was setting it as a background I could change that, or can I have an image which is set to be invisible, then in the :hover section for that style I set it to be visible?


In IE it only works on links (though some javascript can fix that). Under a decent browser it's supported on all elements. You'd do somethink like this:


<!-- HTML -->
<div class="item">
<a href="#">blah</a>
</div>

/* CSS */
div.item { background-image: none; }
div.item:hover { background-image: url(file.png); }



Share this post


Link to post
Share on other sites
Quote:
Original post by d000hg
I don't understand about the padding thing can you elaborate? And how does this ensure the links have spaces between them - ideally spread evenly over the whole width of the browser window.

The behavior for inline elements is that their padding overlaps with the padding of the containing box. You need to set the padding of both to be equal to achieve the desired padding. Play around with it and you'll see what I mean. To distribute links evenly across the width of the page, use percent units for width.

Quote:
The background-image doesn't allow you to resize the image or set any attributes for it I think. I actually want to have the image as an element of the page, underneath the link element.

The alternative is to use absolutely positioned layers.

Quote:

For filters, see this page for examples

That's a feature of Internet Explorer, not CSS.

Quote:
Is :hover available for everything, or just links? How'd I use this to make an image appear/disappear? I suppose if I was setting it as a background I could change that, or can I have an image which is set to be invisible, then in the :hover section for that style I set it to be visible?

:hover applies to all elements, though Internet Explorer only behaves correctly for links. You can assign background images to links, and you can control visibility with CSS (display property), so you can do everything you talked about with the :hover pseudoselector.

Share this post


Link to post
Share on other sites
Sign in to follow this  

  • Advertisement
×

Important Information

By using GameDev.net, you agree to our community Guidelines, Terms of Use, and Privacy Policy.

Participate in the game development conversation and more when you create an account on GameDev.net!

Sign me up!