I finally managed it on my own. For those who are struggling with the same, I did the following:
1. I used the Inline (XHTML) form layout and after I completed the form I disabled the "Auto Generate Layout".
2. I have a radiogroup called [Type dak] with 4 elements
zadeldak,
schilddak,
lessenaarsdak and
platdak
3. I added the following code to the Javascript declerations:
<script type="text/javascript">
function displayField()
{
if(document.getElementsByName('form[Type dak]')[0].checked)
document.getElementById('zadeldak').style.display="",
document.getElementById('schilddak').style.display="none",
document.getElementById('lessenaarsdak').style.display="none",
document.getElementById('platdak').style.display="none";
if(document.getElementsByName('form[Type dak]')[1].checked)
document.getElementById('zadeldak').style.display="none",
document.getElementById('schilddak').style.display="",
document.getElementById('lessenaarsdak').style.display="none",
document.getElementById('platdak').style.display="none";
if(document.getElementsByName('form[Type dak]')[2].checked)
document.getElementById('zadeldak').style.display="none",
document.getElementById('schilddak').style.display="none",
document.getElementById('lessenaarsdak').style.display="",
document.getElementById('platdak').style.display="none";
if(document.getElementsByName('form[Type dak]')[3].checked)
document.getElementById('zadeldak').style.display="none",
document.getElementById('schilddak').style.display="none",
document.getElementById('lessenaarsdak').style.display="none",
document.getElementById('platdak').style.display="";
}
window.addEvent('domready', function() {
displayField();
});
</script>
4. I added the following DIV's with the images on the 2nd page in my formlayout:
<div id="zadeldak">
<img src="images/form/afmzadeldak.png">
</div>
<div id="schilddak">
<img src="images/form/afmschilddak.png">
</div>
<div id="lessenaarsdak">
<img src="images/form/afmlessenaarsdak.png">
</div>
<div id="platdak">
<img src="images/form/afmplatdak.png">
</div>
5. And I finally added an Additional Attribute on the radiogroup [Type dak]:
onclick="displayField();"
This works great for me. I noticed that the images are preloaded and displayed as the page is opened (with trying it first on the first page of the form). But because they are displayed on the 2nd page and because the radiobutton [Type dak] is required, nobody will notice it.
Maybe there is a better way, but for now this is working for me. Feel free to make the code even better if you like.
