?
Solved

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

Posted on 2014-02-07
3
Medium Priority
?
409 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 53

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 53

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

Survive A High-Traffic Event with Percona

Your application or website rely on your database to deliver information about products and services to your customers. You can’t afford to have your database lose performance, lose availability or become unresponsive – even for just a few minutes.

Question has a verified solution.

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

Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
Dramatic changes are revolutionizing how we build and use technology. Every company is automating, digitizing, and modernizing operations. We need a better, more connected way to work together as teams so we can harness the insights from our system…
The viewer will learn how to dynamically set the form action using jQuery.
In a recent question (https://www.experts-exchange.com/questions/29004105/Run-AutoHotkey-script-directly-from-Notepad.html) here at Experts Exchange, a member asked how to run an AutoHotkey script (.AHK) directly from Notepad++ (aka NPP). This video…

719 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