zero2xiii
April 4th, 2013, 03:00 PM
Hay all,
I am having a trouble with this little thing. I am a complete newbie to website programing, designing and so forth.
I want a dialog box, or what ever you wish to call it similar to the one on chauvet's website:
http://www.chauvetlighting.com/4-bar-tri.html
It is the little box on the right hand side with the three tabs: Feature, Spesifications, Resources.
Moving your mouse over each tab changes the box's content, without loading anything extra. Viewing the page source I found this:
<div id="product_tabs" class="producttab1">
<div id="tab1" onmouseover="changeTab(1);"><p><a href="#Features" onclick="return false;">Features</a></p></div>
<div id="tab2" onmouseover="changeTab(2);"><p><a href="#Specifications" onclick="return false;">Specifications</a></p></div>
<div id="tab3" onmouseover="changeTab(3);"><p><a href="#Resources" onclick="return false;">Resources</a></p></div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="product_box" id="content1">
<div class="textpadding"><ul>
<li>Complete, portable LED wash lighting solution with high-intensity, tri-color LEDs </li>
<li>Four, individually-focusable heads allow total room or stage coverage</li>
<li>Low-profile lights are 1.6in deep and can fit in almost environment </li>
<li>Set-up and teardown in minutes with the included tripod, carry bags, and footswitch</li>
<li>High-powered, tri-colored LEDs nearly eliminate multi-colored shadows </li>
<li>Safely mount to truss using the built-in bolts for increased flexibility and mounting options </li>
<li>Works in master/slave with other <a href="\"http:/www.chauvetlighting.com/4-bar.html\"" target="\"_blank\"">4BAR™</a> and <a href="\"http:/www.chauvetlighting.com/4-bar-tri.html\"" target="\"_blank\"">4BAR™ Tri</a> units for large coordinated light shows</li>
<li>Power link up to 8 units which saves time running cables and extension cords</li>
<li>Sound-activated programs dance to the beat of the music</li>
<li>Easy-access to built-in automated programs generate a synchronized show in master/slave mode</li>
</ul></div>
</div><!--product_box content1-->
<div class="product_box_hidden" id="content2">
<div class="textpadding"><p>• DMX channels: 15<br />• DMX connectors: 3-pin<br />• Light source: 28 3 W (350 mA x3) tri-color LEDs 50,000 hrs<br />• Stand height: 56 - 91 in<br />• Beam angle: 22°<br />• Field angle: 42°<br />• Illuminance: 1,869 @ 2 m (per pod)<br />• Power linking: 8 units @ 120 V / 16 units @ 230 V<br />• Input voltage: Auto-ranging 100-240 VAC 50/60 Hz<br />• Power and current: 113 W, 1 A @ 120 V 60 Hz<br />• Power and current: 118 W, 0.5 A @ 230 V 50 Hz<br />• Weight: 31 lbs (14.1 kg)<br />• Size: 48 x 2.2 x 11.2 in (1,219 x 55 x 285 mm)<br />• Approvals: CE</p></div>
</div>
<!--product_box content1-->
<div class="product_box_hidden" id="content3">
<div class="textpadding">
<p><ul>
<li><strong>Product Specification Sheet</strong><br /><a href="/products/spec/4BarTRI-CutSheet.pdf" target="_blank" title="">4BarTRI-CutSheet.pdf (1172K)</a><br /><br /></li>
<li><strong>User Manual</strong><br /><a href="/products/manuals/4BAR_Tri_UM_Rev2_WO.pdf" target="_blank" title="">4BAR_Tri_UM_Rev2_WO.pdf (1181K)</a><br /><br /></li>
<li><strong>Quick Reference Guide - multi-language</strong><br /><a href="/products/manuals/4BAR_Tri_QRG_ML_Rev2_WO.pdf" target="_blank" title="">4BAR_Tri_QRG_ML_Rev2_WO.pdf (1144K)</a><br /><br /></li>
<li><strong>ShowXpress Profile</strong><br /><a href="/products/showxpress/4BAR_TRI.zip" target="_blank" title="">4BAR_TRI.zip (0K)</a><br /><br /></li>
</ul></p>
</div>
Viewing the CSS style sheet made my head ache:
#product_tabs { width: 274px; height: 22px; position: relative; }
.producttab1 { background: url(/images/product_tabs.gif) 0px 0px no-repeat; }
.producttab2 { background: url(/images/product_tabs.gif) 0px -22px no-repeat; }
.producttab3 { background: url(/images/product_tabs.gif) 0px -44px no-repeat; }
#product_tabs p { margin: 0; padding: 0; }
#product_tabs p a { text-decoration: none; color: #fff; }
#product_tabs div { float: left; position: absolute; top: 3px; }
#tab1 { left: 15px; }
#tab2 { left: 93px; }
#tab3 { left: 197px; }
.product_box { width: 272px; background: #707173; border: 1px solid #5c5c5c; border-top: none; border-bottom: none; display: block; }
.product_box_hidden { display: none; }
.textpadding { margin: 0 15px; padding-top: 10px; word-wrap: break-word;} /* amir added CSS3 property word-wrap */
I THINK this is all the source code needed for that little box thingy, however I can't make heads or tails on how to rewrite this for my website? I do not want to EXACTLY copy this. So I need a frame work on how to code it so I can add tabs if needed, maybe even add some images inside the tabbed-content, etc.
Even just copy pasting the above to a blank page and style sheet the effect is not working. So I am having a really hard time figuring out what makes this tick. Again I do not wish to just copy chauvet's code on this, I merely want a similar effect I can modify for my purposes.
Thank you in advance.
I am having a trouble with this little thing. I am a complete newbie to website programing, designing and so forth.
I want a dialog box, or what ever you wish to call it similar to the one on chauvet's website:
http://www.chauvetlighting.com/4-bar-tri.html
It is the little box on the right hand side with the three tabs: Feature, Spesifications, Resources.
Moving your mouse over each tab changes the box's content, without loading anything extra. Viewing the page source I found this:
<div id="product_tabs" class="producttab1">
<div id="tab1" onmouseover="changeTab(1);"><p><a href="#Features" onclick="return false;">Features</a></p></div>
<div id="tab2" onmouseover="changeTab(2);"><p><a href="#Specifications" onclick="return false;">Specifications</a></p></div>
<div id="tab3" onmouseover="changeTab(3);"><p><a href="#Resources" onclick="return false;">Resources</a></p></div>
<div class="clear"></div>
</div>
<div class="clear"></div>
<div class="product_box" id="content1">
<div class="textpadding"><ul>
<li>Complete, portable LED wash lighting solution with high-intensity, tri-color LEDs </li>
<li>Four, individually-focusable heads allow total room or stage coverage</li>
<li>Low-profile lights are 1.6in deep and can fit in almost environment </li>
<li>Set-up and teardown in minutes with the included tripod, carry bags, and footswitch</li>
<li>High-powered, tri-colored LEDs nearly eliminate multi-colored shadows </li>
<li>Safely mount to truss using the built-in bolts for increased flexibility and mounting options </li>
<li>Works in master/slave with other <a href="\"http:/www.chauvetlighting.com/4-bar.html\"" target="\"_blank\"">4BAR™</a> and <a href="\"http:/www.chauvetlighting.com/4-bar-tri.html\"" target="\"_blank\"">4BAR™ Tri</a> units for large coordinated light shows</li>
<li>Power link up to 8 units which saves time running cables and extension cords</li>
<li>Sound-activated programs dance to the beat of the music</li>
<li>Easy-access to built-in automated programs generate a synchronized show in master/slave mode</li>
</ul></div>
</div><!--product_box content1-->
<div class="product_box_hidden" id="content2">
<div class="textpadding"><p>• DMX channels: 15<br />• DMX connectors: 3-pin<br />• Light source: 28 3 W (350 mA x3) tri-color LEDs 50,000 hrs<br />• Stand height: 56 - 91 in<br />• Beam angle: 22°<br />• Field angle: 42°<br />• Illuminance: 1,869 @ 2 m (per pod)<br />• Power linking: 8 units @ 120 V / 16 units @ 230 V<br />• Input voltage: Auto-ranging 100-240 VAC 50/60 Hz<br />• Power and current: 113 W, 1 A @ 120 V 60 Hz<br />• Power and current: 118 W, 0.5 A @ 230 V 50 Hz<br />• Weight: 31 lbs (14.1 kg)<br />• Size: 48 x 2.2 x 11.2 in (1,219 x 55 x 285 mm)<br />• Approvals: CE</p></div>
</div>
<!--product_box content1-->
<div class="product_box_hidden" id="content3">
<div class="textpadding">
<p><ul>
<li><strong>Product Specification Sheet</strong><br /><a href="/products/spec/4BarTRI-CutSheet.pdf" target="_blank" title="">4BarTRI-CutSheet.pdf (1172K)</a><br /><br /></li>
<li><strong>User Manual</strong><br /><a href="/products/manuals/4BAR_Tri_UM_Rev2_WO.pdf" target="_blank" title="">4BAR_Tri_UM_Rev2_WO.pdf (1181K)</a><br /><br /></li>
<li><strong>Quick Reference Guide - multi-language</strong><br /><a href="/products/manuals/4BAR_Tri_QRG_ML_Rev2_WO.pdf" target="_blank" title="">4BAR_Tri_QRG_ML_Rev2_WO.pdf (1144K)</a><br /><br /></li>
<li><strong>ShowXpress Profile</strong><br /><a href="/products/showxpress/4BAR_TRI.zip" target="_blank" title="">4BAR_TRI.zip (0K)</a><br /><br /></li>
</ul></p>
</div>
Viewing the CSS style sheet made my head ache:
#product_tabs { width: 274px; height: 22px; position: relative; }
.producttab1 { background: url(/images/product_tabs.gif) 0px 0px no-repeat; }
.producttab2 { background: url(/images/product_tabs.gif) 0px -22px no-repeat; }
.producttab3 { background: url(/images/product_tabs.gif) 0px -44px no-repeat; }
#product_tabs p { margin: 0; padding: 0; }
#product_tabs p a { text-decoration: none; color: #fff; }
#product_tabs div { float: left; position: absolute; top: 3px; }
#tab1 { left: 15px; }
#tab2 { left: 93px; }
#tab3 { left: 197px; }
.product_box { width: 272px; background: #707173; border: 1px solid #5c5c5c; border-top: none; border-bottom: none; display: block; }
.product_box_hidden { display: none; }
.textpadding { margin: 0 15px; padding-top: 10px; word-wrap: break-word;} /* amir added CSS3 property word-wrap */
I THINK this is all the source code needed for that little box thingy, however I can't make heads or tails on how to rewrite this for my website? I do not want to EXACTLY copy this. So I need a frame work on how to code it so I can add tabs if needed, maybe even add some images inside the tabbed-content, etc.
Even just copy pasting the above to a blank page and style sheet the effect is not working. So I am having a really hard time figuring out what makes this tick. Again I do not wish to just copy chauvet's code on this, I merely want a similar effect I can modify for my purposes.
Thank you in advance.