Javascript for hover over one image to bring up another with description in a fixed place.

Question

Hey so I'm trying to create the JavaScript, functions and HTML coding for the website I am working on.I have 8 small images on the left hand side. A default large image on the right. I want to make it so when I hover over each small image another different large image replaces the default large image on the right hand side with a description between the two.

LEFTSIDE

small image1
small image2
small image3
small image4
small image5
small image6
small image7
small image8

MIDDLE

                           *small image1 title*
                        *small image1 description*

RIGHTSIDE

                                                                *LARGE IMAGE*

Changes from default large image through 8 different large images (and descriptions, default image has no description) when you hover over small images. All is horizontal from each other.

Any help much appreciated. Thanks

Answer 1

You can put the middle and rightside in a div, say it has the id rightdiv, then you can the load the content of this div with ajax. Onhover you can perform a new ajax call which will populate the rightdiv with the new content retrieved from the ajaxcall.

Take a look at a javascript libary like jquery. There you can find predefined functions for ajax calls and hover etc.