This is a message.

Using mouseover to switch tabs

Here we use the mouseover event to switch between tabs. This event can, for example, be used in the following type of product presentation setups:

Free version Commercial version Multidomain version
 

Lorem ipsum dolor

Consectetur adipiscing elit. Curabitur tempus, massa at facilisis aliquet, urna metus interdum felis, sit amet adipiscing justo neque eget risus.

Nullam ut ligula id dolor dapibus aliquam.

Maecenas molestie

Lacus ut blandit malesuada, sem magna varius enim, eu mattis elit justo in quam. Curabitur in magna. Nam luctus aliquet ante. Nam ut nunc. Quisque ligula nunc, molestie non, gravida sit amet, consequat eu, lectus. Proin aliquet nulla eget massa. Vestibulum ac dolor a tortor porta commodo.

In hac habitasse platea dictumst

Quisque mattis gravida est. Vestibulum orci nisl, egestas vel, pharetra quis, auctor nec, lectus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sodales massa quis nunc. Sed velit risus, feugiat ut, pharetra a, venenatis et, arcu.

standalone demo

HTML coding

You should notice that the tabs tool is not dependent upon any specific HTML structure. This example uses img tags as tabs and panes have no specific root element:

<div id="products">
<img src="/media/img/global/commerce/free.png"
alt="Free version" />
<img src="/media/img/global/commerce/commercial.png"
alt="Commercial version" />
<img src="/media/img/global/commerce/multidomain.png"
alt="Multidomain version" />
</div>
 
<!-- panes -->
<div class="description" id="free"> .. content .. </div>
<div class="description" id="commercial"> .. content .. </div>
<div class="description" id="multidomain"> .. content .. </div>

HTML

The styling is defined with the following CSS file.

JavaScript coding

The configuration is again very simple. We set up things as usual with the event configuration option set to mouseover:

    $("#products").tabs("div.description", {event:'mouseover'});


JavaScript