Link to home
Start Free TrialLog in
Avatar of AxISQS
AxISQS

asked on

Highlight link when active - using Javascript and DHTML

Hello everyone.  I have a page that seems to be working great with one problem.  At the top of the page are a few links.  When you click each link a JS function hides or displays a table contained within <div>.  When you're active on a link the active link is not highlighted.  Please see my screenshot for more information.  The code can be found below.  Can you help troubleshoot why this is occurring?  Thanks!


User generated image
User generated image

<style>
a:visited{
  color:#494949;
}
.chromemenu{
width: 99%;
font-weight: bold;
}

.chromemenu:after{ /*Add margin between menu and rest of content in Firefox*/
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

.chromemenu ul{
border: 1px solid #BBB;
width: 100%;
background: url(/img/vcmcustomview/chromebg.gif) center center repeat-x;
padding: 5px 0;
margin: 0;
text-align: left; /*set value to "right" for example to align menu to the left of page*/
}

.chromemenu ul li{
display: inline;
}

.chromemenu ul li a{
color: #494949;
padding: 5px 8px;
margin: 0;
text-decoration: none;
border-right: 1px solid #BBB;
}

.chromemenu ul li a:hover, .chromemenu ul li a.current{
background: url(/img/vcmcustomview/chromebg2.gif) center center repeat-x;
}

.tabcontainer{
clear: left;
width:95%; /*width of 2nd level sub menus*/
height:1.5em; /*height of 2nd level sub menus. Set to largest's sub menu's height to avoid jittering.*/
}

.tabcontainer{font-family:"Lucida Grande","Lucida Sans Unicode", Tahoma, sans-serif;letter-spacing:.01em}.tabcontainer li ul{width:64%}

.tabcontent{
display:none;
}
</style>

<script>

//DD Tab Menu- Script rewritten April 27th, 07: http://www.dynamicdrive.com
//**Updated Feb 23rd, 08): Adds ability for menu to revert back to default selected tab when mouse moves out of menu

//Only 2 configuration variables below:

var ddtabmenu={
	disabletablinks: false, //Disable hyperlinks in 1st level tabs with sub contents (true or false)?
	snap2original: [true, 300], //Should tab revert back to default selected when mouse moves out of menu? ([true/false, delay_millisec]

	currentpageurl: window.location.href.replace("http://"+window.location.hostname, "").replace(/^\//, ""), //get current page url (minus hostname, ie: http://www.dynamicdrive.com/)

definemenu:function(tabid, dselected){
	this[tabid+"-menuitems"]=null
	this[tabid+"-dselected"]=-1
	this.addEvent(window, function(){ddtabmenu.init(tabid, dselected)}, "load")
},

showsubmenu:function(tabid, targetitem){
	var menuitems=this[tabid+"-menuitems"]
	this.clearrevert2default(tabid)
 for (i=0; i<menuitems.length; i++){
		menuitems[i].className=""
		if (typeof menuitems[i].hasSubContent!="undefined")
			document.getElementById(menuitems[i].getAttribute("rel")).style.display="none"
	}
	targetitem.className="current"
	if (typeof targetitem.hasSubContent!="undefined")
		document.getElementById(targetitem.getAttribute("rel")).style.display="block"
},

isSelected:function(menuurl){
	var menuurl=menuurl.replace("http://"+menuurl.hostname, "").replace(/^\//, "")
	return (ddtabmenu.currentpageurl==menuurl)
},

isContained:function(m, e){
	var e=window.event || e
	var c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement)
	while (c && c!=m)try {c=c.parentNode} catch(e){c=m}
	if (c==m)
		return true
	else
		return false
},

revert2default:function(outobj, tabid, e){
	if (!ddtabmenu.isContained(outobj, tabid, e)){
		window["hidetimer_"+tabid]=setTimeout(function(){
			ddtabmenu.showsubmenu(tabid, ddtabmenu[tabid+"-dselected"])
		}, ddtabmenu.snap2original[1])
	}
},

clearrevert2default:function(tabid){
 if (typeof window["hidetimer_"+tabid]!="undefined")
		clearTimeout(window["hidetimer_"+tabid])
},

addEvent:function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
	var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
	if (target.addEventListener)
		target.addEventListener(tasktype, functionref, false)
	else if (target.attachEvent)
		target.attachEvent(tasktype, functionref)
},

init:function(tabid, dselected){
	var menuitems=document.getElementById(tabid).getElementsByTagName("a")
	this[tabid+"-menuitems"]=menuitems
	for (var x=0; x<menuitems.length; x++){
		if (menuitems[x].getAttribute("rel")){
			this[tabid+"-menuitems"][x].hasSubContent=true
			if (ddtabmenu.disabletablinks)
				menuitems[x].onclick=function(){return false}
			if (ddtabmenu.snap2original[0]==true){
				var submenu=document.getElementById(menuitems[x].getAttribute("rel"))
				menuitems[x].onmouseout=function(e){ddtabmenu.revert2default(submenu, tabid, e)}
				submenu.onmouseover=function(){ddtabmenu.clearrevert2default(tabid)}
				submenu.onmouseout=function(e){ddtabmenu.revert2default(this, tabid, e)}
			}
		}
		else //for items without a submenu, add onMouseout effect
			menuitems[x].onmouseout=function(e){this.className=""; if (ddtabmenu.snap2original[0]==true) ddtabmenu.revert2default(this, tabid, e)}
		menuitems[x].onmouseover=function(){ddtabmenu.showsubmenu(tabid, this)}
		if (dselected=="auto" && typeof setalready=="undefined" && this.isSelected(menuitems[x].href)){
			ddtabmenu.showsubmenu(tabid, menuitems[x])
			this[tabid+"-dselected"]=menuitems[x]
			var setalready=true
		}
		else if (parseInt(dselected)==x){
			ddtabmenu.showsubmenu(tabid, menuitems[x])
			this[tabid+"-dselected"]=menuitems[x]
		}
	}
}
}

</script>

<script type="text/javascript">

ddtabmenu.definemenu("ddtabs5", 0) //initialize Tab Menu #5 with NO tabs selected 

</script>

<form name="navForm">
    <input type="hidden" ID="cu" Name="cu" value="kristi test" />
    <input type="hidden" ID="cuID" Name="cuID" value="kristi test ID" />

<div id="ddtabs5" class="chromemenu">
<ul>
<li>
<a onclick="javascript:this.className='current';document.getElementById('megaprocessSection').style.display='block';document.getElementById('doctypeSection').style.display='none';document.getElementById('reportsSection').style.display='none';document.getElementById('helpSection').style.display='none';"><span style="cursor:pointer">Mega Process</span></a>
</li>
<li>
<a onclick="javascript:this.className='current';document.getElementById('megaprocessSection').style.display='none';document.getElementById('doctypeSection').style.display='block';document.getElementById('reportsSection').style.display='none';document.getElementById('helpSection').style.display='none';"><span style="cursor:pointer">Document Type</span></a>
</li>
<li>
<a onclick="javascript:this.className='current';document.getElementById('megaprocessSection').style.display='none';document.getElementById('doctypeSection').style.display='none';document.getElementById('reportsSection').style.display='block';document.getElementById('helpSection').style.display='none';"><span style="cursor:pointer">Reports</span></a>
</li>
<li>
<a onclick="#"><span style="cursor:pointer">Help</span></a>
</li>
<li>
<a href="javascript:document.getElementById('cu').value=currentUser.userName;document.getElementById('cuID').value=currentUser.id;void(window.open('{ot:OTvar_livelink_cgiPath}/open/PDMSRequestForm_REQ','',''));"><span style="cursor:pointer">New Document</span></a>
</li>
</ul>
</div>
<br />
<div class="ddcolortabsline"></div>
<div class="tabcontainer">

<div id="megaprocessSection" style="display:block">
<table border="0" align="center" cellpadding="8" cellspacing="20">
  <tr>
    <td>
    <p style="text-align: center" align="center"><a href="#" onclick="FacetPanel.facetRun(1956049,'Customer Acquisition');return false" title="Apply filter of Mega Process: Customer Acquisition"><img height="85" border="0" src="/img/pdms_cv/images/customer_aquisition.png"></a><br />
      <br />
      Customer Acquisition</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="#" onclick="FacetPanel.facetRun(1956049,'Enabling Communications');return false" title="Apply filter of Mega Process: Enabling Communications"><img height="85" border="0" src="/img/pdms_cv/images/enabling_communications.png"></a><br />
      <br />
      Enabling Communications</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="#" onclick="FacetPanel.facetRun(1956049,'Enabling Enterprise Effectiveness');return false" title="Apply filter of Mega Process: Enabling Enterprise Effectiveness"><img height="85" border="0" src="/img/pdms_cv/images/enabling_ent_effectiveness.png"></a><br />
      <br />
      Enabling Enterprise Effectiveness</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="#" onclick="FacetPanel.facetRun(1956049,'Enabling Financial Accounting and Reporting');return false" title="Apply filter of Mega Process: Enabling Financial Accounting and Reporting"><img height="85" border="0" src="/img/pdms_cv/images/enabling_fin_acct_rept.png"></a><br />
      <br />
      Enabling Financial Accounting and Reporting</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="#" onclick="FacetPanel.facetRun(1956049,'Enabling IT Optimization');return false" title="Apply filter of Mega Process: Enabling IT Optimization"><img height="85" border="0" src="/img/pdms_cv/images/enabling_it_optimization.png"></a><br />
      <br />
      Enabling IT Optimization</p>
    </td>
  	<td>
    <p style="text-align: center" align="center"><a href="#" onclick="FacetPanel.facetRun(1956049,'Enabling Human Resource Management');return false" title="Apply filter of Mega Process: Enabling Human Resource Management"><img height="85" border="0" src="/img/pdms_cv/images/enabling_resource_mgmt.png"></a><br />
      <br />
      Enabling Human Resource Management</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="#" onclick="FacetPanel.facetRun(1956049,'Responsible Care and Sustainability');return false" title="Apply filter of Mega Process: Responsible Care and Sustainability"><img height="85" border="0" src="/img/pdms_cv/images/responsible_care_sust.png"></a><br />
      <br />
      Responsible Care and Sustainability</p>
    </td>
  </tr>
  </table>
  
  <table border="0" align="center" cellpadding="8" cellspacing="20">
  <tr align="center">
      <td>
    <p style="text-align: center" align="center"><a href="#" onclick="FacetPanel.facetRun(1956049,'Governing Ethics and Compliance');return false" title="Apply filter of Mega Process: Governing Ethics and Compliance"><img height="85" border="0" src="/img/pdms_cv/images/governing_ethics_compliance.png"></a><br />
      <br />
      Governing Ethics and Compliance</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="#" onclick="FacetPanel.facetRun(1956049,'New Solutions Development');return false" title="Apply filter of Mega Process: New Solutions Development"><img height="85" border="0" src="/img/pdms_cv/images/new_solutions_dev.png"></a><br />
      <br />
      New Solutions Development</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="#" onclick="FacetPanel.facetRun(1956049,'Supply Chain - Global Trade Management');return false" title="Apply filter of Mega Process: Supply Chain - Global Trade Management"><img height="85" border="0" src="/img/pdms_cv/images/supplychain_global_trade_mgmt.png"></a><br />
      <br />
      Supply Chain - Global Trade Management</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="#" onclick="FacetPanel.facetRun(1956049,'Supply Chain - Order to Cash');return false" title="Apply filter of Mega Process: Supply Chain - Order to Cash"><img height="85" border="0" src="/img/pdms_cv/images/supplychain_order_cash.png"></a><br />
      <br />
      Supply Chain - Order to Cash</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="#" onclick="FacetPanel.facetRun(1956049,'Supply Chain - Plan to Deliver');return false" title="Apply filter of Mega Process: Supply Chain - Plan to Deliver"><img height="85" border="0" src="/img/pdms_cv/images/supplychain_plan_deliver.png"></a><br />
      <br />
      Supply Chain - Plan to Deliver</p>
    </td>
  	<td>
    <p style="text-align: center" align="center"><a href="#" onclick="FacetPanel.facetRun(1956049,'Supply Chain - Source to Pay');return false" title="Apply filter of Mega Process: Supply Chain - Source to Pay"><img height="85" border="0" src="/img/pdms_cv/images/supplychain_source_pay.png"></a><br />
      <br />
      Supply Chain - Source to Pay</p>
    </td>
  </tr>
</table>
</div>

<div id="doctypeSection" style="display:none">
<table border="0" align="center" cellpadding="8" cellspacing="20">
  <tr>
    <td>
    <p style="text-align: center" align="center"><a href="{ot:OTvar_livelink_cgiPath}/open/Corporate_Policy"><img border="0" src="/img/pdms_cv/images/policy.png"  height="80px" alt=""></a><br />
      <br />
      Corporate Policy</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="{ot:OTvar_livelink_cgiPath}/open/Form"><img border="0" src="/img/pdms_cv/images/form.png"  height="80px" alt=""></a><br />
      <br />
      Form</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="{ot:OTvar_livelink_cgiPath}/open/Group_Policy"><img border="0" src="/img/pdms_cv/images/policy.png"  height="80px" alt=""></a><br />
      <br />
      Group Policy</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="{ot:OTvar_livelink_cgiPath}/open/Presentation"><img border="0" src="/img/pdms_cv/images/presentation.png"  height="80px" alt=""></a><br />
      <br />
      Presentation</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="{ot:OTvar_livelink_cgiPath}/open/Procedure"><img border="0" src="/img/pdms_cv/images/procedure.png"  height="80px" alt=""></a><br />
      <br />
      Procedure</p>
    </td>
  	<td>
    <p style="text-align: center" align="center"><a href="{ot:OTvar_livelink_cgiPath}/open/Program_Plan_Manual"><img border="0" src="/img/pdms_cv/images/program.png"  height="80px" alt=""></a><br />
      <br />
      Program/Plan/Manual</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="{ot:OTvar_livelink_cgiPath}/open/Reference"><img border="0" src="/img/pdms_cv/images/reference.png"  height="80px" alt=""></a><br />
      <br />
      Reference</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="{ot:OTvar_livelink_cgiPath}/open/Training"><img border="0" src="/img/pdms_cv/images/training.png"  height="80px" alt=""></a><br />
      <br />
      Training</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="{ot:OTvar_livelink_cgiPath}/open/Work_Instruction"><img border="0" src="/img/pdms_cv/images/work.png"  height="80px" alt=""></a><br />
      <br />
      Work Instruction</p>
    </td>
  </tr>
</table>
</div>


<div id="reportsSection" style="display:none">
<table border="0" align="center" cellpadding="8" cellspacing="20">
  <tr>
    <td>
    <p style="text-align: center" align="center"><a href="#"><img border="0" src="/img/pdms_cv/images/document_management.png"  height="80px" alt=""></a><br />
      <br />
      Placeholder</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="#"><img border="0" src="/img/pdms_cv/images/archiving.png"  height="80px" alt=""></a><br />
      <br />
      Placeholder</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="#"><img border="0" src="/img/pdms_cv/images/records_management.png"  height="80px" alt=""></a><br />
      <br />
      Placeholder</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="#"><img border="0" src="/img/pdms_cv/images/formsandworkflow.png"  height="80px" alt=""></a><br />
      <br />
      Placeholder</p>
    </td>
  </tr>
</table>
</div>

</div>
</form>

Open in new window

Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

You do not have a

helpSection

Delete this statement

document.getElementById('helpSection').style.display='none'

from the links or add the helpSection
Avatar of AxISQS
AxISQS

ASKER

@mplungjan, excellent idea.  I removed document.getElementById('helpSection').style.display='none'

...however, the problem still exists.  Please see my code.  Thanks for your time!

<style>
a:visited{
  color:#494949;
}
.chromemenu{
width: 99%;
font-weight: bold;
}

.chromemenu:after{ /*Add margin between menu and rest of content in Firefox*/
content: "."; 
display: block; 
height: 0; 
clear: both; 
visibility: hidden;
}

.chromemenu ul{
border: 1px solid #BBB;
width: 100%;
background: url(/img/vcmcustomview/chromebg.gif) center center repeat-x;
padding: 5px 0;
margin: 0;
text-align: left; /*set value to "right" for example to align menu to the left of page*/
}

.chromemenu ul li{
display: inline;
}

.chromemenu ul li a{
color: #494949;
padding: 5px 8px;
margin: 0;
text-decoration: none;
border-right: 1px solid #BBB;
}

.chromemenu ul li a:hover, .chromemenu ul li a.current{
background: url(/img/vcmcustomview/chromebg2.gif) center center repeat-x;
}

.tabcontainer{
clear: left;
width:95%; /*width of 2nd level sub menus*/
height:1.5em; /*height of 2nd level sub menus. Set to largest's sub menu's height to avoid jittering.*/
}

.tabcontainer{font-family:"Lucida Grande","Lucida Sans Unicode", Tahoma, sans-serif;letter-spacing:.01em}.tabcontainer li ul{width:64%}

.tabcontent{
display:none;
}
</style>

<script>

//DD Tab Menu- Script rewritten April 27th, 07: http://www.dynamicdrive.com
//**Updated Feb 23rd, 08): Adds ability for menu to revert back to default selected tab when mouse moves out of menu

//Only 2 configuration variables below:

var ddtabmenu={
	disabletablinks: false, //Disable hyperlinks in 1st level tabs with sub contents (true or false)?
	snap2original: [true, 300], //Should tab revert back to default selected when mouse moves out of menu? ([true/false, delay_millisec]

	currentpageurl: window.location.href.replace("http://"+window.location.hostname, "").replace(/^\//, ""), //get current page url (minus hostname, ie: http://www.dynamicdrive.com/)

definemenu:function(tabid, dselected){
	this[tabid+"-menuitems"]=null
	this[tabid+"-dselected"]=-1
	this.addEvent(window, function(){ddtabmenu.init(tabid, dselected)}, "load")
},

showsubmenu:function(tabid, targetitem){
	var menuitems=this[tabid+"-menuitems"]
	this.clearrevert2default(tabid)
 for (i=0; i<menuitems.length; i++){
		menuitems[i].className=""
		if (typeof menuitems[i].hasSubContent!="undefined")
			document.getElementById(menuitems[i].getAttribute("rel")).style.display="none"
	}
	targetitem.className="current"
	if (typeof targetitem.hasSubContent!="undefined")
		document.getElementById(targetitem.getAttribute("rel")).style.display="block"
},

isSelected:function(menuurl){
	var menuurl=menuurl.replace("http://"+menuurl.hostname, "").replace(/^\//, "")
	return (ddtabmenu.currentpageurl==menuurl)
},

isContained:function(m, e){
	var e=window.event || e
	var c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement)
	while (c && c!=m)try {c=c.parentNode} catch(e){c=m}
	if (c==m)
		return true
	else
		return false
},

revert2default:function(outobj, tabid, e){
	if (!ddtabmenu.isContained(outobj, tabid, e)){
		window["hidetimer_"+tabid]=setTimeout(function(){
			ddtabmenu.showsubmenu(tabid, ddtabmenu[tabid+"-dselected"])
		}, ddtabmenu.snap2original[1])
	}
},

clearrevert2default:function(tabid){
 if (typeof window["hidetimer_"+tabid]!="undefined")
		clearTimeout(window["hidetimer_"+tabid])
},

addEvent:function(target, functionref, tasktype){ //assign a function to execute to an event handler (ie: onunload)
	var tasktype=(window.addEventListener)? tasktype : "on"+tasktype
	if (target.addEventListener)
		target.addEventListener(tasktype, functionref, false)
	else if (target.attachEvent)
		target.attachEvent(tasktype, functionref)
},

init:function(tabid, dselected){
	var menuitems=document.getElementById(tabid).getElementsByTagName("a")
	this[tabid+"-menuitems"]=menuitems
	for (var x=0; x<menuitems.length; x++){
		if (menuitems[x].getAttribute("rel")){
			this[tabid+"-menuitems"][x].hasSubContent=true
			if (ddtabmenu.disabletablinks)
				menuitems[x].onclick=function(){return false}
			if (ddtabmenu.snap2original[0]==true){
				var submenu=document.getElementById(menuitems[x].getAttribute("rel"))
				menuitems[x].onmouseout=function(e){ddtabmenu.revert2default(submenu, tabid, e)}
				submenu.onmouseover=function(){ddtabmenu.clearrevert2default(tabid)}
				submenu.onmouseout=function(e){ddtabmenu.revert2default(this, tabid, e)}
			}
		}
		else //for items without a submenu, add onMouseout effect
			menuitems[x].onmouseout=function(e){this.className=""; if (ddtabmenu.snap2original[0]==true) ddtabmenu.revert2default(this, tabid, e)}
		menuitems[x].onmouseover=function(){ddtabmenu.showsubmenu(tabid, this)}
		if (dselected=="auto" && typeof setalready=="undefined" && this.isSelected(menuitems[x].href)){
			ddtabmenu.showsubmenu(tabid, menuitems[x])
			this[tabid+"-dselected"]=menuitems[x]
			var setalready=true
		}
		else if (parseInt(dselected)==x){
			ddtabmenu.showsubmenu(tabid, menuitems[x])
			this[tabid+"-dselected"]=menuitems[x]
		}
	}
}
}

</script>

<script type="text/javascript">

ddtabmenu.definemenu("ddtabs5", 0) //initialize Tab Menu #5 with NO tabs selected 

</script>

<form name="navForm">
    <input type="hidden" ID="cu" Name="cu" value="kristi test" />
    <input type="hidden" ID="cuID" Name="cuID" value="kristi test ID" />

<div id="ddtabs5" class="chromemenu">
<ul>
<li>
<a onclick="javascript:this.className='current';document.getElementById('megaprocessSection').style.display='block';document.getElementById('doctypeSection').style.display='none';document.getElementById('reportsSection').style.display='none';"><span style="cursor:pointer">Mega Process</span></a>
</li>
<li>
<a onclick="javascript:this.className='current';document.getElementById('megaprocessSection').style.display='none';document.getElementById('doctypeSection').style.display='block';document.getElementById('reportsSection').style.display='none';"><span style="cursor:pointer">Document Type</span></a>
</li>
<li>
<a onclick="javascript:this.className='current';document.getElementById('megaprocessSection').style.display='none';document.getElementById('doctypeSection').style.display='none';document.getElementById('reportsSection').style.display='block';"><span style="cursor:pointer">Reports</span></a>
</li>
<li>
<a onclick="#"><span style="cursor:pointer">Help</span></a>
</li>
<li>
<a href="javascript:document.getElementById('cu').value=currentUser.userName;document.getElementById('cuID').value=currentUser.id;void(window.open('{ot:OTvar_livelink_cgiPath}/open/PDMSRequestForm_REQ','',''));"><span style="cursor:pointer">New Document</span></a>
</li>
</ul>
</div>
<br />
<div class="ddcolortabsline"></div>
<div class="tabcontainer">

<div id="megaprocessSection" style="display:block">
<table border="0" align="center" cellpadding="8" cellspacing="20">
  <tr>
    <td>
    <p style="text-align: center" align="center"><a href="#" onclick="FacetPanel.facetRun(1956049,'Customer Acquisition');return false" title="Apply filter of Mega Process: Customer Acquisition"><img height="85" border="0" src="/img/pdms_cv/images/customer_aquisition.png"></a><br />
      <br />
      Customer Acquisition</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="#" onclick="FacetPanel.facetRun(1956049,'Enabling Communications');return false" title="Apply filter of Mega Process: Enabling Communications"><img height="85" border="0" src="/img/pdms_cv/images/enabling_communications.png"></a><br />
      <br />
      Enabling Communications</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="#" onclick="FacetPanel.facetRun(1956049,'Enabling Enterprise Effectiveness');return false" title="Apply filter of Mega Process: Enabling Enterprise Effectiveness"><img height="85" border="0" src="/img/pdms_cv/images/enabling_ent_effectiveness.png"></a><br />
      <br />
      Enabling Enterprise Effectiveness</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="#" onclick="FacetPanel.facetRun(1956049,'Enabling Financial Accounting and Reporting');return false" title="Apply filter of Mega Process: Enabling Financial Accounting and Reporting"><img height="85" border="0" src="/img/pdms_cv/images/enabling_fin_acct_rept.png"></a><br />
      <br />
      Enabling Financial Accounting and Reporting</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="#" onclick="FacetPanel.facetRun(1956049,'Enabling IT Optimization');return false" title="Apply filter of Mega Process: Enabling IT Optimization"><img height="85" border="0" src="/img/pdms_cv/images/enabling_it_optimization.png"></a><br />
      <br />
      Enabling IT Optimization</p>
    </td>
  	<td>
    <p style="text-align: center" align="center"><a href="#" onclick="FacetPanel.facetRun(1956049,'Enabling Human Resource Management');return false" title="Apply filter of Mega Process: Enabling Human Resource Management"><img height="85" border="0" src="/img/pdms_cv/images/enabling_resource_mgmt.png"></a><br />
      <br />
      Enabling Human Resource Management</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="#" onclick="FacetPanel.facetRun(1956049,'Responsible Care and Sustainability');return false" title="Apply filter of Mega Process: Responsible Care and Sustainability"><img height="85" border="0" src="/img/pdms_cv/images/responsible_care_sust.png"></a><br />
      <br />
      Responsible Care and Sustainability</p>
    </td>
  </tr>
  </table>
  
  <table border="0" align="center" cellpadding="8" cellspacing="20">
  <tr align="center">
      <td>
    <p style="text-align: center" align="center"><a href="#" onclick="FacetPanel.facetRun(1956049,'Governing Ethics and Compliance');return false" title="Apply filter of Mega Process: Governing Ethics and Compliance"><img height="85" border="0" src="/img/pdms_cv/images/governing_ethics_compliance.png"></a><br />
      <br />
      Governing Ethics and Compliance</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="#" onclick="FacetPanel.facetRun(1956049,'New Solutions Development');return false" title="Apply filter of Mega Process: New Solutions Development"><img height="85" border="0" src="/img/pdms_cv/images/new_solutions_dev.png"></a><br />
      <br />
      New Solutions Development</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="#" onclick="FacetPanel.facetRun(1956049,'Supply Chain - Global Trade Management');return false" title="Apply filter of Mega Process: Supply Chain - Global Trade Management"><img height="85" border="0" src="/img/pdms_cv/images/supplychain_global_trade_mgmt.png"></a><br />
      <br />
      Supply Chain - Global Trade Management</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="#" onclick="FacetPanel.facetRun(1956049,'Supply Chain - Order to Cash');return false" title="Apply filter of Mega Process: Supply Chain - Order to Cash"><img height="85" border="0" src="/img/pdms_cv/images/supplychain_order_cash.png"></a><br />
      <br />
      Supply Chain - Order to Cash</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="#" onclick="FacetPanel.facetRun(1956049,'Supply Chain - Plan to Deliver');return false" title="Apply filter of Mega Process: Supply Chain - Plan to Deliver"><img height="85" border="0" src="/img/pdms_cv/images/supplychain_plan_deliver.png"></a><br />
      <br />
      Supply Chain - Plan to Deliver</p>
    </td>
  	<td>
    <p style="text-align: center" align="center"><a href="#" onclick="FacetPanel.facetRun(1956049,'Supply Chain - Source to Pay');return false" title="Apply filter of Mega Process: Supply Chain - Source to Pay"><img height="85" border="0" src="/img/pdms_cv/images/supplychain_source_pay.png"></a><br />
      <br />
      Supply Chain - Source to Pay</p>
    </td>
  </tr>
</table>
</div>

<div id="doctypeSection" style="display:none">
<table border="0" align="center" cellpadding="8" cellspacing="20">
  <tr>
    <td>
    <p style="text-align: center" align="center"><a href="{ot:OTvar_livelink_cgiPath}/open/Corporate_Policy"><img border="0" src="/img/pdms_cv/images/policy.png"  height="80px" alt=""></a><br />
      <br />
      Corporate Policy</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="{ot:OTvar_livelink_cgiPath}/open/Form"><img border="0" src="/img/pdms_cv/images/form.png"  height="80px" alt=""></a><br />
      <br />
      Form</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="{ot:OTvar_livelink_cgiPath}/open/Group_Policy"><img border="0" src="/img/pdms_cv/images/policy.png"  height="80px" alt=""></a><br />
      <br />
      Group Policy</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="{ot:OTvar_livelink_cgiPath}/open/Presentation"><img border="0" src="/img/pdms_cv/images/presentation.png"  height="80px" alt=""></a><br />
      <br />
      Presentation</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="{ot:OTvar_livelink_cgiPath}/open/Procedure"><img border="0" src="/img/pdms_cv/images/procedure.png"  height="80px" alt=""></a><br />
      <br />
      Procedure</p>
    </td>
  	<td>
    <p style="text-align: center" align="center"><a href="{ot:OTvar_livelink_cgiPath}/open/Program_Plan_Manual"><img border="0" src="/img/pdms_cv/images/program.png"  height="80px" alt=""></a><br />
      <br />
      Program/Plan/Manual</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="{ot:OTvar_livelink_cgiPath}/open/Reference"><img border="0" src="/img/pdms_cv/images/reference.png"  height="80px" alt=""></a><br />
      <br />
      Reference</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="{ot:OTvar_livelink_cgiPath}/open/Training"><img border="0" src="/img/pdms_cv/images/training.png"  height="80px" alt=""></a><br />
      <br />
      Training</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="{ot:OTvar_livelink_cgiPath}/open/Work_Instruction"><img border="0" src="/img/pdms_cv/images/work.png"  height="80px" alt=""></a><br />
      <br />
      Work Instruction</p>
    </td>
  </tr>
</table>
</div>


<div id="reportsSection" style="display:none">
<table border="0" align="center" cellpadding="8" cellspacing="20">
  <tr>
    <td>
    <p style="text-align: center" align="center"><a href="#"><img border="0" src="/img/pdms_cv/images/document_management.png"  height="80px" alt=""></a><br />
      <br />
      Placeholder</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="#"><img border="0" src="/img/pdms_cv/images/archiving.png"  height="80px" alt=""></a><br />
      <br />
      Placeholder</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="#"><img border="0" src="/img/pdms_cv/images/records_management.png"  height="80px" alt=""></a><br />
      <br />
      Placeholder</p>
    </td>
    <td>
    <p style="text-align: center" align="center"><a href="#"><img border="0" src="/img/pdms_cv/images/formsandworkflow.png"  height="80px" alt=""></a><br />
      <br />
      Placeholder</p>
    </td>
  </tr>
</table>
</div>

</div>
</form>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial