Solved

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

Posted on 2014-02-07
3
400 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 500 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

On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Understanding ping command in Ubuntu 5 67
Do it yourself websites 9 41
regular gmail; not g-suite. one label. 11 50
wordpress 4.7.4, theme 8 43
Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
The viewer will learn how to count occurrences of each item in an array.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

752 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