[General] Navigation Troubles

[Mike]

I'm confused, but I think you can solve it by switching this pattern,

        <div class="img">im1</div>
        <div class="img">im2</div>
        <div class="img">im3</div>
        <div class="img">im4</div>

.. With this pattern,

        <div class="img im1"></div>
        <div class="img im2"></div>
        <div class="img im3"></div>
        <div class="img im4"></div>

Because you can stack classes, it's not much difference. You're saying you have the images stored as a bg property in a CSS class, right? (instead of inside the div as <img> tag?)

Yes. But I don't really understand what you're saying to do?

[s-p-n]

You can just make a class for each image and assign it to a div. Optionally, you can have a global "img_nav" class that's assigned to all of the nav image divs. That way if you tinker with the sizes and positioning, you can do it in the main image_nav class and they'll always be relatively the same.

For example,

<div class="img_nav image_home"></div>

Where img_nav handles the positioning and float properties, and image_home contains a background image for the "home" link. Then for the other links,

<div class="img_nav image_etc"></div>

See what I mean?

Though it's always best to use mark-up for navigation, (given not all browsers support JavaScript; cell phones, hand-helds, etc), you can use:

onclick="top.location.href='location.html'"

If you can, use the <a> tag with navigation instead for compatibility reasons.

It's kind of better to use <img> tags just so you can wrap it in a link tag. Though it's not as efficient, it always works. (unlike JavaScript)

Edit: You cannot wrap block elements with inline elements. So you can't wrap a <div> with an <a> tag, (because <a> is an inline element; meant to stylize/apply mark-up to text-like elements, and <div> is a block element, which can hold any kind of element, more/less) Since the <img> tag is an inline element (built to be placed with/around other inline elements and text), it obviously works, but that's why. So think of an inline "container" element to replace the DIV, like the span tag. Not sure how IE handles it, but technically you should be able to wrap <a> tags around the inline span tag. So if you assign those classes to a span tag instead of a DIV like I showed above, it might actually work.

For IE, it's probably safest to test it first, and if it fails, use style="display:inline". If that fails, then try it in Firefox. If that fails, I must be confused on how inline elements interact with each-other.

The goal would be to assign an <a> tag to each container which holds the classes for your navigation images, so you don't have to use slow, bulky <img> tags.

[Mike]

Okay, I fixed it. I just changed the <div> tags, to <img> tags. How can I now make it so when hovering it, it changes the image URL to ad an "h" on the end? (So 'images/navigation_homepage.png' changes to 'images/navigation_homepageh.png')

[s-p-n]

You'd actually want to do pre-loading first,
http://www.pageresource.com/jscript/jpreload.htm

Followed by some "Hot Hover action,"
http://www.pageresource.com/jscript/jhover.htm