Difference between revisions of "Widget:Iframe01"
Line 1: Line 1:
 +
<div id="container" style="cursor: pointer; border: 1px solid #ccc; padding: 10px; margin: 10px;">
 +
  <img id="runImage" src="https://analytica.com/wp-content/uploads/2023/07/ev-vs-ice-1.webp" width="1210" height="648" style="width: 100%; height: auto;">
 +
</div>
  
−
<iframe src="https://analytica.com/wp-content/uploads/2023/07/ev-vs-ice-1.webp" width="1210" height="648"></iframe>
+
<script>
 +
document.addEventListener('DOMContentLoaded', function () {
 +
  function showIframe() {
 +
    // Hide the image
 +
    document.getElementById('runImage').style.display = 'none';
 +
 
 +
    // Create and configure the iframe
 +
    const iframe = document.createElement('iframe');
 +
    iframe.src = 'https://acp.analytica.com/view0?invite=4314&code=2462049136540573676';
 +
    iframe.style.width = '100%'; // Adjusted width to match the image width
 +
    iframe.style.height = '648px'; // Adjusted height to match the image height
 +
    iframe.style.border = 'none'; // Optional: Remove border
 +
 
 +
    // Append the iframe to the container
 +
    document.getElementById('container').appendChild(iframe);
 +
  }
 +
 
 +
  // Add click event listener to the image container
 +
  document.getElementById('container').addEventListener('click', showIframe);
 +
});
 +
</script>

Revision as of 07:22, 30 April 2024

 <img id="runImage" src="https://analytica.com/wp-content/uploads/2023/07/ev-vs-ice-1.webp" width="1210" height="648" style="width: 100%; height: auto;">

<script> document.addEventListener('DOMContentLoaded', function () { 

 function showIframe() {
   // Hide the image
   document.getElementById('runImage').style.display = 'none';

   // Create and configure the iframe
   const iframe = document.createElement('iframe');
   iframe.src = 'https://acp.analytica.com/view0?invite=4314&code=2462049136540573676';
   iframe.style.width = '100%'; // Adjusted width to match the image width
   iframe.style.height = '648px'; // Adjusted height to match the image height
   iframe.style.border = 'none'; // Optional: Remove border

   // Append the iframe to the container
   document.getElementById('container').appendChild(iframe);
 }

 // Add click event listener to the image container
 document.getElementById('container').addEventListener('click', showIframe);

}); </script>