We help IT Professionals succeed at work.

menu active page

petewinter
petewinter asked
on
See the html code attached and links to css and javascript below:

CSS
http://www.elementsps.net/p7tp/p7tp_12.css

Javascript
http://www.elementsps.net/p7tp/p7tpscripts.js

Currently the below css is used to show the current page:

#p7TP1 .p7TP_tabs div.down a, #p7TP2 .p7TP_tabs div.down a,
#p7TP3 .p7TP_tabs div.down a, #p7TP4 .p7TP_tabs div.down a,
#p7TP5 .p7TP_tabs div.down a {
      color: #333333!important;
      border-top-style: solid;
      border-top-width: 1px;
      border-top-color: #e5e9ea;
      background-image: url(images/active_bg.jpg);
      background-repeat: no-repeat;
      padding-left: 20px;
      padding-right: 20px;
      background-position: 5px;
}

I want the background-image to be different for each active tab.

i.e. if active tab 1 - background-image: url(images/active_bg1.jpg);
active tab 2 - background-image: url(images/active_bg2.jpg);
active tab 3 - background-image: url(images/active_bg3.jpg);

and so on. How can I do this?
<div id="p7TP1" class="p7TPpanel">
  <div class="p7TPwrapper">
    <div class="p7TP_tabs">
      <div id="p7tpb1_1" class="down"><a class="down" href="javascript:;">Overview</a></div>
      <div id="p7tpb1_2"><a href="javascript:;">Key Benefits</a></div>
      <div id="p7tpb1_3"><a href="javascript:;">MicroPiezo TFP Print Head</a></div>
      <div id="p7tpb1_4"><a href="javascript:;">Advanced Media Handling</a></div>
      <div id="p7tpb1_5"><a href="javascript:;">Krypton Eco-Media &amp; H<sub>2</sub>O Ink</a></div>
      <div id="p7tpb1_6"><a href="javascript:;">Applications</a></div>
      <br class="p7TPclear" />
    </div>
    <div class="p7TPcontent">
      <div id="p7tpc1_1">
      <div class="TabPanelColumn1"><img src="images/Element_Atom_Printer_Series_pp.jpg" width="500" height="260" alt="Elements Atom Printer Series" /></div>
      <div class="TabPanelColumn2">
        <h4>Solvent-based printing quality without the hazards</h4>
        <p>Ideal for all display producers, sign-makers and in-house operators, the ruggedly constructed Elements Atom duo of high quality, versatile roll-fed printers has been designed to provide the fine standards and ease of use found in water-based models yet with the durability of solvent-based output.</p>
        <p>Available in two popular widths of 610 mm (24 inches) and 1118 mm (44 inches), the Atom 24 and Atom 44 are matched with the Elements Krypton Eco-Media range and Elements H<sub>2</sub>O inks for a complete turnkey system. Output is odourless and no special ventilation or ducting is required in use.</p>
        </div>
        <div class="Clear"></div>
      </div>
      <div id="p7tpc1_2">
        <div class="TabPanelColumn1"><img src="images/elements_printer.jpg" width="500" height="260" alt="Elements Key Benefits" /></div>
      <div class="TabPanelColumn2">
        <h4>Key Benefits</h4>
        <ul>
