You are here: » Home » Documentation » Details » How-To » Design » Home

Creating a channel bar with graphic Buttons [Images central in ./common/nav]

To create a navigation bar with images there are basically two possibilities: 1. Centrale filing of images in the ./common-folder and referencing to these images via a corresponding meta-attribute value. 2. Application of a meta-attribute of type "image". A presentation of variant 1 follows; variant 2 works in analogy to the How-To "Channel Logo".

Solution: On basis of Templateset-3.
1. Introduction of a meta-attribute with the ID "Channel".
2. Filing of the channel images in the folder ./common/nav/ and naming acc. to a defined convention (e.g. acc. to the short title of the channels).
3. Use of the code example for the DTML method bodyContent_Channels from Templateset-3 (see below)

<!-- BO bodyTop_Channels -->

<dtml-in "getNavElements(REQUEST)">
<dtml-let highlightThis="REQUEST['URL'].find(id+'/')>0">
 <dtml-if "isMetaType(['ZMSRubrik','ZMSSysFolder'])">
  <dtml-call "REQUEST.set('_u',common.nav.absolute_url())">
  <dtml-call "REQUEST.set('_c',getObjProperty('attr_channel',REQUEST).lower())">
  <dtml-if "getLevel()==1 and '%s.gif'%REQUEST['_c'] in common.nav.objectIds()">
    <dtml-call "REQUEST.set('_s0','%s/%s.gif'%(REQUEST['_u'],REQUEST['_c']))">
    <dtml-call "REQUEST.set('_s1','%s/%s_on.gif'%(REQUEST['_u'],REQUEST['_c']))">
    <dtml-if highlightThis>
     <dtml-call "REQUEST.set('_s0',REQUEST['_s1'])">
    </dtml-if>
    <a href="<dtml-var "getHref2IndexHtml(REQUEST)">"
     onmouseover="<dtml-var "REQUEST['_c']">.src='<dtml-var "REQUEST['_s1']">';"
     onmouseout="<dtml-var "REQUEST['_c']">.src='<dtml-var "REQUEST['_s0']">';"
     ><img name="<dtml-var "REQUEST['_c']">"
     src="<dtml-var "REQUEST['_s0']">" alt="<dtml-var "getTitle(REQUEST)">"  border="0"
    ></a>
  </dtml-if>
 </dtml-if>
</dtml-let>
</dtml-in>

<!-- EO bodyTop_Channels -->