Can this be done in Javascript or DHTML? (From Flash)

views:

answers:

Can this be done in Javascript or DHTML? (From Flash)

Please check this link:

http://www.kings-mall.co.uk/index.php?id=5

Check the mall layout, it's done in flash. I was wondering if this can be done in Javascript or DHTML? But the list at the bottom would be links instead. When the mouse hover at one position/category like 'Fashion and Sports' it would highlight a lot of links and its position on the map.

What do they call this function? Maybe you've encountered something like this already before, can you post it here?

Thanks!

+2 A:

Yes this can quite easily be done if you're versed in Javascript or even better any library like jQuery. You could always attach additional attributes to those links underneath and use CSS3 selectors to select all of them and add some CSS class to them to highlight them all at once.

The same thing goes for floor map.

Regarding map layout: it can be set using HTML+CSS surely. And similar to links these layout boxes can use image sprites so changes would be fast and would actually look very similar to this experience presented in Flash. But since there are many of them I'd suggest positioning them relatively to some DIV container. And to make them even better accessible put them from 1 to X in HTML code and then size and position them using CSS.

Robert Koritnik 2010-06-30 12:26:30

Why is being versed in jQuery *better* than being versed in JavaScript?

J-P 2010-06-30 12:27:27

It's like knowing how to drive a car with automatic gears.

David Dorward 2010-06-30 12:28:43

.. And not knowing how to drive one with manual gears...

J-P 2010-06-30 12:33:33

Don't know if it's better, but it's way simpler if you are to use it only for one project, and doesn't want to get into javascript (not my case though ;)I was just wondering, for the "store map", are there other ways to do it except using <map> and <area>? Using floating imgs seems like a nigthmare, and I don't know other equivalents. I don't know if W3C recommands <map> for accessibility

Michael Lumbroso 2010-06-30 12:38:09

…and not knowing what happens when the oil reservoir is empty, or even that it exists. Using a framework can save you a lot of hassle, but IMHO one should at least really know JavaScript itself (and DOM manipulation).

Marcel Korpel 2010-06-30 12:41:29

It's more or less something like [this newspaper preview](http://www.volkskrant.nl/vk-online/VK/20100630___/1_010/#original), where articles consist of multiple divs, that are simultaneously highlighted when mousing over one of them.

Marcel Korpel 2010-06-30 12:44:12

@Marcel Korpel: No this newpaper is even better because it animates/fades highlighting. ;)

Robert Koritnik 2010-06-30 12:58:30

Yes, this can be done with JavaScript, although I've not encountered something like it before.

ps. Please stop using the term 'DHTML'... and welcome to SO.

J-P 2010-06-30 12:26:56

just wondering what's wrong with DHTML? there's a popular site dedicated to that content.

Bandai2 2010-06-30 12:39:04

http://en.wikipedia.org/wiki/Dynamic_HTML the uses paragraph explains why it is deprecated nowadays (if not always been outdated ^^). Basically, it's really a nightmare for developpers to have cross browser versions that fully work.

Michael Lumbroso 2010-06-30 12:57:46

@Michael: in fact, that has nothing to do with DHTML and I don't agree with that article. The situation is basically still the same (though different, as things like testing for `document.all` is no longer needed), but we still manipulate the DOM dynamically (after all, I don't see many uses of JavaScript if we don't) and we still have to cope with differences between browsers. IMHO ‘DHTML' is just a buzzword, like many things are called ‘AJAX’ nowadays, even if XML is not involved with it.

Marcel Korpel 2010-06-30 13:07:59

Have a look at this example it is very similar to what you are after using JQuery and CSS/HTML. Here are the examples and resources for this demo.

Shadi Almosri 2010-06-30 12:56:30

ansaurus

tags:

views:

answers:

Can this be done in Javascript or DHTML? (From Flash)

related questions