HTML - Full Size Background Image

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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</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>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
</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>

Hi All,

Nice site BTW,

my problem is i want to add some text with a background colour behind it but i want the background colour to stretch the full width of the page ?

Can anybody help me out
Thanks

All:

Working to update a previously designed website.

Original design uses an <img> tag to create a top banner and another <img> tag
to create a side banner.

In each case there are mapped coordinates on each banner as links for the subsequent pages.

Basic page design is as follows:

Code:

<table>
   <tr>
      <td>
         <img usemap="Map1">
         <map name="Map1">
            <area>
            <area>
            <area>
         </map>
      </td>
   </tr>
</table>
<table>
   <tr>
      <td>
         <img name="Map2">
         <map>
            <area>
            <area>
            <area>
         </map>
      </td>
      <div>
         ***PAGE CONTENT***
      </div>
   <tr>
<table>

The challenge is that the [PAGE CONTENT] varries in length througout the site causing some pages
to be much longer or shorter than others.

This causes some inconsistencey in the relationship between the side banners height and the
page content.

In other words in some cases the banner is exceptionally longer than the page content and the
reader must scroll past significant "dead-space" before being brought to the lowest
mapped links in the side banner; or...

...in some cases the side banner is significantly shorter than the page content causing the
banner image to appear "poorly-fit" to the page design.

I considered altering the 2nd table instance in the above design so that the banner is carried
in a <td> tag that is adjacent to the page content and hopefully to allow the tag carrying the
image to size relative to the <td> tag carring the content....

Code:

<table>
   <tr>
      <td>
         <img usemap="Map1">
         <map name="Map1">
            <area>
            <area>
            <area>
         </map>
      </td>
   </tr>
</table>
<table>
   <tr>
      <td size="100%">
         <img name="Map2">
         <map>
            <area>
            <area>
            <area>
         </map>
      </td>
      <td size="100%" >
         <table>
            ***PAGE CONTENT***
         </table>
      </td>
   <tr>
<table>

The problem I've found with this is that as the content size causes the image to "flex", either
readablilty or image quality or both are effected, AND the mappings become inconsistent as the
image coordinates constantly change.

I've considered 2 solutions and am leaning toward one, but thought I'd post this and see if there
are better ideas I'm overlooking.

One idea was to add additional table rows inside the [PAGE CONTENT] table presumably creating a
"defalut" page size that would never be smaller than a standard for the side banner.
Problem: larger page sizes are still a problem as are the changing map coordinates

My other idea was to return to the original page design listed first above and again settle on
a standard side banner "height"... ...any page that was significantly longer than that height
would be split to 2 or more pages with a [NEXT>>] button at the bottom of the page navigating to
the additional content.
Problem: ...possible complications splitting content...
Benefit: ...consistent page design that allows a consistent side banner with navigable links...


Question for the group:
Does this sound reasonable?
Are there better alternatives I am overlooking?

THANKS IN ADVANCE FOR ALL INPUT!!

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

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

I 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 guys,

I'm currently trying to sort out the background for a website. What I'd like is to have a silhouette of a few people on a gradient background. I'd like to keep the quality high, but it also makes the file size large.

If there were no silhouette then I would have a one pixel strip of the gradient set to repeat. Is it possible to add two background pictures, or is there another way I can reduce the file size that I hadn't thought of?

Is it possible to put a smaller background image on top (like in layers) of my old background image? I have a background image, but I want to put a smaller image on top of that one, but for it to be treated also as background image. This image is a black vertical rectangle, but is faded on the edges to give a transparency, so its a .png. So ultimately what I am trying to do is put this black rectanlge on top of my original background image and with the transparency on the edges of this image, be able to see my original background image. How can I do so? Also what I was thinking was that this faded background would be scaled to fit different screen sizes, so do "width: 75%"? Just so that it ALWAYS stays at 75% no matter what screen size it is viewed on. Is this the right approach towards getting this result?

Hi everybody!

I always try to avoid the use of IFRAMEs, but in this case I had to insert the weather forecast coming from another site.

This "source" website has an api which allows one to choose the background of the IFRAME, so no problems with the actual background indeed... but on IE 7 I see an ugly white spot if I set the "height" of the IFRAME to something bigger than the actual height of the content. (see attachment)

This does represent a problem, since the actual content is variable in size, and thus I wanted to allow for some padding.

