Icons Images in MOSS Quick Launch Menu

well there are many possible ways to add customized icons in every item of quick lauch menu.

this mostly suggested is go for customized navigational control , and on that you apply customized item level css and in that css you specify the icon name... people who can do that and have enough time to digg around it im sure great :D



but i was in aloto hurry so after spending sometime i came up with this and it worked fine.

Its a javascript code , what i did , simply take the id of the nagivational main table , loop through its inner rows text , append the text with image and that was it.



the code is as below



====================================

function Iconize(){ var NavArrayText = []; var NavArrayIcon = [];
NavArrayIcon [0] = '1'; NavArrayIcon [1] = '2'; NavArrayIcon [2] = '3'; NavArrayIcon [3] = '4'; NavArrayIcon [4] = '5'; NavArrayIcon [5] = '6'; NavArrayIcon [6] = '7'; NavArrayIcon [7] = '8'; NavArrayIcon [8] = '9'; NavArrayIcon [9] = '10'; NavArrayIcon [10]= '11'; NavArrayIcon [11]= '12'; NavArrayIcon [12]= '13'; NavArrayIcon [13]= '14'; NavArrayIcon [14]= '15'; NavArrayIcon [15]= '16'; NavArrayIcon [16]= '17'; NavArrayIcon [17]= '18'; NavArrayIcon [18]= '19'; NavArrayIcon [19]= '20';
mytbl= document.getElementById('zz2_CurrentNav');//alert(mytbl.rows.length); for(i=0;i<mytbl.rows.length;i++) { var myCells= mytbl.rows( i ).cells; for(e=0;e<myCells.length;e++) { var temp; temp = myCells(e).innerText; NavArrayText [i] = temp; //alert(NavArrayText [e] ); } } for(i=0;i<mytbl.rows.length;i++) { var myCells= mytbl.rows( i ).cells; for(j=0;j<myCells.length;j++) { // alert(NavArrayText[i] +'-'+myCells(0).innerText ); if (myCells(j).innerText == NavArrayText[i]) { // alert(myCells(j).innerText); var myText = myCells( j ).innerHTML; myText = myText.replace( '>'+NavArrayText[i]+'<' , '><img src="../images/'+NavArrayIcon[i]+'.png" border=0/>'+NavArrayText[i] +'<'); myCells( j ).innerHTML= myText ; } } }
}

====================================

Place it in a javascript file call it in master page , before body tag gets close.

for the newly created pages , u can update the NavArrayIcon values with "blank" gif. Note you have to place the images in images named document libarary or normal folder. OR update the script one line :)



Feel free to refer to the blog instead of copy pasting the script to ur own page.