即使没有 Flash，如何将 Flash 内容放在 html 上答案

【问题标题】：How to put flash content over the html even if the flash is not即使没有 Flash，如何将 Flash 内容放在 html 上
【发布时间】：2011-01-20 16:52:00
【问题描述】：

因此，如果您以 MySpace 为例 (http://www.myspace.com/sonidolalimpia)，您现在会看到徽标在您将鼠标悬停时具有非常有趣的效果，他们是如何做到的？

【问题讨论】：

该网站的 Flash 内容似乎非常有限。您确定不想要 CSS 信息吗？
我发现鼠标悬停效果只在主页 (myspace.com) 左上角的标志处描述（需要一段时间才能加载，请尝试将鼠标上下移动几次）
我猜它是 Flash、JavaScript 和 HTML/CSS 的组合，其中徽标图像覆盖有 Flash 动画，一旦 swf 文件完全加载，swf 文件如下：cms.myspacecdn.com/cms/x/11/3/eyeplant.swf

标签： html flash

【解决方案1】：

正如已经写过的，所有技巧都不是在 Flash 中，而是在 css 和 jQuery 中。他们使用 jQuery onMouseOver 事件，简单地用透明的 flash 切换标志的图片版本。

之前

<h2>    
    <a href="/" class="MSIcon MSLogo" id="msStaticLogo" style="left: 0pt;">
        Myspace
    </a>
</h2>   

<div id="flashLogoContainer">
    <a href="/">
    <span id="logoInTrigger">   
    Myspace 
    </span>
    </a>
    <object width="354" height="475" type="application/x-shockwave-flash"
            data="http://cms.myspacecdn.com/cms/x/11/3/bag.swf" id="msFlashLogos" 
        style="visibility: visible; top: -28px; left: -9999px;">
    <param name="quality" value="high">
    <param name="wmode" value="transparent">
    <param name="bgcolor" value="transparent">
    <param name="allowscriptaccess" value="always">
    </object>
    <span class="MSIcon beta" id="beta">Beta</span>
    <div id="leftLogoTrigger" style="display: none;"></div>
    <div id="rightLogoTrigger" style="display: none;"></div>    
    <div id="bottomLogoTrigger" style="display: none;"></div>   
</div>
</li>

之后

 <li class="logo">
<h2>    
    <a href="/" class="MSIcon MSLogo" id="msStaticLogo" style="left: -9999px;">
        Myspace
    </a>
</h2>   

<div id="flashLogoContainer">
    <a href="/">
    <span id="logoInTrigger">   
    Myspace 
    </span>
    </a>
    <object width="354" height="475" type="application/x-shockwave-flash"
            data="http://cms.myspacecdn.com/cms/x/11/3/bag.swf" id="msFlashLogos"
        style="visibility: visible; top: -28px; left: -120px;">
    <param name="quality" value="high">
    <param name="wmode" value="transparent">
    <param name="bgcolor" value="transparent">
    <param name="allowscriptaccess" value="always">
    </object>
    <span class="MSIcon beta" id="beta">Beta</span>
    <div id="leftLogoTrigger" style="display: block;"></div>
    <div id="rightLogoTrigger" style="display: block;"></div>   
    <div id="bottomLogoTrigger" style="display: block;"></div>  
</div>
</li>

【讨论】：