Best way to put hyperlink text over images

[FrontPage97]

What would be the best way to have the row of wood buttons (repeating image) on the left with hyperlinked text over top of the images? Have a single sidebar DIV, then insert a table (1 column and 6 rows), then insert images in each table cell, then create hyperlinks with each word of text?

 

[Phreaddee]

As a <ul>. A table wouldn't be a good way...

<nav>
<ul>
<li><a href="/home.html">Home</a></li>
<li><a href="/listen.html">Listen</a></li>
<li><a href="/history.html">History</a></li>
<li><a href="/staff.html">Staff</a></li>
<li><a href="/blog.html">Blog</a></li>
<li><a href="/contact.html">Contact</a></li>
</ul>
</nav>

you would then style it in the css.
you would need these at the very least.

nav {}
nav ul {}
nav ul li {}
nav ul li a {}
nav ul li a:hover {}

 

[FrontPage97]

Interesting. I guess the image is inserted in the style sheet. I will try that. Hopefully I can find a YouTube tutorial on this.

This is strange because all of the videos on YouTube involve inserting the image into a table. I tried that earlier but then strange things started happening. As soon as I added hyperlinks to the words, the images started tiling.

 

[Phreaddee]

I wouldn't hold much faith in you tube videos..
and you should know now if not soon that anything that suggests tables for ANYTHING other than tabular data is a bad bad idea.

search for a tutorial on making a ul menu.
yes the background image would be on the stylesheet.

 

[chrishirst]

For coding the "best" way, "best" being a subjective term, is to set the image as a background to an element, put the anchor element in the same container and apply display: block; to it so it fills the parent element, making the entire element "clickable".

 

[Phreaddee]

http://jsfiddle.net/phreaddee/NtxPD/1/

something like this...

 

[FrontPage97]

http://jsfiddle.net/phreaddee/NtxPD/1/

something like this...

Holy moly! That's cool! I will try that. I was working off a Dreamweaver template but this will work much better.

set the image as a background to an element, put the anchor element in the same container and apply display: block; to it so it fills the parent element, making the entire element "clickable".

Last night I figured out how to set the image background within the element. Block makes it easier. That I was missing.

Is this something that should be added too?

$(function () {
var path = location.pathname.substring(1);
if (path) $('nav li a[href$="' + path + '"]').attr('class', 'selected');
});

 

[Phreaddee]

Is this something that should be added too?

in a <script>
at the bottom of the document, just before the </body>

it will add a selected class to your menu when the path and link match.

 

[FrontPage97]

What purpose does that Java scripting serve? I tried deleting it and it didn't seem to change anything.

Yeah, much better to have a plain square wood background and then instead use CSS to create rounded corners.

 

[Phreaddee]

it will add a selected class to your menu when the path and link match.

It won't affect the menu if you remove it (except it won't add a selected class obviously)

 

[ronaldroe]

What purpose does that Java scripting serve?

You'd add a style to the class .selected, which would make the current page's link look different from the others.