|
HTML - Full Screen Image Html
Hi all
I only know very basic HTML and at the moment. I have an image that is hosted on Buzztouch. http://www.buzztouch.com/application...elfordboat.jpg Now my Question What code would I need to write so when you click on a page the image appears full screen no mater what brower you use it on. ? thanks Similar TutorialsI need to display an image (size 1024x768) in IE explorer so when i hit f11 (kiosk mode) its full screen. Then I need that image to refresh every X seconds with out flickering on the screen. The file is a bmp and is about 5mb and only will be changed a few times a day by a program I wrote in Vb.net. It will write over the existing file so the webpage would pick up the changes when it refreshes. Codes I'v tried already: Code: <html>
<head>
<META HTTP-EQUIV="Expires" CONTENT="-1">
<META HTTP-EQUIV="refresh" CONTENT="10;URL="meta.htm";"transition">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>New Page 1</title>
<style type="text/css">
html, body {margin:0; padding:0; width:100%; height:100%; overflow:hidden;}
body {font-family:verdana, arial, sans-serif; font-size:76%;}
#background{position:absolute; z-index:1; width:100%; height:100%;}
#scroller {position:absolute; width:100%; height:100%; top:0; left:0; overflow:auto; z-index:2;}
#content {padding:5px 300px 20px 200px;}
p {line-height:1.8em; letter-spacing:0.1em; text-align:justify;}
</style>
</head>
<body>
<div>
<img id="background" src="View.bmp" alt="" style="position: absolute; left: 0; top: 0" width="90%" height="90%" />
</div>
</body>
</html>
and Code:
<IMG src="OR View.bmp" name="refresh" Padding="0" Width="1024" Height="768" Scrolling="0">
<SCRIPT language="JavaScript" type="text/javascript">
<!--
var t = 120 // interval in seconds
image = "OR View.bmp" //name of the image
function Start() {
tmp = new Date();
tmp = "?"+tmp.getTime()
document.images["refresh"].src = image+tmp
setTimeout("Start()", t*1000)
}
Start();
// -->
</SCRIPT>
However the first one flickers and the 2nd doesnt display in full screen. Any information or even pointing me in the right direction would help. I know almost nothing about java and html =x Hi all friends, I am a photographer and I am trying to set up my website with a full screen gallery. The address is: http://provasitofoto.altervista.org If you go to the portfolio section and click on the any thumbnail you will see the chosen image go to full screen which is actually what I would love to have but....as you will probably notice, you will see only a part of the image, even if it is full screen it is "cutted". Now of course what I need is the possibility to view the entire image full screen, even stretched but with the ability to fit in any screen and browser. I am new to this kind of things znd so here I am asking for your help. Please consider me like a 5 years old baby and so explain to me step by step what I should do to solve this problem. Thanks in advance to any kind soul who are will to help me. God bless you. Marco from Italy This splash page is supposed to take you to my website in "full-screen" ,but the pop-up keeps coming back as an error.. I know it's something simple,but I can't figure out what I'm doing wrong..can someone look at my code and let me know what is wrong? it's here - http://www.practiceboard.com/?4898323 Thanks!! Heather Hi board members I trust I have posted in the correct forum... I've just coded an excel speadsheet for all my videos. I have created hyperlinks to each file. I'm wondering if there is a switch to add to the end of the hyperlink to force the media player the open in full screen? Any help would be appreciated. Cheers, Mal I am not sure where to put this question. I have noticed that some webpages have graphics to make it look like a piece of paper stuck on the wall (and there is a certain amount of blank space left and right - see http://www.infinetwebsolutions.com/) while some webpages occupy the whole screen - see http://www.speakteen.com/. Can someone tell me if there are technical advantages/reasons for doing this? I have been reading webpages and blog pages for dozens of hours and am starting to feel that blogs all look alike. Part of the reason is that almost all of them have the "cut page" look rather than the full page look. Is there an artistic reason to do this? some advantage? I really like nice cut and dried technical stuff but I am more likely to be considered autistic than artistic I need to create a link that will bring up a page that shows nothing but the <body> of the page, with no menu bars, status bars etc. I have an old page created with FrontPage years ago that does it perfectly, nothing from the browser shows at all, not menu, status scroll, etc shows. However, on my new fancy Joomla 1.5.10 site I cannot get it to work... even with the same code pasted in from the old site. I cannot get it not to display the menu and status bars when I try it on my Joomla site.. This is the code from the old site: <a href="BlackPage.htm"> <img border="0" src="luscher%20black%202.jpg" lowsrc="luscher%20black%202.jpg" width="100" height="71"></a> It even has a bunch of garbage in it and it works perfectly. Why can't I get the same thing to work on my Joomla site? Thanks Larry I'm fairly new to making websites, and I want to make a website with a full screen background image jpg, but I'd like it to be full screen in all resolutions. Is this posible? I want to use this image as a background http://img236.imageshack.us/img236/4...dexbackcu3.jpg and then add menus and text content. any tips? thanks! jdawest Hi all, I am attempting to rework a training guide that includes lots of screen caps. The guide is currently in word format, but is too big now and all the full size screen caps make the guide difficult to read. I had intended to re-do the guide in HTML format so it can be viewed in a browser using maybe CSS to enlarge the thumbnails on mouse rollover. This would make the guide alot smaller, more functional and easier to read. With this being a training guide though, it will also need to be printed for new staff, so my question is... Is it possible to add some HTML/Java code that will see the thumbnail images printed as the orginal sized image rather than the thumbnail itself? Many thanks Joe Below is code that works fine, but I wonder if someone could help so that it opens in a full size window so that they don't have to resize the pop up. Thank you. <p><frameset frameborder="0" rows="10%,*"></frameset><frame src="menu.html"></frame><frame name="frame"></frame>Adjust the percentage to give your frames the right height. The first frame is pointing at your menu so here is menu.html :</p> <table align="center"> <tbody> <tr> <td> <form target="frame"> <select onchange="change(this)"> <option value="">Drop down 1</option> <option value="" selected="selected">Drop down 1</option> <option value="http://www.google.co.uk">Google</option> <option value="http://www.yahoo.co.uk">Yahoo</option> </select> </form> </td> <td> <form target="frame"> <select onchange="change(this)"> <option value="">Drop down 2</option> <option value="" selected="selected">Drop down 2</option> <option value="http://www.google.co.uk">Google</option> <option value="http://www.yahoo.co.uk">Yahoo</option> </select> </form> </td> <td> <form target="frame"> <select onchange="change(this)"> <option value="">Drop down 3</option> <option value="" selected="selected">Drop down 3</option> <option value="http://www.google.co.uk">Google</option> <option value="http://www.yahoo.co.uk">Yahoo</option> </select> </form> </td> <td> <form target="frame"> <select onchange="change(this)"> <option value="">Drop down 4</option> <option value="" selected="selected">Drop down 4</option> <option value="http://www.google.co.uk">Google</option> <option value="http://www.yahoo.co.uk">Yahoo</option> </select> </form> </td> </tr> </tbody> </table> <table> <script language=Javascript> function change(select) { if( select.options[ select.selectedIndex].value) { select.form.action = select.options[ select.selectedIndex].value; select.form.submit(); } } </script> <tbody> </tbody> </table> There are 5 copies of the same images are placed in a folder i.e. large(1024*768),medium(500*375),small(240*180),thu mnail(75*75),square(100*50) in size.... The following code upload number of Geocoded images(square size) when the page loads.I want when someone click on the any Geocoded image on the page ,it should show the large image(1024*768) of the same.And further click on the large image it must show again the square size image of the same. Following is the actual code.It is in .js file . var epsg4326 = new OpenLayers.Projection("EPSG:4326"); var OSVMain = (function() { var map, markers, map_move_timeout; var photos = {}; function mapChange() { if( map_move_timeout ) clearTimeout(map_move_timeout); map_move_timeout = setTimeout(mapChangeTimeout, 500); updateLinks(); } function updateLinks() { var center = OSV.getMapCenter(map); var zoom = map.getZoom(); $('#permalink').attr('href',OSV.getURLBase()+'?lat ='+center.lat+'&lon='+center.lon+'&zoom='+zoom); $('#kmllink').attr('href',getLocateLink('kml')); } function getLocateLink(format) { var extent = OSV.getMapExtent(map); var url = OSV.getURLBase()+'/api/photos/locate.'+format+'?bbox='; url += [ extent.left, extent.bottom, extent.right, extent.top].join(','); return url; } function mapChangeTimeout() { map_move_timeout = null; var url = getLocateLink('json'); $.get( url, null, photosLoaded, 'json' ); } function photosLoaded(json) { var new_photos = {}; var size = new OpenLayers.Size(50, 50); var offset = new OpenLayers.Pixel(-25, -25); for( var i = 0, l = json.length; i < l; ++i ) { var p = new OSVPhoto(json[i]); if( photos[p.data.id] ) { new_photos[p.data.id] = photos[p.data.id]; photos[p.data.id] = null; } else { var position = new OpenLayers.LonLat(p.data.lon,p.data.lat); var icon = new OpenLayers.Icon(p.url('square'), size, offset); p.marker = new OpenLayers.Marker(position.clone().transform(epsg4 326, map.getProjectionObject()), icon); new_photos[p.data.id] = p; markers.addMarker(p.marker); } } for( var k in photos ) { var p = photos[k]; if( p && p.marker ) markers.removeMarker(p.marker); } photos = new_photos; } function setup() { var vectors; var popup; map = new OpenLayers.Map($('#map').get(0), { controls: [ new OpenLayers.Control.ArgParser(), new OpenLayers.Control.Attribution(), new OpenLayers.Control.LayerSwitcher(), new OpenLayers.Control.Navigation(), new OpenLayers.Control.PanZoomBar() ], units: "m", maxResolution: 156543.0339, numZoomLevels: 20, displayProjection: new OpenLayers.Projection("EPSG:4326") }); var mapnik = new OpenLayers.Layer.OSM.Mapnik("Mapnik", { displayOutsideMaxExtent: true, wrapDateLine: true }); map.addLayer(mapnik); var osmarender = new OpenLayers.Layer.OSM.Osmarender("Osmarender", { displayOutsideMaxExtent: true, wrapDateLine: true }); map.addLayer(osmarender); var numZoomLevels = Math.max(mapnik.numZoomLevels, osmarender.numZoomLevels); var start = OSV.getStartLocation(); var numzoom = map.getNumZoomLevels(); if (start.zoom >= numzoom) start.zoom = numzoom - 1; map.setCenter(start.pos.clone().transform(epsg4326 , map.getProjectionObject()), start.zoom); OSV.setupMapEventHandlers(map); map.events.register("moveend", map, mapChange); map.events.register("zoomend", map, mapChange); mapChange(); markers = new OpenLayers.Layer.Markers("Markers", { displayInLayerSwitcher: false, numZoomLevels: numZoomLevels, maxExtent: new OpenLayers.Bounds(-20037508,-20037508,20037508,20037508), maxResolution: 156543, units: "m", projection: "EPSG:900913" }); map.addLayer(markers); } return { setup: setup, 1:1 }; })(); $(function(){ OSVMain.setup(); }); Any suggestions ? Thanking you Hi, I have made a webpage with Flash and published it in HTML. What can I do to fit it on any screen with any resolution? My page is 800x600 and I would like to have it fit to screen in both dimensions (x and y) or in one dimention on any screen. I prefer not to stretch it on screen. By stretching, the images will be deformed and I don't want it. Is there anyone who can help me in this case? What is the code and where in the HTML file should I put it? Thanks in advance! Hi, How do you get an image at the top of the screen This is what I mean, Thanks. Can anybody point me in the right direction on how to create this screen shift effect of the background, like in this website. http://www.nikebetterworld.com/ I would be very appreciative of any help you guys could give me. Thanks in advance. I've got the weirdest thing happening... An image on a site I'm working on doesn't appear on in Firefox on my computer when I view the site online. It's fine offline, and it's fine on other computers... including browsercam. It's also fine in IE on my system AND when I set up a guest system in VMWare I can see it in Firefox. So this probably isn't really an HTML question, just a "Have you ever seen this total weirdness?" question. I've rebooted repeatedly. The image is the photo of the sledders in the upper left corner at http://tourismwithkidsinnh.com. Dont know how to explain this but i have some flash centered in the middle of the screen and i would like to put a image that to the left and right of the centered flash im running at 1024x768, i did seem to manage this but when i tried a higher resolution the flash stopped center and the left and right image kept to the left and far right of the screen when what i wanted is the left and right image to stay flush left and right to the centered flash. Below is my code minus the left and right image, could someone help me add a image to the left and right of the centered flash, so even if the resolution is increased the left and right image will stay flush with the centered flash. HTML Code: <!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<title></title>
<style type="text/css">
<!--
body {
background-color: #000000;
}
-->
</style></head>
<body >
<table width="770" border="0" align="center">
<tr>
<td><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="swflash.cab#version=7,0,19,0" tppabs="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="770" height="70">
<param name="movie" value="bombay-logo-top.swf" />
<param name="quality" value="high" />
<embed src="bombay-logo-top.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="770" height="70"></embed>
</object></td>
</tr>
<tr>
<td><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="swflash.cab#version=7,0,19,0" tppabs="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="770" height="400">
<param name="movie" value="main.swf" />
<param name="quality" value="high" />
<embed src="main.swf" main.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="770" height="400"></embed>
</object></td>
</tr>
<tr>
<td><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="swflash.cab#version=7,0,19,0" tppabs="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="770" height="100">
<param name="movie" value="time.swf" />
<param name="quality" value="high" />
<embed src="time.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="770" height="100"></embed>
</object></td>
</tr>
</table>
</body>
</html>
Hi All, I need to have a wide (1984px) image centred on the screen. If the screen is only 1024px wide it always aligns left. I am probably missing something basic here but can anyone offer advice? Thankyou. Hello all!! First time to this forum, but it was highly recommended. I was wondering if anyone had a simple code for capturing the current pane of a web page you are on, then send it as a print job to your default printer. Backround: We have an internal web portal for sales of the company and contains both text and graphs. The graphs are shown on screen but will not print normally. The software company (Dimensional Insight aka Diver) knows of the issue, but until it is fixed I thought the above could be a work around to the challenge. Please let me know if I need to explain further. Right now the code for button I am using is listed below.. very clean and simple, just hoping I can add a screen capture to it. //Start Code <HEAD> <script> function printWindow(){ bV = parseInt(navigator.appVersion) if (bV >= 4) window.print() } </script> </HEAD> <BODY> <a href="javascript:printWindow()">Print This Page</a> </BODY> //End Code Hi! I'm new to this site and new to HTML so please don't bash me. I really need help with a problem I have. I have four images as my buttons and links to various pages on my site. They're rectangles that spread out horizontally on my screen. However, not all computer screens are the same size, so at school for example, since the screen is smaller, the order of my links gets messed up. Is there any way to size an image so that it is 25% of a moniter? If so, could someone just like, right the code down so I may copy? I"m really bad at html. Any help would be appreciated. Thanks! Hi, I'm currently designing this website: www.carmelalopez.com and I'm trying to get the images on the left to fit the size of the browser screen on the right when you click on them. The images themselves are huge, so I'd like some kind of code that resizes the images to fit the size of the visitor's screen, which will vary from user to user. This might not be an HTML question (maybe CSS), but any guidance in the right direction would be greatly appreciated. Thank you. |
|||||||