Web Analytics Made Easy -
StatCounter Layering Images - help! - CodingForum

Announcement

Collapse
No announcement yet.

Layering Images - help!

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new 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.
    Phip
    Registered User
    Last edited by Phip; Jun 26, 2002, 04:50 AM.

  • #2
    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

    Comment


    • #3
      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.

      Comment


      • #4
        thanks pardicity,

        that basically sums up option #2

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

        ~Quack

        Comment


        • #5
          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.

          Comment


          • #6
            cool, thanks. Now i just need to figure out how to write it. sense, i am not a jscript programmer

            Comment


            • #7
              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.

              Comment


              • #8
                thanks

                Comment


                • #9
                  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!!!
                  pardicity3
                  New to the CF scene
                  Last edited by pardicity3; Jun 26, 2002, 09:54 PM.
                  My Site {Mike's Adventures}

                  Yikes, forums are almost too much fun.

                  Comment


                  • #10
                    sweet, thanks.

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

                    Comment


                    • #11
                      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.

                      Comment


                      • #12
                        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.

                        Comment


                        • #13
                          thanks yo

                          Comment


                          • #14
                            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
                            Vladdy
                            New to the CF scene
                            Last edited by Vladdy; Jun 28, 2002, 10:36 PM.
                            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"

                            Comment


                            • #15
                              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 Files
                              Vladdy
                              New to the CF scene
                              Last edited by Vladdy; Jun 28, 2002, 10:39 PM.
                              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"

                              Comment

                              Working...
                              X