img inside iframe and hover effect

Question

I have a problem with hover effect on elements that are inside <iframe>.

Code inside iframe, it's in domainA.com

<!doctype html>
<html>
  <head>
      <meta charset="utf-8">
      <style>
          img:hover {
            opacity: 0.5;
          }
      </style>
 </head>
 <body>
     <img src="/image1.jpg">
     <img src="/image2.jpg">
     <img src="/image3.jpg">
 </body>
</html>

And second website on domainB.com

<iframe src="domainA.com/iframe.html">

When i embed iframe in domainB hover effect doesn't work. Is there any way to solve it somehow? I don't have access to code of domainB.com (other developer will put iframe there)

You have to write this `CSS property` in original page. You cannot inject `CSS` to `iframe` directly. — Deadlock, Feb 22 '14 at 09:01
Hmm, but what if i don't have access to original page? Iframe is not in the same domain origin — Krystian, Feb 22 '14 at 09:02
;/ could this be done via js for instance? kind of mouseover or something? — Krystian, Feb 22 '14 at 09:03
@Astaz3l it can be done via js if origin domain of `iframe` and `parent` page is same. If its really required extract text from `iframe` and `append` it to your `parent` page — Deadlock, Feb 22 '14 at 09:05
@Deadlock problem is that i'm providing iframe and i don't have access to parent page code — Krystian, Feb 22 '14 at 09:32
@Astaz3l I know you don't have access. What I am saying is to scrape required text with `js` if its `DOM` structure is fixed. — Deadlock, Feb 22 '14 at 09:35
@Deadlock not sure if i understand. Could you provide any snippet or something? — Krystian, Feb 22 '14 at 09:36

score 1 · Answer 1 · edited Feb 22 '14 at 12:08

1

If you want this effect work,you should link this css to inside your iframe.

a.html:

<html>
<body>
<iframe src="b.html" ></iframe>
</body>
</html>

b.html:

<html>
<head>
<style>
img:hover{
   opacity: 0.5;
}
</style>
</head>
<body>

<img src="xx.jpg" />
</body>
</html>

Otherwise use javascript to do this...like:

$(document.getElementById('Iframe_id').contentWindow.document.body).find("image").mouseover(function(){
   alert("do what you want here");
});

Be sure this code is inside $(documet).ready();

edited Feb 22 '14 at 12:08

aksu

5,221
5
24
39

answered Feb 22 '14 at 09:05

Raymond Cheng

2,425
21
34

Iframe is not in the same domain origin and he cannot access orignal page – Deadlock Feb 22 '14 at 09:09
@Deadlock,he didn't mention it before,then he can use javascrpt – Raymond Cheng Feb 22 '14 at 09:16
@RayCheng could you give me any tip how to achieve that? I don't have access to parent page code – Krystian Feb 22 '14 at 09:35
@Astaz3l,i'll update my answer,please check.. – Raymond Cheng Feb 22 '14 at 09:47
@RayCheng cool, but the problem is that I can't add anything to parent window code. So if possible, it has to be done from the inside of iframe + it's not in the same domain so contentWindow will not work – Krystian Feb 22 '14 at 11:49
@Astaz3l,it's better put you code to us,then i can see what you really want.. – Raymond Cheng Feb 22 '14 at 11:55
@RayCheng i've edited the question with source code. It should be more clear now – Krystian Feb 22 '14 at 12:07

img inside iframe and hover effect

1 Answers1