<li>Low cost, high performance, durable output</li>
<li>Totally safe in operation, with odourless output</li>
<li>No ducting or ventilation required</li>
<li>Choice of two model widths – Atom 24 and Atom 44</li>
<li>Matched with Elements H<sub>2</sub>O harmless, durable inks</li>
<li>Handles Krypton Eco-Media materials up to 1.5 mm thick</li>
<li>Micro-piezo print-heads guarantee precise dot placement</li>
<li>Ideal for solid colours and fine photographic quality</li>
</ul>
        </div>
        <div class="Clear"></div>
      </div>
      <div id="p7tpc1_3">
        <div class="TabPanelColumn1"><img src="images/printheads.jpg" width="500" height="260" alt="MicroPiezo TFP Print Head" /></div>
      <div class="TabPanelColumn2">
        <h4>MicroPiezo TFP Print Head</h4>
        <p>The Atom 24 and Atom 44 feature drop-on-demand micro-piezo print-heads with variable droplets as small as 3.5 picolitres. The optimum resolution of 1440 x 1440 dpi guarantees precise dot placement, vivid solid colours and fine graduations.</p><p>Water-based ink technologies and the Atom’s auto-head alignment features means there is no blocking of the print-heads nor time-consuming maintenance.</p>
        </div>
        <div class="Clear"></div>
      </div>
      <div id="p7tpc1_4">
        <div class="TabPanelColumn1"><img src="images/media_handling_lr.jpg" width="500" height="260" alt="Advanced Media Handling" /></div>
      <div class="TabPanelColumn2">
        <h4>Advanced Media Handling</h4>
        <p>Accurate media handling is enhanced by an integrated cutter, fast loading and borderless printing. These features are complemented by the ability to handle materials from lightweight papers up to boards of 1.5 mm in thickness. </p>
        </div>
        <div class="Clear"></div>
      </div>
      <div id="p7tpc1_5">
        <div class="TabPanelColumn1"><img src="images/krypton_media_roll.jpg" width="500" height="260" alt="Krypton Media" /></div>
      <div class="TabPanelColumn2">
        <h4>Krypton Eco-Media &amp; H<sub>2</sub>O Ink</h4>
        <p>The low cost, high performance Atom 24 and Atom 44 are designed to output onto the Krypton Eco-Media range of coated and uncoated materials, with Elements H<sub>2</sub>O water-based inks guaranteeing the same quality and durability as their solvent-based counterparts but without any odour or hazardous emissions.</p>
        </div>
        <div class="Clear"></div>
      </div>
      <div id="p7tpc1_6">
        <div class="TabPanelColumn1"><img src="images/applications.jpg" width="500" height="260" alt="Suitable Applications" /></div>
      <div class="TabPanelColumn2">
        <h4>Suitable Applications</h4>
        <p>Indoor, outdoor, posters, signs and even
      vehicle graphics, the Atom range can
      print for any environment, without
      damaging our environment.</p>
        </div>
        <div class="Clear"></div>
      </div>
    </div>
  </div>
  <!--[if lte IE 6]>
<style type="text/css">.p7TPpanel div,.p7TPpanel a{zoom:100%;}.p7TP_tabs a{white-space:nowrap;}</style>
<![endif]-->
  <!--[if IE 7]>
<style>.p7TPpanel div{zoom:100%;}</style>
<![endif]-->
</div>

Open in new window

<div id="p7TP1" class="p7TPpanel">
  <div class="p7TPwrapper">
    <div class="p7TP_tabs">
      <div id="p7tpb1_1" class="down"><a class="down" href="javascript:;">Overview</a></div>
      <div id="p7tpb1_2"><a href="javascript:;">Key Benefits</a></div>
      <div id="p7tpb1_3"><a href="javascript:;">MicroPiezo TFP Print Head</a></div>
      <div id="p7tpb1_4"><a href="javascript:;">Advanced Media Handling</a></div>
      <div id="p7tpb1_5"><a href="javascript:;">Krypton Eco-Media &amp; H<sub>2</sub>O Ink</a></div>
      <div id="p7tpb1_6"><a href="javascript:;">Applications</a></div>
      <br class="p7TPclear" />
    </div>
    <div class="p7TPcontent">
      <div id="p7tpc1_1">
      <div class="TabPanelColumn1"><img src="images/Element_Atom_Printer_Series_pp.jpg" width="500" height="260" alt="Elements Atom Printer Series" /></div>
      <div class="TabPanelColumn2">
        <h4>Solvent-based printing quality without the hazards</h4>
        <p>Ideal for all display producers, sign-makers and in-house operators, the ruggedly constructed Elements Atom duo of high quality, versatile roll-fed printers has been designed to provide the fine standards and ease of use found in water-based models yet with the durability of solvent-based output.</p>
        <p>Available in two popular widths of 610 mm (24 inches) and 1118 mm (44 inches), the Atom 24 and Atom 44 are matched with the Elements Krypton Eco-Media range and Elements H<sub>2</sub>O inks for a complete turnkey system. Output is odourless and no special ventilation or ducting is required in use.</p>
        </div>
        <div class="Clear"></div>
      </div>
      <div id="p7tpc1_2">
        <div class="TabPanelColumn1"><img src="images/elements_printer.jpg" width="500" height="260" alt="Elements Key Benefits" /></div>
      <div class="TabPanelColumn2">
        <h4>Key Benefits</h4>
        <ul>
<li>Low cost, high performance, durable output</li>
<li>Totally safe in operation, with odourless output</li>
<li>No ducting or ventilation required</li>
<li>Choice of two model widths – Atom 24 and Atom 44</li>
<li>Matched with Elements H<sub>2</sub>O harmless, durable inks</li>
<li>Handles Krypton Eco-Media materials up to 1.5 mm thick</li>
<li>Micro-piezo print-heads guarantee precise dot placement</li>
<li>Ideal for solid colours and fine photographic quality</li>
</ul>
        </div>
        <div class="Clear"></div>
      </div>
      <div id="p7tpc1_3">
        <div class="TabPanelColumn1"><img src="images/printheads.jpg" width="500" height="260" alt="MicroPiezo TFP Print Head" /></div>
      <div class="TabPanelColumn2">
        <h4>MicroPiezo TFP Print Head</h4>
        <p>The Atom 24 and Atom 44 feature drop-on-demand micro-piezo print-heads with variable droplets as small as 3.5 picolitres. The optimum resolution of 1440 x 1440 dpi guarantees precise dot placement, vivid solid colours and fine graduations.</p><p>Water-based ink technologies and the Atom’s auto-head alignment features means there is no blocking of the print-heads nor time-consuming maintenance.</p>
        </div>
        <div class="Clear"></div>
      </div>
      <div id="p7tpc1_4">
        <div class="TabPanelColumn1"><img src="images/media_handling_lr.jpg" width="500" height="260" alt="Advanced Media Handling" /></div>
      <div class="TabPanelColumn2">
        <h4>Advanced Media Handling</h4>
        <p>Accurate media handling is enhanced by an integrated cutter, fast loading and borderless printing. These features are complemented by the ability to handle materials from lightweight papers up to boards of 1.5 mm in thickness. </p>
        </div>
        <div class="Clear"></div>
      </div>
      <div id="p7tpc1_5">
        <div class="TabPanelColumn1"><img src="images/krypton_media_roll.jpg" width="500" height="260" alt="Krypton Media" /></div>
      <div class="TabPanelColumn2">
        <h4>Krypton Eco-Media &amp; H<sub>2</sub>O Ink</h4>
        <p>The low cost, high performance Atom 24 and Atom 44 are designed to output onto the Krypton Eco-Media range of coated and uncoated materials, with Elements H<sub>2</sub>O water-based inks guaranteeing the same quality and durability as their solvent-based counterparts but without any odour or hazardous emissions.</p>
        </div>
        <div class="Clear"></div>
      </div>
      <div id="p7tpc1_6">
        <div class="TabPanelColumn1"><img src="images/applications.jpg" width="500" height="260" alt="Suitable Applications" /></div>
      <div class="TabPanelColumn2">
        <h4>Suitable Applications</h4>
        <p>Indoor, outdoor, posters, signs and even
      vehicle graphics, the Atom range can
      print for any environment, without
      damaging our environment.</p>
        </div>
        <div class="Clear"></div>
      </div>
    </div>
  </div>
  <!--[if lte IE 6]>
<style type="text/css">.p7TPpanel div,.p7TPpanel a{zoom:100%;}.p7TP_tabs a{white-space:nowrap;}</style>
<![endif]-->
  <!--[if IE 7]>
<style>.p7TPpanel div{zoom:100%;}</style>
<![endif]-->
</div>

Open in new window

Comment
Watch Question

create a simple javascript array following your layout --

PI = new Array('active tab 1',' background-image: url(images/active_bg1.jpg'
                          'active tab 2','background-image: url(images/active_bg2.jpg'
                          'active tab 3','background-image: url(images/active_bg3.jpg))

Use javascript to toggle the active tab, and index the array as PI [odd number] use PI [even number] as the new background.  Simple.  See --

www.hunlock.com/blogs/Mastering_Javascript_Arrays
www.pageresource.com/jscript/jarray.htm
www.pageresource.com/jscript/jarray2.htm
www.c-point.com/javascript_tutorial/array.htm
sorry close bracket at the end of each jpg, and NOTE, there is NO comma at the end of the array structure

Author

Commented:
Many thanks