I googled for the solution, but the only thing I can find is "how to set the background to transparent" which is not what I need. I tryed it anyway, as seen in following code:
HTML Code:

<iframe scrolling="no" frameborder=0 
style="width:200px;height:490px;background-color:#000000;color:#000000;"
allowtransparency="true" 
src="http://www.ilmeteo.it/box/previsioni.php?citta=5155&type=mps1&width=200&ico=1&lang=ita&days=3&font=Arial&fontsize=12&bg=000000&fg=FFFFFF&bgtitle=FF0000&fgtitle=FFFFFF&bgtab=E8F000&fglink=1773C2">
</iframe>

The real problem is that I have no control on that white area, not even by setting bgcolor=black or style="background: black;"...

Any ideas would be greatly appreciated!

When you create a select form with a default size or a size of 1, the options (once you expand the form out by clicking it) that are moused over will be highlighted. I want that same effect on a select form with a size of 30. I imagine the solution lies in some javascript onmouseover function, but I couldn't find anything. Help?

Ok I'd really like to design a darker them with a lot of textures like this one:

http://www.grafpedia.com/tutorials/c...o-pixel-layout

But thats just a photoshop walk-thru.

So how would you go about making a background like the one shown with a couple of different textures without making just 1 large huge image?

I'm worried about download times as I have my background image as a 1px image set on repeat.

But if I choose to have a site design like shown in that link, I cant use the 1px image size option any more, or can I?

Basically I'm lost as to how to get my site to look like the design in the link.

Here it is now:

http://acidtripmediaproductions.com/lmi/index.html

I'd like to extend the main center div to go from the top to the bottom and "Frames" all the content within it

Whats the easiest way to do that?

Would I want to keep the side bar nav where its at if I do this?

Why are my 1000 pixels wide images are ok in FF and Chrome but seem to be 1.25% larger in IE?

Thanks

I don't know what part of this html is making the pictures in my table compressed width wise but if someone could help that would be fantastic.

Here is the code:



<style type="text/css">
body,table, td, li, p, div, textarea
{font-family:Tahoma; font-size:12pt; color:ffffff; font-weight:none;}

table, td { background-color:transparent; border:none; border-width:0;}
body{background-image:url(http://i7.photobucket.com/albums/y28...onlybkgd.jpg);
background-attachment:fixed;
background-repeat:no-repeat;
background-position:bottom right;
background-color:179f99; }

body
{scrollbar-face-color:179f99;
scrollbar-shadow-color:ffffff;
scrollbar-highlight-color:ffffff;
scrollbar-3dlight-color:ffffff;
scrollbar-darkshadow-color:ffffff;
scrollbar-track-color:87f5f3;
scrollbar-arrow-color:ffffff;}

.text {font-family:Tahoma; font-size:12pt;
color:000000; font-weight:none}

.redtext{font-family:Tahoma;
font-size:10pt; color:000000; font-weight:bold}

.redbtext{font-family:Tahoma;
font-size:10pt; color:000000; font-weight:bold}

.orangetext15{font-family:Tahoma;
font-size:10pt; color:000000; font-weight:bold}

.lightbluetext8{font-family:Tahoma;
font-size:10pt; color:000000; font-weight:bold}

.whitetext12{font-family:Tahoma;
font-size:10pt; color:000000; font-weight:bold}

.blacktext12{font-family:Tahoma;
font-size:10pt; color:000000; font-weight:bold}

.nametext{font-family:Tahoma;
font-size:10pt; color:000000; font-weight:bold}

.blacktext10{font-family:Tahoma;
font-size:10pt; color:000000; font-weight:bold; background-color:transparent}

strong, b {font-weight: bold; color:000000;}

a{font-family:Arial; font-size:12pt;
font-weight:normal;background-color:transparent;}
a:link{color:000000;font-weight:bold;font-family:Arial}
a:active{color:000000;font-weight:bold;font-family:Arial}
a:visited{color:000000;font-weight:bold;font-family:Arial}
a:hover{color:000000;font-weight:bold;font-family:Arial}

a.redlink{font-family:Arial; font-size:12pt;
font-weight:normal;background-color:transparent;}
a.redlink:link{color:000000;font-weight:bold;font-family:Arial}
a.redlink:active{color:000000;font-weight:bold;font-family:Arial}
a.redlink:visited{color:000000;font-weight:bold;font-family:Arial}
a.redlink:hover{color:000000;font-weight:bold;font-family:Arial}

a.navbar{font-family:Arial; font-size:12pt;
font-weight:normal;background-color:transparent;}
a.navbar:link{color:000000;font-weight:bold;font-family:Arial}
a.navbar:active{color:000000;font-weight:bold;font-family:Arial}
a.navbar:visited{color:000000;font-weight:bold;font-family:Arial}
a.navbar:hover{color:000000;font-weight:bold;font-family:Arial}

a.man{font-family:Arial; font-size:10pt;
font-weight:normal;background-color:transparent;}
a:link{color:000000;font-weight:bold;font-family:Arial}
a:active{color:000000;font-weight:bold;font-family:Arial}
a:visited{color:000000;font-weight:bold;font-family:Arial}
a:hover{color:000000;font-weight:bold;font-family:Arial}
</style>

<style> table, tr, td {background-color: transparent; border: 0px; padding:2;}
table table {border: 2px;}
table table table {border: 16px dotted; border-color: 87f5f3; background-color: ffffff; background-image:url(); padding:0;}
table table table table{border: 0px;}
table table table table table,
table table table table table </style>

<style>
}
table table table table {border:0px;}
.{content:"Text and Link Properties";}
input {background-color:transparent !important;}
td, div, input, textarea, a, table td div div font,
div table tr td font {font-family:Verdana !important;}
td, div, input, textarea, table td div div font,div table tr td font {color:000000!important; font-size:10pt !important;}
.nametext, .whitetext12, .lightbluetext8, .orangetext15, .blacktext12, .blacktext12 span,.redtext, .redbtext, .blacktext10, .btext {color:000000!important; font-size:10pt !important;}
a {color:000000!important; font-size:10pt !important;text-decoration:none !important; text-transform:none !important; font-weight:normal !important; font-style:normal !important;}
a:hover {color:000000!important; text-decoration:none !important; text-transform:none !important; font-weight:normal !important; font-style:normal !important;}

