hover selection to show hidden items

Question

I am trying to set up a menu selection similar to what Mercedes-Benz Canada has when you choose a car and there is more then one body option. (http://www.mercedes-benz.ca/content/canada/mpc/mpc_canada_website/en/home_mpc/passengercars.flash.skipintro.html).

I have created it on here http://jsfiddle.net/sofew/db2BF/3/ I would like to hover over the coupe title and the info and pictures would change to the coupes list item.

I have tried various forms of jquery but I can not seem to have it work the way I am hoping. Can someone can point me in the right direction.

Answer 1

If you want a menu to appear based on the element you are hovering over you'll need to use AJAX. You can use the load() method in jQuery to fill a selected element with the returned value of an AJAX query.

What this means is that you only need a single hidden element, and when the onhover event is fired the div is cleared, populated with AJAX data and then displayed. You will just need to pass either an ID or the name of the vehicle to the method which accepts the AJAX query so that it can return the pertinent data.

If you specify your server side language I might be able to give you a more concrete example if you are unfamiliar with AJAX calls.

EDIT:

Ajax is really easy to do! All Ajax does is make a call to a function on your web server, and then take the result of that call and put it somewhere on your page without having to reload the page itself. If you're on Linux and using PHP then let's imagine you want to display the current server time on your page. You could make a function like this...

public function WhatTimeIsIt()
{
    return time();
}

And then create a div on your page with the id "time". Then all you need to do is in your jQuery, use the following call:

[event handler] {
    $('#time').load([path to the WhatTimeIsIt() function]);
}

And when ever that given event handler is fired, your time div will update to contain the current server time. A bit of a trivial example, but if you created a function which took a car ID as a parameter, got all the information on the car and formatted it into nice HTML and returned that, you'd have your solution.

Answer 2

I made a demo of something you can use: http://jsfiddle.net/DFXZn/22/ .

I recommend using $.ajax to grab the content. Visit here to learn about ajax calls: http://api.jquery.com/category/ajax/ . Let me know if this helps. Happy coding!