Announcement

Collapse
No announcement yet.

Web developer question

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Web developer question

    I'm sure we must have some pros around here who can answer this.

    How would I go about creating a web page which loads an image and then overlays smaller images on top of the original in precise locations. This would be done entirely client-side.

    I have little experience beyond basic html, but I have lots of coding experience. If you know where there might be a good example of such a thing, just point me there, and I'll figure it out.

    Thanks!

    (I may just do it in C++ if there's no magically easy way)
    Peace through fear... since 1947!

  • #2
    Re: Web developer question

    Ooo... I was just looking around and it looks like Flash might be an easy solution to this. I've always wanted to learn about Flash. ;)
    Peace through fear... since 1947!

    Comment


    • #3
      Re: Web developer question

      No, the user doesn't need to be able to drag stuff. I just need to overlay markers on a jpg. I already have a mostly functional C++ version working, but I'm still interested in javascript if there's an easy way.
      Peace through fear... since 1947!

      Comment


      • #4
        Re: Web developer question

        No need for any fancy scripts then. Use css to set 'background' and then 'position: absolute' for the overlay images. Just create the proper box-hierarchy with 'div' and you are set.

        If you need content to display dynamically on mouse-over, you can use ':hover' with 'display' to the same effect.

        Comment


        • #5
          Re: Web developer question

          CSS
          Cascading Style Sheets, really easy stuff and very easily integrated into HTML.

          www.w3schools.com for some basic tutorials.
          USAR

          Comment


          • #6
            Re: Web developer question

            Thanks guys! This is very interesting. I can see how to place text, so if I can apply this to images, I will be well on my way. I can just write a litle parser to translate my data into HTML.

            Edit: I see how to apply it to images
            Peace through fear... since 1947!

            Comment


            • #7
              Re: Web developer question

              Just know ahead of time, if you use the 'absolute' style, the image and the overlaid images are going to be about the only fancily formatted thing on the page. That is, you would be able to place paragraphs or other images on the page which simply flow after it, you're okay, but if you want to put this collage in a box, then place the box somewhere like a table, you're dead.

              Also, be sure to test it on Firefox, Safari, and IE6 for Win (screw IE for Mac).

              Just to let you know the limitations before you bang your head on the keyboard for sixteen hours like most of us end up doing when first trying this :row__679: :row__685: :row__739: :row__641: :madsmile:
              -- Shroom
              I tried smoking mushrooms once. Couldn't keep the pizza lit.

              Comment


              • #8
                Re: Web developer question

                Heh... thanks for the advice. I ended up tinkering with the CSS stuff for awhile, doing almost everything I wanted, then I moved on. Learned lots though.

                I realized that if I was going to do my parsing in Python, I might as well just use it to edit the images at the same time. Then you can just display the processed images in a browser.
                Peace through fear... since 1947!

                Comment


                • #9
                  Re: Web developer question

                  <img src="imgBig.png" style="position: absolute; top: 100px; right: 100px;">

                  <img src="img1.png" style="position: absolute; top: 150px; right: 100px;">

                  <img src="img2.png" style="position: absolute; top: 100px; right: 150px;">

                  <img src="img3.png" style="position: absolute; top: 200px; right: 200px;">
                  -- Shroom
                  I tried smoking mushrooms once. Couldn't keep the pizza lit.

                  Comment


                  • #10
                    Re: Web developer question

                    Just out of curiousity, how might you make the background of the overlaid images transparent?

                    Nevermind, I got it.
                    Last edited by icky; 09-18-2006, 07:34 PM.
                    Peace through fear... since 1947!

                    Comment


                    • #11
                      Re: Web developer question

                      A good example of what can be done with css can be found here. All the different styles are done in css and the underlying html is unchanged. You can pick up a few neat tips and tricks as well as some inspiration for your own design.

                      Comment

                      Connect

                      Collapse

                      TeamSpeak 3 Server

                      Collapse

                      Advertisement

                      Collapse

                      Twitter Feed

                      Collapse

                      Working...
                      X