[Wsuug] JavaScript Rollovers and New Window Done Right?

[Jon Zuck]

Nice job, Zach.

I normally use simple CSS backgrounds and text replacement for the rollover
effect, but some people don't like that, and there's more than one way to
skin a cat.Creative. To me, it's strange not to see the image tags in the
source code... (I need to get more familiar with Ajax!) But it works.

The effect of course depends on JavaScript being on... other solutions
depend on CSS being on... Very interesting! The only disadvantage I can
think of, is that not having the image tags written in the file along with
the list tags, might not be as advantageous from an SEO perspective. That
way, the spiders could see the LI text, the IMG ALT, and  TITLE (don't
forget TITLE!) to chew on in the markup. On the other hand, the text in
menus usually isn't prime indexing material anyway! :-)

jon

On Tue, Apr 1, 2008 at 4:05 PM, Zach Young <young.zach at gmail.com> wrote:

> I've been working out some functions to help keep ugly JavaScript out
> of my pretty XHTML markup. I've made two so far, and I wanted to get
> some input on them (especially the rollover one) from a Web standards
> and usability perspective. These use MooTools, but it shouldn't be
> hard to adapt them to any JS framework.
>
> 1. Rollovers - Links start as text links. Then with JavaScript, I get
> links with a class of 'rollover' and convert them to images. The id of
> the link tag ends up being the base of the image and the text that
> started out in the link becomes the alt text for the image. Two events
> are added for mouseover and mouseout.
>
> This is mostly solid, but I'm wondering what all of you think about
> starting with text links and upgrading to images. I'm not attached to
> this idea; I just figured since I was already doing all this magic I
> might as well go all the way for the demo. It is an interesting
> option, but I wanted some other perspectives on it. I'm pretty sure it
> would be fine for an SEO standpoint (I'm not duping anyone, the images
> and alt text match the link text), but what about for users without
> JavaScript? They would just get text whereas before they would have at
> least gotten an image. The advantage would be that I could style the
> text links so that the user without JavaScript could tell they were
> links (with hover,active,visited,etc. CSS styles.) Anyways, thoughts?
>
> 2. New window - I'm pretty sure this is fine. The only problem I can
> see is that if someone doesn't have JS, the link will open in the same
> window. But I'd rather keep any target business out of my XHTML. This
> function looks for links with the class of ''newWindow' and adds
> onclick events that make them open in a new window.
>
> Demos of both can be found here:
> http://www.zachyoung.org/lab/research/rollovers-new-window.html
>
> The first two are just rollovers and the last two are rollovers that
> open in a new window. The images load slow if you have your cache
> disabled, but I can work that out later. This is just a proof of
> concept demo. Last I checked it worked in IE6/7 and FF2, but I'm not
> really worried about that yet. I can worry about cross-browser issues
> later.
>
>
> Thanks,
>
> Zach
> zachyoung.org
> _______________________________________________
> Wsuug mailing list
> Wsuug at list.wsuug.org
> http://www.thelinuxlink.net/mailman/listinfo/wsuug
>



-- 
Jon

http://www.frimmin.com
http://www.wildwebweaving.com
http://esperantohr.wordpress.com/

"Just sit there right now. Don't do a thing. Just rest. For your separation
from God is the hardest work in the world."
~Hafiz
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://www.thelinuxlink.net/pipermail/wsuug/attachments/20080402/dfa6362e/attachment.html