<style type="text/css">
table table table
{width:400px; !important;}
table table td img {display:none;}
table table table td img {display:inline;}
table td td {width:0px;}
table {width:500px;}
table table {width:400px; !important;}
table table td {padding:3px;}
table table table td {padding:0px;}
table table table {width:400px !important; height:0px;}
td.text td a img {display: inline !important; }
table table table table table,
table table table table table td {
width:0px !important; padding:0px !important;}
td.text a img {width:130px }
td.text td.text a img {width:100px !important; }
td td td div strong {width:200px !important; display:block;}
.redblackfonttext14{font-weight:normal}
textarea, input, font, a, table, td, div, b {font-size:10pt !important;font-family:century gothic!important;font-weight:normal!Important;text-transform:lowercase}
span {font-size:10pt !important;font-family:century gothic!important;font-weight:normal!Important;text-transform:uppercase}
embed, object {display:inline}
.orangetext15, .blacktext10 {
display:block; width:300px; font-size:10pt !important;}
td.text td.text .orangetext15,
td.text td.text table table div {display:none;}
.thanks:mrk{.}
.mct{www.myspace.com/contacttables}
</style>




Yeah it's my myspace page. Sorry I'm such a dummy at html.....

On my web site, I have images displayed in table cells. I have the width set to 100% and the table itself set to 80% width. I do that so that if the browser window size is reduced, then the table's size is reduced to fit the window without having to scroll left or right. That works great, unless the browser window is larger than what I design the page on as in if the end user is using a higher resolution monitor. In that case, the images are stretched rather than reduced to again fill the page.

Code:

<table border="0" width="80%">
  <tr>
    <td width="50%">
      <img src="image1.jpg" width="90%">
    </td>
    <td width="50%">
      <img src="image2.jpg" width="90%">
    </td>
  </tr>
</table>

Is there a way that I can set a maximum size for the images so that they don't get stretched above their intended resolution, while still using the width=xx% attribute to reduce the images to match the window?

Ive got this nice 900x600 transparent background for my website.. but its 1,2 MB large......

Im guessing its too large to load in an acceptable amount of time..

So, ive tried saving it for the web & devices.. and, well.. PNG 8bit sucks.
It doesnt support transparancy?

Anyone know what to do? What program to use?
I want to keep the quality, dimension, and format (since PNG is the only one who supports transparent shizz right?)

Cheers,
thank you