...

View Full Version : Layering Images - help!



Phip
06-26-2002, 07:56 AM
i'm trying to layer an image right over another. they need to be exact. here is what i'm doing:

http://phip.chronicyouth.com/account/

i am currently using <div> but it doesn't seem to work on all the computers i view it on. 14", 19", and 17". all different resolutions(if that matters). how would i, if i'm 'aloud' to by standards, do this.

well....good luck at viewing the example....seems my host is having problems find me space to upload stuff. so things aren't working when i upload them which is screwing the site up.

QuackHead
06-26-2002, 03:30 PM
Originally posted by Phip
i am currently using <div> but it doesn't seem to work on all the computers i view it on. 14", 19", and 17". all different resolutions(if that matters).

That will matter.

Because your page is centered in the window, any time you re-size the page, the coodinates of the original picture will change, which will mess up your positioning.

2 options.
1) Align your site to the left of the screen, which will keep the left coordinates the same.
2) Write a function that dynamically repositions the picture when the window is re-sized. (and on page load for that matter)

this'll take a while for even me to figure it out, so get started and post questions when you run into trouble.

~Quack

pardicity3
06-26-2002, 05:09 PM
I am not the best in javascript (what's that? I am terrible?) but I have seen this done before. Just write a little function that goes something like this:

a)find out how far you want your div's left property from the middle of the screen (you need to do this, not the script :))

b)Find the total width of the available screen size
c)divide that number by 2
d)then subtract what ever you need to from your new number to get how far you want the pictures from the middle
e)assign your new number to a variable
f)set your two div's lefts as that variable

I think that might give you your desired results. You don't need to mess with the top property unless you have your page centered vertically, which I don't think is the case. Hopefully this will help you, and I will look into actually constructing an example script for you. But I don't know how well that will go......

QuackHead
06-26-2002, 06:36 PM
thanks pardicity,

that basically sums up option #2

:D I just didn't have time to try and code an example ;)

~Quack

pardicity3
06-26-2002, 07:09 PM
No problem quack. I have too much free time! lol. Hey, by chance do you think you could give me some of your posts so that I wouldn't have to be junior anymore? lol, I wish that was possible!

Phip
06-26-2002, 10:04 PM
cool, thanks. Now i just need to figure out how to write it. sense, i am not a jscript programmer

pardicity3
06-26-2002, 10:13 PM
I've been busy, and I haven't had time yet today, but I will try and get a make-shift script up as soon as possible. Good luck untill then!

Phip
06-26-2002, 11:54 PM
thanks

pardicity3
06-27-2002, 01:40 AM
Here is the script I made (probably not the best, but it might work...). Put this in the head section:



<script type="text/javascript" language="javascript">
var aw = window.screen.availWidth //gets the available width (Available Width)
var cw = aw/2 //divides the width by 2 (Center Width)
var pw = cw - 150 //you need to change the last number to the
//distance you need your image to be from the
//center of the screen
//(Position Width)
</script>


I gave some comments in there to help you find out why I named some of the variables why I did. And remember you can change those variables to something easier to remember!
Then put this in the body section:



<script type="text/javascript" language="javascript">
document.write("<div style='position: absolute; left:" + pw + "; top: 105;'>")
document.write("<img src='yourimage.gif/jpeg'>")
document.write("</div>")
</script>


Okay, so I have tried this in the following browsers:

Netscape v6.2
IE 6
Opera v6.0

It is worked in all of those. But like I said I am not a very top-of-the-line js programmer so hopefully we can get some xperts over here to maybe check out the script i made! But as far as I know this should work. Good luck!!!

Phip
06-27-2002, 11:14 PM
sweet, thanks.

is there like a onwindow.resize(i made that up) funtion or something?

pardicity3
06-28-2002, 07:24 PM
I am pretty sure there is something like that, but I am not positive. You should probably go over in the javascript forum and ask that, as I am positive that I couldn't give you a correct answer on that one. But I will do some searches and check things out.:thumbsup:

joh6nn
06-28-2002, 07:34 PM
window.onresize = functionName;

Phip
06-29-2002, 12:53 AM
thanks yo

Vladdy
06-29-2002, 02:32 AM
I think you are making it too complicated.
Just make your house.gif a background of a division and place your car image inside of this division. Control the position of the car.gif using margin-top and margin-left.
Here is the sample page (car.gif is attached just for demo). this DIV element can be placed anywhere on your page as long as you do not restrict its size.....



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<TITLE>Picture Overlay</TITLE>
</HEAD>
<BODY>

<DIV STYLE="display:block; background-image:url(house.gif);
width:500px; height: 375px;">
<IMG STYLE="margin-top: 150px; margin-left: 100px;"
SRC="car.gif" ALT="My Dream Car"
WIDTH="361px" HEIGHT="162px">
</DIV>

</BODY>
</HTML>


No JS needed

Vladdy
06-29-2002, 02:34 AM
Sorry forgot the car.gif -
put all in the same folder for the sample script to work without modification... get house.gif off Phip's site.....



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum