enlarging an image in a new window when a user clicks on it. Here's the Javascript I used:
<html>
<head>
<SCRIPT language="JavaScript">
<!--
function PopUp(pPage) {
window.open(pPage,'popWin','resizable=yes,scrollbars=yes,width=580,height=460,toolbar=no');
}
//-->
</SCRIPT>
</head>
<body>
<img src="thumbnail.jpg" alt="" border=0>
</body>
</html>
This has worked great for me but I need to have the large image in the new window centered. I've tried adding "align=center" to various parts of both the part of the code as well as the part of the code. Nothing has worked.
You have to load a HTML document to achieve that. You are loading only a plain images. In this case, you have no influence to its position, because the browser only renders an image.
Related
First of all, even if my question is about how to refresh <iframe>'s without flickering, any other suggestions that would solve my problem will be welcome.
Problem: I have a server that publishes a "main" html page. Meanwhile, it takes pictures (say, one per second) and saves them on the HDD. I want the picture to be displayed on the web page and be refreshed.
Solution found: I use a <iframe></iframe> scope where I put another page that contains only the image. Then this second page is refreshed periodically. So, the entire page is not refreshed, only the image frame. The problem is that this solution suffers from a flickering that occurs each time it is refreshed.
Here is the code of the main page (a little compacted):
<!DOCTYPE html><html><head><title>Blabla</title></head>
<body bgcolor="#404040"><h1>WELCOME!...</h1><hr>
<table border="0"><tr height="480"><td width="640">
<!-- RIGHT HERE! -->
<iframe src="image.html" width="640" height="480" frameborder="0"></iframe>
</td></tr></table>
</body></html>
and the second web page is like this:
<!DOCTYPE html><html><head>
<script type="text/javascript">
<!--
function f( t )
{
setTimeout( "location.reload( true );", t );
}
-->
</script>
</head>
<body bgcolor="#000000" onload="JavaScript:f( 1000 );">
<img src="../images/myimage.png" alt="Erreur" height="100%" width="100%"/>
</body>
</html>
I'm a beginner in JavaScript, so I don't pretend this piece of code is good, even passable. Feel free to give me some advice.
Now, is it possible to reload without flickering? I read that the flickers occur while the page is not entirely loaded. I also read about hidden frames switched on and off during load time, etc. But I cannot find a good solution.
Also, I know that some technologies like AJAX exist but I don't know a lot more about them. Feel free to suggest me to use them if it is necessary, I can learn quickly...
EDIT 1: Most Android browsers don't support relative image size like in my example. Use absolute pixel values in place.
Reloading an iframe will always flicker. But you don't need ajax for this either, just a timer and a trick to avoid caching:
<!DOCTYPE html><html><head><title>Blabla</title></head>
<body bgcolor="#404040"><h1>WELCOME!...</h1><hr>
<table border="0"><tr height="480"><td width="640">
<div>
<img id="theimg" src="../images/myimage.png" alt="Erreur" height="100%" width="100%"/>
</div>
</td></tr></table>
<script type="text/javascript">
var theimg = document.getElementById("theimg");
var theurl = "../images/myimage.png";
setInterval(function() {
theimg.src = theurl + '?t=' + new Date().getTime();
}, 1000);
</script>
</body></html>
In the following example the flash in my HTML would not show after moving it's parent element in DOM. I use appendChild on enclosing div of my object element to move it somewhere else in the DOM hierarchy, but after the move is complete the containing flash would not show.
I get this error in IE 10 and firefox, in Chrome there seems to be no problem.
This error happened in much larger project, but I managed to distill it to the following little example.
<html>
<head>
<script>
window.onload = function() {
var copy = document.getElementById("s");
document.getElementById("newparent").appendChild(copy); //if I comment out this line, example works
}
</script>
</head>
<body>
<div id="newparent"> <!-- here will the object be appended -->
</div>
<div id="s">
<object width="50%" height="50%" data="http://www.w3schools.com/tags/helloworld.swf">SWF Not shown</object>
</div>
</body>
</html>
If I comment out the second line of my onload function, the flash shows properly (but it is not moved around). I am not able to google anything. Perhaps I am not able to describe my problem, I am pretty new to HTML. Thanks in advice.
OK, so thanks to you guys, I had an idea of what to look for and I stumbled upon this article.
The problem I have seems to be that for some ?security? reasons the flash would not load after being moved. I devised this dirty workaround, simply I force browser to parse and recalculate the object tag. Is it so? I hope I understand well what am I doing.
<html>
<head>
<script>
window.onload = function() {
var copy = document.getElementById("s");
document.getElementById("newparent").appendChild(copy);
copy.innerHTML = copy.innerHTML; //dirty workaround
}
</script>
</head>
<body>
<div id="newparent"> <!-- here will the object be appended -->
</div>
<div id="s">
<object width="50%" height="50%" data="http://www.w3schools.com/tags/helloworld.swf">SWF Not shown</object>
</div>
</body>
</html>
i've this simple piece of code that don't work in Internet Explorer, but do work in Chrome, Firefox etc.
It is a simple button image 'rollover' .
<html>
<head>
</head>
<body>
<img src="p1.png" name="img1" onMouseOver="document.images[0].src='p2.png'" onMouseOut="document.images[0].src='p1.png'" ></a>
</body>
</html>
What's wrong in IE 6,7,8 ?
Change your code to this:
<html>
<head>
</head>
<body>
<img src="p1.png" name="img1" onMouseOver="this.src='p2.png'" onMouseOut="this.src='p1.png'" />
</body>
</html>
Also, I if your HTML page contains more data the the HTML page you've showed in your question, I suggest you put this code in the beginning of the <body> in order to preload the rollover image so there will be no delay when you want the rollover to work (otherwise, the rollover image will be downloaded to the user's device only when he hovers the image, causing a slight delay to the rollover (depending on the onMouseOver image size)):
<img src="p2.png" class="hiddenPic" />
<!-- loading (hidden) rollover image before all the other page data -->
And add the CSS hiddenPic class code: .hiddenPic { display: none; }
Other methods to preload the rollover image can be done using CSS or the JavaScript onLoad event handler.
onmouseover="this.src='p2.png'"
Use this instead of document.images....
Another method (works if you need to rollover change something else as well):
<img src="p1.png" name="img3" id="img3" onMouseOver="document.getElementById('img3').src='p2.png'" onMouseOut="document.getElementById('img3').src='p1.png'" >
http://jsfiddle.net/DNtUY/5/ (3 examples, yours, Said's, this one).
PS. Your open tag is <img ...> but the close tag is </a>
Maybe if the images are not that heavy, you might try a different approach like declaring both images and hide one of them. Then with javascript when you roll over the visible image, you hide it and show the other one.
Perfectly working code for your question mr.Stighy:
<html>
<head>
<style type="text/css">
</head>
<body>
<img src="../a_b_c/a.jpg" alt="" onMouseOver="this.src='b.jpg'" onMouseOut="this.src='a.jpg'" onClick="this.src='c.jpg'" class="style1"></a>
</body>
</html>
I think we messed up with the images, that's it... p.s. Giulio is waching you.
I want to make div into my intex.htm file (already built site) to place in a .swf file that will cover the whole screen, and a few seconds later the animated page will disapear and the htm page will appear. I don't want to make different htm file, neither put a button on flash(ie on click...). I just want after a few seconds and after the flash has ended, the flash will go away and the page will appear.
You can use jQuery...
<html>
<head>
...
<script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
<script>
$(document).ready(function(){
var flash_time = 5000;//in ms
$('#flash').delay(flash_time).hide();
$('#cont').delay(flash_time).show();
});
</script>
</head>
<body>
<div id='cont' style='display:none;'>
...content...
</div>
<div id='flash' style='width:100%;height:100%;'>
...embed...
</div>
</body>
</html>
Ok, lets say I go to http://www.google.com/intl/en_ALL/images/logo.gif , which is not really a document, but an image, iin my browser. Does it still have a document object? Can I use javascript: in my location bar? Wha'ts the deal with this? Thanks.
A quick look with Firebug reveals that yes indeed, there is a DOM and a document object. For example, javascript:alert(document.title) in the location bar gives "logo.gif (GIF Image, 276x110 pixels)". This results from the construction of the following document by the browser:
<html>
<head>
<title>logo.gif (GIF Image, 276x110 pixels)</title>
</head>
<body>
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" alt="http://www.google.com/intl/en_ALL/images/logo.gif"/>
</body>
</html>
This is also true in Chrome (with a slightly different string for the title); the HTML is
<html>
<body style="margin: 0px;">
<img style="-webkit-user-select: none" src="http://www.google.com/intl/en_ALL/images/logo.gif">
</body>
</html>
In IE, it appears that document.title is empty, but javascript:alert(document.body.clientWidth) gives a result equal to the client area of the browser, so it looks like there's a DOM there as well. The HTML is as follows:
<html>
<head>
<title></title>
</head>
<body>
<img src="http://www.google.com/intl/en_ALL/images/logo.gif" complete="complete"/>
</body>
</html>
It depends on the browser. If you go to that URL in firefox, for example, and open the DOM Inspector, you will see an html, body and img tag; also, typing javascript:alert(document) in the location bar will alert [object ImageDocument]. IE8 exhibits similar behaviour (but alerts just [object]).
no... the browser simply acts as a picture viewer