Member Avatar for showman13

Hi,

I'm running into issues trying to layout a page that contains both html links using .png images and a .swf file that I would also like to have linked to another page.

To see what I mean, I have a test page here

What I would like to be able to do is to merge the two sides of this big table into something that would appear to have the wheel fitting within the curves of the 4 link buttons on the left..

I am thinking the only way would be to overlay the links(with transparent background) over the wheel (the .swf) unless there is a way to do a single .swf that could have 5 separate links in it on a webpage.

Hope this all makes sense.

Here is the html from the page... I've eliminated all the php and other stuff that was not relevant to the question.

<table align="center" width="100%" height="450">
    <tr>
    <td align="center" valign="top" height="177">
<table align="center" width="750" height="300" cellpadding="6" cellspacing="0" border="0" bgcolor="#008000">
  <tr>
    <td>
   <a href="#.php"><img src="images/100button.png" width="361" height="96"></a><br>
   <a href="#.php"><img src="images/500button.png" width="255" height="91"></a><br>
   <a href="#.php"><img src="images/1000button.png" width="254" height="93"></a><br>
   <a href="#.php"><img src="images/3000button.png" width="349" height="91"></a>
    </td>
    <td>
<a href="#.php">

<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="450" HEIGHT="403" id="images/Mobius Loop Bonus Wheel 11132011.swf" ALIGN="">
<PARAM NAME=movie VALUE="images/Mobius Loop Bonus Wheel 11132011.swf"> <PARAM NAME=quality VALUE=high> <PARAM NAME=bgcolor VALUE=#333399> <EMBED src="images/Mobius Loop Bonus Wheel 11132011.swf" quality=high bgcolor=#333399 WIDTH="450" HEIGHT="403" NAME="images/Mobius Loop Bonus Wheel 11132011.swf" ALIGN="" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED> </OBJECT>

</a>
    </td>
  </tr>
</table>
        </td>
    </tr>
</table>
  • 2 Contributors
  • 2 Replies
  • 95 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by showman13

Dani AI

Generated

Two practical, reliable approaches address the “wheel” + PNG buttons problem: move the five links into the SWF itself, or place HTML hotspots over the SWF. The float approach suggested by is brittle for precise overlays and table-based layouts; absolute positioning inside a relatively positioned wrapper is a much more robust layout technique. Wrapping the OBJECT/EMBED in an anchor (as in the original post) is unreliable across browsers and should be avoided.

Overlay method (recommended when you cannot edit the SWF)

  • Put the SWF and the clickable anchors inside a single container with position: relative.
  • Give the SWF a wmode of opaque or transparent so HTML can appear above it.
  • Add absolutely positioned anchor elements sized to the exact hotspot areas; keep them transparent.

Example (conceptual)

<div class="wheel-wrap" style="position:relative; width:450px; height:403px;">
  <embed src="wheel.swf" width="450" height="403" wmode="opaque" type="application/x-shockwave-flash">
  <a href="/link1" class="hotspot" style="position:absolute; left:20px; top:40px; width:90px; height:80px; z-index:10;"></a>
  <!-- additional hotspots -->
</div>

SWF-native links (preferred if you can edit the SWF)

  • Add clickable movieclips or buttons in Flash and handle navigation inside the SWF (AS3 navigateToURL, or use ExternalInterface to call page JS).
  • This keeps hit-testing inside Flash and avoids z-index/wmode caveats.

Caveats and modern guidance

  • wmode can introduce rendering, focus, and performance quirks in some browsers; test across targets.
  • Flash has been deprecated and blocked in modern browsers—migrate interactive UI to HTML5/CSS/Canvas when feasible. See Adobe’s end-of-life notice for Flash Player and MDN docs on stacking (z-index) for layout help: Adobe Flash Player end-of-life, z-index — MDN.

Recommended Answers

All 2 Replies

Member Avatar for persianprez

if they are just images, you can try to do a float. It'll be a pain in the ass, but thats the easiest way of doing it without editing the flash file.

Member Avatar for showman13

OK, I didn't get a resolution to this post, but think I have found a way around it for now, so I am going to mark it as solved.

Thanks anyway...

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.