Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

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

Posted on 2014-02-07
3
Medium Priority
?
414 Views
Last Modified: 2014-02-07
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!
0
Comment
Question by:goodie069
  • 2
3 Comments
 
LVL 54

Accepted Solution

by:
Scott Fell,  EE MVE earned 1500 total points
ID: 39841824
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
 

Author Comment

by:goodie069
ID: 39841830
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
 
LVL 54

Expert Comment

by:Scott Fell, EE MVE
ID: 39841965
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

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.
Suggested Courses

886 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question