使用JavaScript使用透明图像创建可展开的叠加层

时间:2013-03-30 09:07:44

标签: javascript jquery css3

我的网页上有不同的位置,我们提供横幅广告。这些广告在运行时从第三方网站加载,尺寸各不相同。

我希望在每个广告上添加过多的透明图片,以便当有人点击广告时,我可以触发点击事件并进行一些处理。 我的问题是:

  1. 我如何使用JavaScript来创建这些可扩展的overaly 透明图片
  2. 如果有人点击透明图片,是否会导致点击基础广告?
  3. 显然,我不希望将图片置于顶部,然后停止点击基础实际广告

2 个答案:

答案 0 :(得分:0)

回答你的问题:

首先,如果广告使用来自与网页不同的域的iframe,那么您可以做的事情就会受到更多限制。在这种情况下,您所能做的就是用自己网页中的透明对象覆盖广告,当您这样做时,广告将不再获得点击。

如果广告不使用来自与网页不同的域的iframe,那么您可以选择以下两个问题:

1)您可以使用javascript创建透明div,并将其放置在与广告相同的父级中。然后可以使用css定位将其定位在广告的顶部,如果这是您真正想要做的事情。该定位的细节取决于广告本身的定位方式。或者,如果广告本身只是一个div,您可以在广告中插入透明div并对其进行调整大小,使其完全覆盖广告的所有区域。透明对象会收到初始点击,但点击会“冒泡”到父级广告。

2)点击放置在广告上方的透明对象将导致点击首先转到透明对象,而不转到广告。单击将转到单击的最顶层对象,但点击将冒泡到父对象。因此,如果广告本身是父对象,则点击也会转到广告。

如果您只想了解点击次数,那么最好只为现有广告点击添加自己的eventListener,而不是在其上方插入其他图层。您必须等到广告出现,找到正确的对象并插入您自己的eventListener(假设未使用来自其他域的iframe插入广告)。

答案 1 :(得分:0)

您可以在整个文档上附加点击侦听器,每当发生点击时,您都可以检查该点击是否来自广告。并进行处理。