简体繁体 English

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

[英]Use JavaScript to create an expandable overlay using a transparent image

原文 2013-03-30 09:07:43 2 2 javascript/ jquery/ css3

I have various locations on my page where we serve banner ads. 我在网页上的各个位置投放横幅广告。 These ads are loaded from third party sites at run time and vary in sizes. 这些广告会在运行时从第三方网站加载，并且大小不同。

I am looking to add an overaly of a transparent image on each of these ads so that when someone clicks on the ad, I can trigger a click event and do some processing. 我希望在这些广告中的每一个上添加一个透明的图片，这样当有人点击广告时，我可以触发点击事件并进行一些处理。 My questions are: 我的问题是：

How do I use JavaScript to create these expandable overalys of transparent images 如何使用JavaScript创建透明图像的这些可扩展叠加层
If someone clicks on the transparent image, will that result in a click on the underlying ad too? 如果有人点击透明图片，是否也会导致点击底层广告？

Obviously I would not want to put an image on top and then stop clicks on underlying actual ad 显然，我不希望将图片放在顶部，然后停止点击底层实际广告

2 个解决方案

In answer to your questions: 在回答您的问题时：

First off, if the ad uses iframes from a different domain than the page, then you are much more limited in what you can do. 首先，如果广告使用的是来自网页之外的其他域的iframe，则您的工作能力将受到更大的限制。 All you could do in that case is cover the ad with a transparent object that was in your own page and when you do that, the ad will no longer receive clicks. 在这种情况下，您所能做的就是在您自己的页面中覆盖一个透明的对象，当您这样做时，该广告将不再获得点击。

If the ad does not use iframes from a different domain than the page, then you have these options for your two questions: 如果广告没有使用与页面不同域中的iframe，那么您可以针对以下两个问题选择以下选项：

1) You can create a transparent div with javascript and place it into the same parent as the ad. 1）您可以使用JavaScript创建一个透明的div，并将其放置在与广告相同的父对象中。 It can then be located with css positioning to be on top of the ad if that's what you're really trying to do. 如果您确实要这样做，则可以使用css定位将其定位在广告的顶部。 The details of that positioning depend upon how the ad itself is positioned. 定位的细节取决于广告本身的定位。 Or, if the ad is only a single div itself, you could insert a transparent div into the ad and size it so that it exactly covers all the area of the ad. 或者，如果广告本身只是一个div，则可以在广告中插入一个透明的div并调整其大小，以使其完全覆盖广告的所有区域。 The transparent object would receive the initial click, but then the click would "bubble" up to the parent which would be the ad. 透明对象将获得初始点击，但随后该点击将“冒泡”直至父级（即广告）。

2) Clicking on a transparent object that is placed above the ad will result in the click going to the transparent object first, not to the ad. 2）点击位于广告上方的透明对象，将导致点击首先到达透明对象，而不是广告。 The click goes to the top-most object that was clicked on, though clicks will bubble up to parent objects. 单击将转到被单击的最上面的对象，尽管单击将冒泡到父对象。 So, if the ad itself is a parent object, then the click will go to the ad also. 因此，如果广告本身是父对象，则点击也将到达广告。

If you just want to know about the clicks, then you may be better off just adding your own eventListener for the click on the existing ad and not inserting another layer above it. 如果您只想了解点击次数，那么最好为现有广告的点击添加自己的eventListener，而不要在其上方插入另一层。 You would have to wait until the ad is present, find the correct object and insert your own eventListener (assuming the ad is not inserted using iframes from a different domain). 您必须等到广告出现之后，找到正确的对象并插入自己的eventListener（假设未使用来自其他域的iframe插入广告）。

You could attach a click listener on the whole document and whenever the click occurs, you could check if that click was from the ads. 您可以在整个文档上附加一个点击侦听器，只要点击发生，就可以检查该点击是否来自广告。 And do your processing. 并做您的处理。