HTML - Background Image Changes When I Resize Window

Evening all,
I'm looking for some simply coding to tell an image to resize to fit into a frame that is defined in the CSS layout. The image size needs to be reduced to 630x402, the original size is much greater.

<SCRIPT LANGUAGE="JavaScript">

var theImages = new Array()

theImages[0] = 'images/main_img.jpg'
theImages[1] = 'images/main_img2.jpg'
theImages[2] = 'images/main_img3.jpg'
theImages[2] = 'images/main_img4.jpg'

var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<img src="'+theImages[whichImage]+'">');
}

</script>

<div id="main_img"><SCRIPT LANGUAGE="JavaScript">showImage();</script></div>

I need someway of implementing the size change into the coding somewhere.

Thank you for any help in advance!

Hello!

I am pretty new to HTML, but I was asked to make a webpage for my girlfriend's small business. What I want to do is copy the style used on the main image of this website: http://www.stellamccartney.com/. What I am looking to do is take an image and have it resize whenever I resize the browser window. If you can tell, the image is actually zooming in and out in order to maintain its correct ratio.

I am not interested in copying anything else from this website, only the way the main image works. Looking at the source code has me baffled; I believe they wrote this using javascript, but I can't tell. If anyone knows how to create a similar effect as this site I would greatly appreciate the help.

Thank you!

I am having a problem with images that vary in size. I let the user upload images and then display it on a web page. The problem is that the images that the users submit are different sizes. Some look good while others look distorted. Any Ideas?

Hi All,

We have images which are displayed in panel series.

We have images if all sizes and width, we have tried using width=100% which makes all the images to fit the width allotted, which makes the image BLUR if the image is very small.

Is there a way by which we can have width=100% for only the oversize images and leave the others as it is.

Regards,
Nagesh

I am looking for an easy code that when applied will resize an image link.

I am trying to get around code that swaps one image for another on mouseover. I just want one image that will be resized on mouseover.

I know this won't work, but something like:
onMouseOver= width="180" height="180"
with the original swap image being: width="190" height="190"

Thanks for the help and for not slamming me for my ignorance!
Peace.

Hi,

I'm building a web site for someone. At the top of the page is the logo and some flowing lines going from left to right on screen.

If you look he http://www.chrisvanochten.com/clients/voicecontrol/ and start resizing your browser window then you would see the content at the bottom moves along so that it is always in the center.

The problem I have is that the image on the top will not do this. This is because it's a background image. I want the image to be positioned so that the logo is above the latest news section. I have tried using a normal image and aligning it to the center (scroll down on the page above for this) but the image is always anchored to the left of the screen if the image is larger than the browser window.

Is there anyway to set the background image so that it is anchored in position and that it will run off both the left and right hand side of the screen (as opposed to just the right hand side)?

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?

ive put a background in to my html document that stretches to fit the size of the browser window. heres the code:

<style type="text/css">html {height:100%;}body {height:100%;margin:0;padding:0;}#bg {position: absolute;top:0;left:0;width:100%;height:100%;}#content { position:absolute;z-index:1; width:100%;}</style>
<!--[if IE 6]><style type="text/css">html {overflow-y:hidden;}body {overflow-y:auto;}#bg {position:absolute;z-index:-1;}#content {position:static;}</style><![endif]-->
<script type="text/javascript" src="swfobject.js"></script>
</head>

<body bgcolor="#000000" text="#999999" link="#999999" vlink="#999999" alink="#999999">
<div id="bg"><img src="NJWwallpaper01.jpg" width="100%" height="100%" alt=""></div>
<div id="content">

Hi guys.

I was hoping somebody can help me with this problem. I have an image that I would click on and it would open in another window, in a larger size.
The only way I can presently do this is by using the target="_blank" code but this opens a window with scrollbars and the address bar. I would like just the image.
Also with this method I have to use 2 images, a small pic, and a larger version. Is there any way to use just one size image, and have it open in a new window in a bigger size?

Please look at this page to see what I would like to do, i.e. clicking on an image and have a pop-up window open up with a larger version of that image.
http://www.currys.co.uk/martprd/product/seo/733683

I would appreciate any help with this. Thank you.

Hi,

Want to open a window without addressbar and menubar with loading image for the button click.

i want to c the loading gif right after opening the window.

its very urgent anybody help me on this

Thanks,

Hi.. hopefully some one can help me on this.. I'm sure its pretty easy?

If I have some text that opens a sized new window (seen at : http://www.newquaysfinest.co.uk/virt...quay-c259.html

HTML Code:

<a onclick="window.open('http://www.360newquay.co.uk/ripcurl/Tourviewer_boardmasters.html','','width=784,height=489,left='+(screen.availWidth/2-225)+',top='+(screen.availHeight/2-202.5)+'');" href="virtual-newquay-c259.html"><font color="#009900" size="5"><strong>Virtual&nbsp;Ripcurl Boardmasters</strong></font></a><font size="4"><font color="#cc0000">&nbsp;</font><br />

what code do I have to use with for an image file to launch a similar sized window?
example image: images/ripcurl_boardmasters_07.jpg

please help

Cheers

I recently created this website to highlight a trip to New Orleans. I did something similar for a trip last summer to Africa. As you can see, the pages are designed with small image icons, and you must click on the icons in order to see a popup of the full image.

However, when viewing the page on monitors with lower resolutions, some of the images create a flickering effect and prevent the viewer from seeing the larger popup image. Does anyone have any recommendations? Ideally, I'd like to find a solution that doesn't require me to resize the images. After all, they're not that big.

If someone can offer a particularly good solution I'd be willing to compensate you for your time, since I intend to create numerous more travel pages like these. Thanks!

I'm looking for a routine or function that allows for floating popups when the pointer is placed over a hot spot on a client-side image map. Currently there are plenty of sources for code out there that show a popup when floating over a text URL or an IMG URL, but when putting a mouse pointer over an image map the same code does not work. Even when declaring the image map an OBJECT rather than just a basic <img>.

So essentially, I want the mouse to hover over an image map, and then have a small pop up of an image show up. Thanks in advance help is greatly appreciated.

Hi

Can someone tell me how I can stop an image from moving behind a table - next to it - when the browser window is reduced?

Here's the page
http://www.tall-shiprace.com/2009/04/19/1247/

When I re-size (from the bottom right corner of the browser) the image floats behind the table - to the left of the image.

Can this be stopped??

Hi,

I'm a complete newb and html-challenged, so please forgive my stupid questions.

This is what I want for the personal website I'm making: a fixed image as the background that covers the entire screen regardless of what screen resolution a user's computer has - this much I've managed with CSS...I think (like this right? http://www.geocities.com/serenamonster/index.htm ) clickable regions on this background image to use for navigation to various parts of the site. Or in other words, the background image as an image map. - this I'm having trouble with, because you have to designate the picture as a set # of pixels in dimension to make an image map right? and if I do that to my background image, then it may display too big or too small depending on the person's screen resolution right?
So does anyone know how I can have clickable regions on my fixed background image without the image being too big for low resolutions or too small for high resolutions? (he http://www.geocities.com/serenamonster/map.html the background image is fixed at 800x400. I want to make each star on the image a hyperlink to a different part of the site). I read somewhere that standard is 800x600 to fill a person's browser right? But on my computer the image only covers about 2/3 of the browser screen which is too small. How can I make it so that it fills 100% of any viewer's screen regardless of resolution? How does it look on your computer? I know these are probably just really stupid questions because I'm missing something really fundamental...but any help would be greatly appreciated! Thanks!

~Serena

P.S. is it possible to do mouseovers for certain coordinates on an image map?