Member Avatar for miguel1810

I have done some designs in Flash and then converted them to HTML5 Swiffy Files via the google Swiffy Site.

What I want to do is make the HTML5 Swiffy File a clickable link to another page on the website I am working on.

My Question is... can a Link be added into the iFrame code.

Thanks.

  • 2 Contributors
  • 3 Replies
  • 108 Views
  • 4 Days Discussion Span
  • Latest Post Latest Post by dany12

Dani AI

Generated

: because the Swiffy export runs inside its own document, clicks that happen inside the iframe do not bubble to the parent page. That means wrapping the iframe in an anchor (as suggested) will NOT make clicks on the Swiffy content follow the parent link. Two practical approaches that work without digging into the generated Swiffy JavaScript are described below.

Use a transparent overlay in the parent page
Place the iframe inside a relatively positioned container and put a full-size, absolutely positioned link (or button) on top of it. The overlay intercepts clicks and can be keyboard accessible. This avoids editing the Swiffy file and works even when the iframe content is cross-origin.

Example (HTML + CSS + small keyboard fallback):

<div style="position:relative; width:640px; height:480px;">
  <iframe src="swiffy_export.html" width="640" height="480" frameborder="0" scrolling="no"></iframe>

  <a href="/target.html"
     class="swiffy-overlay"
     style="position:absolute; left:0; top:0; width:100%; height:100%; z-index:9999; background:transparent; display:block;"
     aria-label="Open target page"
     tabindex="0">Open</a>
</div>

<script>
  document.querySelector('.swiffy-overlay').addEventListener('keydown', function(e){
    if (e.key === 'Enter' || e.keyCode === 13) window.location.href = this.href;
  });
</script>

PostMessage / edit the Swiffy file (if same-origin)
If the exported HTML is served from the same origin and you can edit it, add a click handler inside the Swiffy document that notifies the parent via postMessage. The parent listens and navigates. This lets the Swiffy content trigger navigation without a top-layer overlay.

Troubleshooting and notes

  • The overlay blocks interaction with the animation. If you need both (animation interactivity + a link), use small hotspot overlays positioned over the clickable area instead of covering the whole frame, or implement postMessage inside the Swiffy file.
  • Make sure your overlay dimensions match the iframe’s rendered size (watch scaling or responsive layouts).
  • Google Swiffy was discontinued; long-term, consider reauthoring (Export from modern tools or rebuild interactive content) if maintenance or compatibility becomes an issue.

Recommended Answers

All 3 Replies

Member Avatar for dany12

Yes it can you searched on google you will find this <IFRAME SRC="hello.html" WIDTH=450 HEIGHT=100>
If you can see this, your browser doesn't
understand IFRAME. However, we'll still
<A HREF="hello.html">link</A>
you to the file.
</IFRAME>

can a Link be added into the iFrame code.

Member Avatar for miguel1810

Thanks for he reply - yes that option you've described does work for an html page to be set within an iframe and the html within the iframe has links.

It doesn't though solve my issue which is to make a SWF Files thats been converted into HTML5 in swiffy and saved as a .html file into a clickable link/button to allow the user to click the iFrame and content to navigate them to another page.

The converted Swiffy file is too complex to go into and edit.

So I'm still looking to see if I can make the whole html5 iframe a clickable link...

Member Avatar for dany12

have you tried to make the whole iframe a link? a href="youriste"><iFrame></iFrame></a>

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.