[celandine]

I've been playing around with an idea for a nav/ menu/ whatever using area maps and javascript image swaps.... the javascript is dreamweaver-generated which is embarrassing but it works, sort of.

check it out.

I don't really have any acute issue with it - I'd just like to hear some views, especially ideas about how to make it tighter coding-wise, lighter and generally better... also alternative ways of doing the same thing... easier, quicker ways...(except flash. I know flash could do it in two minutes. I wanted it to be non-flash).

thanks for taking a look

[haku]

Nice little concept, I like it. It works well!

As something to enhance it a little, if you could make the images you swap in into animated gifs, you could have the color fade in when the image is swapped in. It may make it a little smoother.

But I quite like it the way it is.

[Beavis]

Wow. I love it.
I think users and clients will too.

A couple of points.

One concern I would have is that I`m not sure how good Search engines are at
following href links within an <area> tag.
Since there are no <a> tags in your script, SEO could be an issue.

Another is that, people using screen readers will have trouble with it. So there is accessability to thinkabout as well.

The easiest way of overcoming those I guess is to include a simple no-frills text based <ul> menu somewhere
on the page. The footer probably.

On a somewhat unrelated note, I`m not sure that you need all of those Meta-tags.
I could be wrong but I think the only ones you really need are "title", "http-equiv",
"description" and "keywords (even this is debateable since almost none of the search engines use it for indexing now)".


Nice work.

This post has been edited by Beavis: 23 July 2008 - 07:11 PM

[haku]

You can add a ul navigation, and have javascript hide it. That way if the user has javascript turned off, or is using a screen reader, they will still have navigation, but in every other case it will not be visible.

[celandine]

Quote

You can add a ul navigation, and have javascript hide it. That way if the user has javascript turned off, or is using a screen reader, they will still have navigation, but in every other case it will not be visible

that's an interesting notion. I might try it...

Quote

One concern I would have is that I`m not sure how good Search engines are at
following href links within an <area> tag.

yes I was thinking about that... what I might try to do is make it a set of layered PNG's and do the swaps through CSS hover...... I think it should work that way too...... then the area map will be gone and all I'll need javascript for would be to hack the png transparency for IE6

anyhow thanks for the comments!!!

[Beavis]

Quote

yes I was thinking about that... what I might try to do is make it a set of layered PNG's and do the swaps through CSS hover...... I think it should work that way too...... then the area map will be gone and all I'll need javascript for would be to hack the png transparency for IE6 biggrin.gif

That might be better, but probably not much. And probably not worth the effort you would put in.
If I understand correctly you are talking about wrapping images inside <a> tags? Search Engines and screen readers still dont really like that either. They prefer text.

So I would try Hakus suggestion or if you dont like fooling around with Javascript you could
just make a simple <ul> menu and then use the the CSS "display:hidden" property if you really dont want to display it. I think screen readers work with CSS turned off anyway.
Its a bit of a grey area though as the "display:hidden" property tends to be abused by Black SEO merchants and so its frowned on in some circles.

Hope it helps.

[benbacardi]

Beavis, on Jul 24 2008, 07:46 AM, said:

just make a simple <ul> menu and then use the the CSS "display:hidden" property if you really dont want to display it. I think screen readers work with CSS turned off anyway.

I wouldn't do that: many screen readers do ignore content with the display:hidden CSS property.

[celandine]

yeah it's sort of like having white text on a white background, trying to cram more keywords into your page content... What I would do, probably, is simply have an alternative, proper menu - either in the header or the footer most likely - and keep this one for fun/ design purposes. What I was thinking with PNG's was simply that it would allow me to skip the JS.... which feels like 'cleaner' code to me for some reason. maybe because I don't write my own JS, so I don't even know how clean/ tight the code is - all I know is whether it works or not. So if I can do it in plain html/css, then I know I wrote every line of code with my own two hands, as it were...................... I guess that's why I thought of doing it that way.

[Beavis]

Quote

What I would do, probably, is simply have an alternative, proper menu - either in the header or the footer most likely - and keep this one for fun/ design purposes.

That seems like the best approach to me.
I`d leave what you`ve done "as is" plus have the text menu on page as a backup.

Keep in mind too that if you change to using a collage of PNG files as you suggested you`ll still need to use Javascript to fix the IE6 bug (probably)

PLUS

the CSS hover attribute only works for text links in IE6. It won`t work on images.

[jameson]

Wow, nice job Celandine- this turned out awesome!

It would be interesting to see if this could be done with pure CSS, but Beavis is probably right that it would be more effort than it's worth. You'd end up at that tricky place between lag time for CSS image rollovers and lack of cross-browser PNG support.

Although if you have the time and really want to give it a go....

I'd try using the single-image rollover method. You would basically make seven images of your stack of blocks and combine them into one big image with one on top of the other. (file-size shouldn't be too big because you could optimize the blocks way down). Then you'd do something like this:

#wrapper{
	 display:block;
	 width:500px;
	 height:500px;
	 margin:0 auto;
	 background:transparent url("images/blockstack.jpg") scroll no-repeat 0 0;
	 }

a#japaneseBlock{
	 display:block;
	 width:200px;
	 height:200px;
	 position:absolute;
	 left:200px;
	 top:50px;
	 }

a#japaneseBlock:hover{
	 background:transparent url("images/blockstack.jpg") scroll no-repeat -500px 0;
	 }

I haven't tested this or anything and I'm probably missing something important, but it seems like it might work. The only problem is that every link would be a square, so you'd lose out on the perfectly-shaped hovers you get from the image maps, so the best solution would probably be to stick with what you've got, and add a nice unobtrusive footer with text links.

[haku]

That method is called CSS sprites. It's actually a really good method, because it means less requests by the browser when you are downloading a page, speeding up download time. I try to use it as much as possible, and I think google pretty much puts every piece of their site into one image and uses this. Or at least they group together large numbers of site pieces.

But you don't need to re-declare your whole background in the hover state, you just use

background-position: 0 -500px; // adjust the numbers as necessary

to move the background.

[jameson]

haku, on Jul 24 2008, 07:56 AM, said:

background-position: 0 -500px; // adjust the numbers as necessary

to move the background.

Ah yes, good point

[celandine]

oh I am definitely going to try that out Thanks guys!!!

[TJSingleton]

I'm sure it could be done in CSS. I'm half tempted to try it myself, but I have other things I should do.

[EncoderDecoder]

wow, thanks for this one! I just have to improve it a little and this might work well with the website I'm making..

again thanks a lot..!