How do you create a hyperlink that opens to another webpage inside the current webpage?
24.February, 2010
I have a webpage and a hyperlink that opens to a new window to view a video on another website. Can I have the hyperlink open the video on the current page. Maybe in a small window. So they can view the video without leaving the page they’re on.
Easier to make the link a popup link calling a popup file with the video. You can control the size of the page to fit just the video. On the popup page, you can add a "Close This Window" button.
Online Popup Makers…
http://www.wilsoninfo.com/pop_gen.html
http://www.freewebmasterhelp.com/tools/popup/
http://www.hypergurl.com/newwindow.html
http://javascript.internet.com/generators/popup-window.html
http://www.htmlbasix.com/popup.shtml
http://www.dynamicdrive.com/dynamicindex8/popwin.htm
http://javascript.internet.com/generators/popup-window.html
Ron
24.February, 2010 um 5:43 pm
This in theory can be done, but unfortunately, it gets really complicated really fast. Here’s a simple example that works in Standards-compliant browsers like Firefox, Opera and Safari =)
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>In-line Hyperlink</title>
<meta name="description" content="Example of an in-line link that opens in an object." />
</head>
<body>
<h1>In-line Hyperlink</h1>
<p><a href="http://google.com/" target="in-line">Search the Web!</a></p>
<p><object data="" type="text/html" name="in-line"></object></p>
</body>
</html>
Edit: This is extremely simple example, in reality, you’d probably want to use JavaScript to create the object and target it when the link is clicked. This way, the link behaves normally if the user isn’t using a graphical browser.
It would be a little trickier, but doable, to get the link itself to change into an object element and create a sort of GUI for expanding the link into the current web page and minimising it back into a regular link. This would all be done using JavaScript. I’ve personally been experimenting with its interface, but haven’t implemented it on anything yet.
In theory, this general concept was one of the main advantages of XLinks versus Hyperlinks, but it was discovered in the making of XHTML2, that XLinks and HTML are not compatible.
Interestingly enough, Vannevar Bush’s description of the Memex sounded like it might have worked using in-line Hyperlinks, particularly the trickier implementation I noticed.
References :
Me!
24.February, 2010 um 6:00 pm
The easiest cross-browser approach is to load the external page in an iframe. I assume you don’t want the video to load on initial page load. If you *do* want it to load on initial page load, then simply use an iframe that loads whatever URI you want, e.g.:
<iframe id="myFrame" src="http://www.google.com" height="475" width="750" frameborder="0"> </iframe>
Otherwise, try something like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/ DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/ 1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
a {
display:block;
margin-bottom:0.5em;
}
iframe {
width:755px;
height:480px;
border:none;
}
#myDiv {
width:755px;
height:480px;
border:1px solid silver;
}
</style>
<script type="text/javascript">
function loadIframe(str) {
var d = document;
var myDiv = d.getElementById(’myDiv’);
var myFrame = d.createElement(’iframe’);
myFrame.setAttribute(’src’, str);
myFrame.setAttribute(’frameborder’, ‘0′);
myDiv.appendChild(myFrame);
return false;
}
</script>
</head>
<body>
<h1>My Page</h1>
<a href="http://www.google.com" onclick="return loadIframe( ‘http://www.google.com’ )">Watch video!</a>
<div id="myDiv"></div>
<p>End of my page</p>
</body>
</html>
If you want to get sophisticated, you should look into using a JavaScript framework like jQuery.
References :
24.February, 2010 um 6:07 pm
Easier to make the link a popup link calling a popup file with the video. You can control the size of the page to fit just the video. On the popup page, you can add a "Close This Window" button.
Online Popup Makers…
http://www.wilsoninfo.com/pop_gen.html
http://www.freewebmasterhelp.com/tools/popup/
http://www.hypergurl.com/newwindow.html
http://javascript.internet.com/generators/popup-window.html
http://www.htmlbasix.com/popup.shtml
http://www.dynamicdrive.com/dynamicindex8/popwin.htm
http://javascript.internet.com/generators/popup-window.html
Ron
References :