CODEWITHSUNDEEP
csshtml
David E.
David E.

Reputation: 3

HTML/CSS Image Navigation Bar

I'm making a navigation bar for my website. The navigation bar is a picture, and I'm wondering if in CSS you can section off parts of the image to link to different pages. Is this possible? If so, how?

The map tag suggestion worked perfectly. Thanks!

Upvotes: 0

Views: 3287

Answers (3)

user456814
user456814

Reputation:

You can use an html MAP tag, see http://www.w3.org/wiki/HTML/Elements/map

Upvotes: 1

Matt Ball
Matt Ball

Reputation: 359776

Two different ways to do what you want:

  • An image map (doesn't really use CSS, though), or

  • Use proper HTML markup+CSS sprites, something like:

    <ul class="nav">
    <li><a href="foo">Foo</a></li>
    <li><a href="bar">Bar</a></li>
    <li><a href="baz">Baz</a></li>
</ul>

and combine this with CSS background-position.

Upvotes: 2

Henry Hammond
Henry Hammond

Reputation: 173

You Should try CSS image sprites http://stylemeltdown.com/2007/10/22/image-sprite-navigation-with-css/ for your navigation. Or you could use an image map, but I think the CSS sprites are a more modern and standard way to do this.

Upvotes: 1

Related Questions