Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 15 of 15
  1. #1
    Registered User
    Join Date
    Jun 2002
    Location
    Arizona
    Posts
    175
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Layering Images - help!

    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.
    Last edited by Phip; 06-26-2002 at 09:50 AM.

  • #2
    Regular Coder
    Join Date
    Jun 2002
    Posts
    344
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Re: Layering Images - help!

    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

  • #3
    Regular Coder
    Join Date
    Jun 2002
    Location
    Iowa / Notre Dame
    Posts
    538
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Here's my thought

    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......
    My Site {Mike's Adventures}

    Yikes, forums are almost too much fun.

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Posts
    344
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks pardicity,

    that basically sums up option #2

    I just didn't have time to try and code an example

    ~Quack

  • #5
    Regular Coder
    Join Date
    Jun 2002
    Location
    Iowa / Notre Dame
    Posts
    538
    Thanks
    0
    Thanked 0 Times in 0 Posts

    No problem

    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!
    My Site {Mike's Adventures}

    Yikes, forums are almost too much fun.

  • #6
    Registered User
    Join Date
    Jun 2002
    Location
    Arizona
    Posts
    175
    Thanks
    0
    Thanked 0 Times in 0 Posts
    cool, thanks. Now i just need to figure out how to write it. sense, i am not a jscript programmer

  • #7
    Regular Coder
    Join Date
    Jun 2002
    Location
    Iowa / Notre Dame
    Posts
    538
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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!
    My Site {Mike's Adventures}

    Yikes, forums are almost too much fun.

  • #8
    Registered User
    Join Date
    Jun 2002
    Location
    Arizona
    Posts
    175
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks

  • #9
    Regular Coder
    Join Date
    Jun 2002
    Location
    Iowa / Notre Dame
    Posts
    538
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Okay, it may need some help but....

    Here is the script I made (probably not the best, but it might work...). Put this in the head section:

    PHP Code:
    <script type="text/javascript" language="javascript">
    var 
    aw window.screen.availWidth  //gets the available width ([B]A[/B]vailable [B]W[/B]idth)
    var cw aw/2  //divides the width by 2 ([B]C[/B]enter [B]W[/B]idth)
    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
                        //([B]P[/B]osition [B]W[/B]idth)
    </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:

    PHP Code:
    <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!!!
    Last edited by pardicity3; 06-27-2002 at 02:54 AM.
    My Site {Mike's Adventures}

    Yikes, forums are almost too much fun.

  • #10
    Registered User
    Join Date
    Jun 2002
    Location
    Arizona
    Posts
    175
    Thanks
    0
    Thanked 0 Times in 0 Posts
    sweet, thanks.

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

  • #11
    Regular Coder
    Join Date
    Jun 2002
    Location
    Iowa / Notre Dame
    Posts
    538
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.
    My Site {Mike's Adventures}

    Yikes, forums are almost too much fun.

  • #12
    Senior Coder joh6nn's Avatar
    Join Date
    Jun 2002
    Location
    72° W. 48' 57" , 41° N. 32' 04"
    Posts
    1,887
    Thanks
    0
    Thanked 1 Time in 1 Post
    window.onresize = functionName;
    bluemood | devedge | devmo | MS Dev Library | WebMonkey | the Guide

    i am a loser geek, crazy with an evil streak,
    yes i do believe there is a violent thing inside of me.

  • #13
    Registered User
    Join Date
    Jun 2002
    Location
    Arizona
    Posts
    175
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks yo

  • #14
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.....

    Code:
    <!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
    Last edited by Vladdy; 06-29-2002 at 03:36 AM.
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"

  • #15
    Senior Coder
    Join Date
    Jun 2002
    Location
    Nashua, NH
    Posts
    1,724
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.....
    Attached Thumbnails Attached Thumbnails Layering Images - help!-car.gif  
    Last edited by Vladdy; 06-29-2002 at 03:39 AM.
    Vladdy | KL
    "Working web site is not the one that looks the same on common graphical browsers running on desktop computers, but the one that adequately delivers information regardless of device accessing it"


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •