PDA

View Full Version : How to rollover



mhepekiz
07-22-2009, 07:42 AM
1) Script Title:
Tabcontent

2) Script URL (on DD):
http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm

3) Describe problem:
I want to use this script with rollover. How can i do it? Not by clicking, when rollover the tab it'll change..

Please help me

student101
07-22-2009, 12:18 PM
Did you read the docs (http://www.dynamicdrive.com/dynamicindex17/tabcontent_suppliment.htm#pm)?:eek:

This is the simplest, simplest way of doing it...
<h3>Demo #1- Basic implementation</h3>
<ul id="countrytabs" class="shadetabs">
<li><a href="#" rel="country1" class="selected" onmouseover="javascript:countries.expandit(0)">Tab 1</a></li>
<li><a href="#" rel="country2" onmouseover="javascript:countries.expandit(1)">Tab 2</a></li>
<li><a href="#" rel="country3" onmouseover="javascript:countries.expandit(2)">Tab 3</a></li>
<li><a href="#" rel="country4" onmouseover="javascript:countries.expandit(3)">Tab 4</a></li>
<li><a href="http://www.dynamicdrive.com">Dynamic Drive</a></li>
</ul>
<div style="border:1px solid gray; width:450px; margin-bottom: 1em; padding: 10px">
<div id="country1" class="tabcontent">
Tab content 1 here<br />Tab content 1 here<br />
</div>
<div id="country2" class="tabcontent">
Tab content 2 here<br />Tab content 2 here<br />
</div>
<div id="country3" class="tabcontent">
Tab content 3 here<br />Tab content 3 here<br />
</div>
<div id="country4" class="tabcontent">
Tab content 4 here<br />Tab content 4 here<br />
</div>
</div>

<script type="text/javascript">
var countries=new ddtabcontent("countrytabs")
countries.setpersist(true)
countries.setselectedClassTarget("link") //"link" or "linkparent"
countries.init()
</script>
<p><a href="javascript:countries.cycleit('prev')" style="margin-right: 25px; text-decoration:none">Back</a> <a href="javascript: countries.expandit(3)">Click here to select last tab</a> <a href="javascript:countries.cycleit('next')" style="margin-left: 25px; text-decoration:none">Forward</a></p>

Please search and read the entire article next time, you may find documentation :D ...
Cheers