Display Image Conditionally In Header

[CarbonArchitect]

Hi so I have some images that act as links in the header of my datapage. I have attached the source code for the images. What I want is that 2 of the images (the 4th and 5th ones) disappear when a condition ([@field:GM_Level_ID#] = 1) is filled.

 

<a href="http://www.inmetriks.com/greenmark/audit/audits-view-only/?Section=1&amp;Audit=[@field:GM_Questionnaire_ID_GM_Questionnaire_ID#]"><img alt="Generated button" src="https://dabuttonfactory.com/button.png?t=1.+Enviro.+Management&amp;f=Calibri&amp;ts=18&amp;tc=fff&amp;hp=10&amp;vp=5&amp;c=3&amp;bgt=gradient&amp;bgc=8dff4d&amp;ebgc=26ce61&amp;bs=2&amp;bc=000" /></a>

&nbsp;&nbsp;<a href="http://www.inmetriks.com/greenmark/audit/audits-view-only/?Section=2&amp;Audit=[@field:GM_Questionnaire_ID_GM_Questionnaire_ID#]"><img alt="Generated button" src="https://dabuttonfactory.com/button.png?t=2.+Utilities&amp;f=Calibri&amp;ts=18&amp;tc=fff&amp;hp=10&amp;vp=5&amp;c=3&amp;bgt=gradient&amp;bgc=8dff4d&amp;ebgc=26ce61&amp;bs=2&amp;bc=000" /></a>

</strong>&nbsp;&nbsp;<a href="http://www.inmetriks.com/greenmark/audit/audits-view-only/?Section=3&amp;Audit=[@field:GM_Questionnaire_ID_GM_Questionnaire_ID#]"><img alt="Generated button" src="https://dabuttonfactory.com/button.png?t=3.+Waste&amp;f=Calibri&amp;ts=18&amp;tc=fff&amp;hp=10&amp;vp=5&amp;c=3&amp;bgt=gradient&amp;bgc=8dff4d&amp;ebgc=26ce61&amp;bs=2&amp;bc=000" /></a>
<strong>&nbsp;</strong>&nbsp;<a href="http://www.inmetriks.com/greenmark/audit/audits-view-only/?Section=4&amp;Audit=[@field:GM_Questionnaire_ID_GM_Questionnaire_ID#]"><img alt="Generated button" src="https://dabuttonfactory.com/button.png?t=4.+Travel&amp;f=Calibri&amp;ts=18&amp;tc=fff&amp;hp=10&amp;vp=5&amp;c=3&amp;bgt=gradient&amp;bgc=8dff4d&amp;ebgc=26ce61&amp;bs=2&amp;bc=000" /></a> 


&nbsp; <a href="http://www.inmetriks.com/greenmark/audit/audits-view-only/?Section=&amp;Audit=[@field:GM_Questionnaire_ID_GM_Questionnaire_ID#]"><img alt="Generated button" src="https://dabuttonfactory.com/button.png?t=5.+Procurement&amp;f=Calibri&amp;ts=18&amp;tc=fff&amp;hp=10&amp;vp=5&amp;c=3&amp;bgt=gradient&amp;bgc=8dff4d&amp;ebgc=26ce61&amp;bs=2&amp;bc=000" /></a>

 
&nbsp;&nbsp;<a href="http://www.inmetriks.com/greenmark/audit/audits-view-only/?Section=6&amp;Audit=[@field:GM_Questionnaire_ID_GM_Questionnaire_ID#]"><img alt="Generated button" src="https://dabuttonfactory.com/button.png?t=6.+Local+Environment&amp;f=Calibri&amp;ts=18&amp;tc=fff&amp;hp=10&amp;vp=5&amp;c=3&amp;bgt=gradient&amp;bgc=8dff4d&amp;ebgc=26ce61&amp;bs=2&amp;bc=000" /></a> </strong><strong></strong></td>

 

[douvega]

You can use JavaScript for that. Although, there are existing articles for solving this, I understand some of us wants to have a specific and quick solution so let me try to answer that for you here.

You need to use JavaScript to make your sites dynamic. In this case, try by adding the following HTML/JavaScript in the header.

<div id="linksContainer"></div>
<script>
var linkDiv = document.getElementById("linksContainer");
var imgOne = '<a href="http://www.inmetriks.com/greenmark/audit/audits-view-only/?Section=1&Audit=[@field:GM_Questionnaire_ID_GM_Questionnaire_ID#]"><img alt="Generated button" src="https://dabuttonfactory.com/button.png?t=1.+Enviro.+Management&f=Calibri&ts=18&tc=fff&hp=10&vp=5&c=3&bgt=gradient&bgc=8dff4d&ebgc=26ce61&bs=2&bc=000" /></a>';
var imgTwo = '<a href="http://www.inmetriks.com/greenmark/audit/audits-view-only/?Section=3&Audit=[@field:GM_Questionnaire_ID_GM_Questionnaire_ID#]"><img alt="Generated button" src="https://dabuttonfactory.com/button.png?t=3.+Waste&f=Calibri&ts=18&tc=fff&hp=10&vp=5&c=3&bgt=gradient&bgc=8dff4d&ebgc=26ce61&bs=2&bc=000" /></a>';
var imgThree = '<a href="http://www.inmetriks.com/greenmark/audit/audits-view-only/?Section=4&Audit=[@field:GM_Questionnaire_ID_GM_Questionnaire_ID#]"><img alt="Generated button" src="https://dabuttonfactory.com/button.png?t=4.+Travel&f=Calibri&ts=18&tc=fff&hp=10&vp=5&c=3&bgt=gradient&bgc=8dff4d&ebgc=26ce61&bs=2&bc=000" /></a> ';
var imgFour = '<a href="http://www.inmetriks.com/greenmark/audit/audits-view-only/?Section=&Audit=[@field:GM_Questionnaire_ID_GM_Questionnaire_ID#]"><img alt="Generated button" src="https://dabuttonfactory.com/button.png?t=5.+Procurement&f=Calibri&ts=18&tc=fff&hp=10&vp=5&c=3&bgt=gradient&bgc=8dff4d&ebgc=26ce61&bs=2&bc=000" /></a>';
var imgFive = '<a href="http://www.inmetriks.com/greenmark/audit/audits-view-only/?Section=6&Audit=[@field:GM_Questionnaire_ID_GM_Questionnaire_ID#]"><img alt="Generated button" src="https://dabuttonfactory.com/button.png?t=6.+Local+Environment&f=Calibri&ts=18&tc=fff&hp=10&vp=5&c=3&bgt=gradient&bgc=8dff4d&ebgc=26ce61&bs=2&bc=000" /></a>';

//1 is being treated as string (for your specific case, I would prefer this way) but in case you need to do number comparisions, then you should call your field as number.
if('[@field:GM_Level_ID]' == '1'){
linkDiv.innerHTML = imgOne + imgTwo + imgThree;
} else {
linkDiv.innerHTML = imgOne + imgTwo + imgThree + imgFour + imgFive;
}
</script>

Let us know if it works.

[CarbonArchitect]

Douvega thank you, this works perfectly. Yes, I'd tried many ways to get it to work from other discussions but was just one of those things that wasn't happening for me. I'd never seen the linkDiv.innerHTML function before but that's very useful. Thanks again.