Load external website on site visit, with floating graphic/text overlay

My goal is to be able to introduce a floating image and/or text over a website that I don't control.

Typing that out, I can understand that this may sound malicious, and as such may not be possible. But I assure you, it's innocent.

As a joke, I would like to direct friends to this new site and, when visited, have it load a friend's website in the background... but with a funny picture or text that would float on the screen over his site. I have purchased the domain name and secured hosting.

Is such a thing possible? Or is there a similar way to do this as some sort of add-on that resides in the browser?

Any suggestions or advice would be appreciated. Thanks in advance!
goodie069Asked:
Who is Participating?
 
Scott Fell, EE MVEConnect With a Mentor Developer & EE ModeratorCommented:
Since it is going to your URL anyway, just take a screen shot and use that as a background image and put whatever you need over it.

<div id="friend_site">
<img="myfunnyimage.jpg">
</div>

Open in new window

0
 
goodie069Author Commented:
I'd rather the site still function -- that would be the funny part. As they're browsing his site, the annoying / funny floating thing is bouncing around.
0
 
Scott Fell, EE MVEDeveloper & EE ModeratorCommented:
You could simply set up an iframe that takes up the entire page and place your funnything as an absolute positioned object in the center of the page.
http://jsbin.com/pana/1/edit?html,output
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>JS Bin</title>
  <style>
    iframe{width:100%;height:900px;border:none;}
    #funnything{
     position: absolute;
    top: 50%;
    left: 50%;
      height:70px;
      width:100px;
      background-color:red;
      text-align:center;
      padding-top:30px;
    }
  </style>
  
</head>
<body>
  <iframe src="http://www.nbcolympics.com/"></iframe>
  <div id="funnything">I am funny</div>
</body>
</html>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.