单击swf文件下方的html元素 - 是否可能?

时间:2013-12-18 14:40:30

标签: html flash

你会认为这是最容易找到答案的想法。

我无法在任何说“是或否”的地方找到答案。

我有swf叠加层,请看这里...... http://goo.gl/mPylnG

我想要做的就是能够点击下面的html元素。你觉得很简单。


这是我下面的代码......

<div id="eCard">
    <a href="#">
        <img src="images/suzuki-xmas-ecard-web.jpg" alt="" />
    </a>
</div>
<div id="snowContent"></div>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js"></script>
<script type="text/javascript">
var flashvars = {};
var params = {
    wmode: "transparent"
};
var attributes = {};
attributes.id = "snow";
swfobject.embedSWF("images/snow-storm.swf", "snowContent", "100%", "100%", "9.0.0", false, flashvars, params, attributes);
</script>


如果有人有答案的链接,请分享原因我找不到。

由于 约什

3 个答案:

答案 0 :(得分:2)

为什么不简单地让swf画布导航到Suzuki网站www.suzuki-gb.co.uk? 只需创建一个不可见的按钮,它就是画布的整个大小。

......一旦他们到达该网站,他们就可以从那里关注社交网络。 还有什么其他链接?

试试吧? http://seb.ly/demos/JSSnowNew/snow3d.html

我不确定这可以用flash文档完成,因为它位于占用该空间的插件中。即使将swf设置为透明,Flash文件也会控制objectembed区域内的鼠标(尝试右键单击......您看到了吗?)

答案 1 :(得分:1)

你可以使用jQuery来clone文档中的链接,并将它们放在flash上​​方的masque层上。以下jQuery应该克隆您所有附加事件的链接,以便附加到点击的任何分析事件也应该被复制

var linklayer = $('<div id="links"></div>');
$('body').append(linklayer);

//change the selector to include anything that is clickable
$('a').each(function() { 
    var link = $(this),
        clone = link.clone(true, true),
        cloneWrap = $('<span class="link-wrap"></span>');
        link.addClass('hide');

    cloneWrap.css({ 'top': link.offset().top, 'left': link.offset().left }).append(clone);

    var margin = link[0].offsetLeft - link.offset().left;
    if (margin > 0) {
        clone.css('margin-left', margin); //this bit makes the link go over two lines
    }
    linklayer.append(cloneWrap);
});

<强>的CSS

#links {position:absolute; top:0; left:0; bottom:0; right:0; z-index:100;} /*z-index needs to be higher than the swf z-index*/
#links > .link-wrap {display:inline-block; position:absolute;} /*link wrap needed for links over two lines*/

.hide {visibility:hidden;}

Example

答案 2 :(得分:0)

试试这个,

<div id="eCard">
    <a href="#">
        <img src="http://mailers.suzukibulletin.co.uk/2013/xmas/e-card/images/suzuki-xmas-ecard-web.jpg" alt="" />
    </a>
</div>
<div id="snowContent"></div>
<div id="ecard-proxy"></div>

CSS:

object {
    left: 0;
    position: absolute;
    top: 0;
}
#ecard-proxy{
   left: 0;
    position: absolute;
    top: 0; 
    display:block;
    z-index:1000;
    width:100%;
    height:100%;
}
#eCard{
    width:auto;
    height:377px;
}

JS:

$(document).ready(function(){
var flashvars = {};
var params = {
    wmode: "transparent"
};
var attributes = {};
attributes.id = "snow";
swfobject.embedSWF("http://mailers.suzukibulletin.co.uk/2013/xmas/e-card/images/snow-storm.swf", "snowContent", "100%", "100%", "9.0.0", false, flashvars, params, attributes);

    $("#ecard-proxy").click(function(){
        // 
        $("#eCard").trigger("click");
    });
     $("#eCard").click(function(){
         alert("card cicked");
     });

});

检查Fuddle

相关问题