Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Jul 2012
    Posts
    62
    Thanks
    5
    Thanked 14 Times in 14 Posts

    Image above external link page

    Is there a way of placing an image (logo) above an externally linked page after the hyperlink is pressed? Javascript or PHP.

    <a target="_blank" href="http://www.sportingpulse.com/rpt_fixture.cgi?client=0-2307-128783-223652-17343285" >Saints B 16/1</a>
    Last edited by waynenort; 08-19-2012 at 01:46 PM.

  • #2
    Senior Coder
    Join Date
    Apr 2011
    Location
    London, England
    Posts
    2,120
    Thanks
    15
    Thanked 354 Times in 353 Posts
    Code:
    a:visited:before {
        content:  url(images/yourimage.gif);
        /* other properties to bring the image in front of the link */
    }
    but you could use JavaScript if you prefer.
    "I'm here to save your life. But if I'm going to do that, I'll need total uninanonynymity." Me Myself & Irene.
    Validate your HTML and CSS

  • #3
    New Coder
    Join Date
    Jul 2012
    Posts
    62
    Thanks
    5
    Thanked 14 Times in 14 Posts
    I did some searching around and this is what I came with. A hyperlink that opens up an external page in a div/table with the help of an iframe. Which means I can put my image or logo at the top of the page. Hopefully others can get some benefit from this.

    This method use 3 html files.
    1: Your hyperlinks in a webpage
    2: Iframe in div/table in a webpage
    3: The external webpage

    1: Links.htm
    Code:
    <html>
    <head>
    <title>External link test page</title>
    </head>
    <body>
    Try this link <a href="Local_Iframe_Page.htm?test.htm">test link</a>
    </body>
    </html>
    2: Local_Iframe_Page.htm
    Code:
    <html>
    
    <head>
    
    <meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
    <title>Internal Ifarme Page</title>
    <script type="text/javascript">
    function LoadIFrame($file)
    {
        document.getElementById("frame1").src=$file; //loads file into Iframe
        document.getElementById("frame1").style.width = "95%"; //sets width of Iframe
        document.getElementById("frame1").style.height = "100"; //sets height of Iframe
        document.getElementById("frame1").style.wordWrap = "break-word";		// just word wraps the contents of the Iframe
    
    }
    
    </script>
    
    <script type="text/javascript">
    function LoadContent() {
      if (location.search.length > 0){ //check if url has something
        url = unescape(location.search.substring(1)); //strip out the filename to be loaded into Iframe
      	LoadIFrame(url); //call the loadiframe function
      }
    }
    </script>
    </head>
    
    <body onload="LoadContent()"><center><br>
    <table class="main" border=1>
    	<tr>
    		<td align="center" colspan="2">header</td>
      </tr>      		
    	<tr>
    		<td>sidebar</td>
    		<td width="100%" cellpadding="10" colspan="2"><center>&nbsp;<iframe border="1" frameborder="1" src="intro.htm" id="frame1" width="95%" height="100" scrolling="yes" align="center">&nbsp;</iframe></center></td>
    	</tr>
    </table>
    </center>
    </body>
    </html>
    3: test.htm or any other external webpage
    Code:
    <html>
    <head>
    <title>Loaded test page</title>
    </head>
    <body>
    
    test text loaded into Iframe
    All you need to add to any external link is the following
    
    some other words or content here<br>
    some other words or content here<br>
    some other words or content here<br>
    some other words or content here<br>
    some other words or content here<br>
    some other words or content here and to prove that it wordwraps here is a long line of words repeated some other words or content here and to prove that it wordwraps here is a long line of words repeated some other words or content here and to prove that it wordwraps here is a long line of words repeated
    etc
    
    </body>
    </html>
    Thanks for your suggestion Andrew, but I mustn't have asked the questing correctly. The logo needs to be on the external page or above it.
    Last edited by waynenort; 08-19-2012 at 01:45 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •