Welcome to Tactical Gamer

+ Reply to Thread
Results 1 to 11 of 11
Discussion: General Forums / General Discussion - Web developer question - I'm sure we must have some pros around here who can answer this. How would
  1. 09-13-2006, 09:39 PM #1
    icky
    icky is offline

    icky's Avatar
    Join Date
    Jul 2005
    Location
    Ottawa Valley
    Posts
    6,152

    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!
    Reply With Quote Reply With Quote
    2.  
  2. 09-13-2006, 09:47 PM #2
    icky
    icky is offline

    icky's Avatar
    Join Date
    Jul 2005
    Location
    Ottawa Valley
    Posts
    6,152

    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!
    Reply With Quote Reply With Quote
    3.  
  3. 09-14-2006, 10:44 AM #3
    icky
    icky is offline

    icky's Avatar
    Join Date
    Jul 2005
    Location
    Ottawa Valley
    Posts
    6,152

    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!
    Reply With Quote Reply With Quote
    4.  

     
  4. 09-14-2006, 11:07 AM #4
    Cain
    Cain is offline

    Join Date
    May 2003
    Location
    Sweden
    Posts
    129

    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.
    Reply With Quote Reply With Quote
    5.  
  5. 09-16-2006, 12:51 AM #5
    Iceberg
    Iceberg is offline

    Iceberg's Avatar
    Join Date
    Dec 2004
    Location
    Illinois
    Age
    28
    Posts
    2,089

    Re: Web developer question

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

    www.w3schools.com for some basic tutorials.
    TG-16 IHS | USAR 16th PSYOP BN, now with more (TGY16)
    Reply With Quote Reply With Quote
    6.  
  6. 09-16-2006, 01:20 AM #6
    icky
    icky is offline

    icky's Avatar
    Join Date
    Jul 2005
    Location
    Ottawa Valley
    Posts
    6,152

    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!
    Reply With Quote Reply With Quote
    7.  

     
  7. 09-18-2006, 07:19 PM #7
    shroompicker
    shroompicker is offline

    shroompicker's Avatar
    Join Date
    Nov 2003
    Location
    Arizona
    Age
    37
    Posts
    190

    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
    -- Shroom
    I tried smoking mushrooms once. Couldn't keep the pizza lit.
    Reply With Quote Reply With Quote
    8.  
  8. 09-18-2006, 07:34 PM #8
    icky
    icky is offline

    icky's Avatar
    Join Date
    Jul 2005
    Location
    Ottawa Valley
    Posts
    6,152

    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!
    Reply With Quote Reply With Quote
    9.  
  9. 09-18-2006, 07:45 PM #9
    shroompicker
    shroompicker is offline

    shroompicker's Avatar
    Join Date
    Nov 2003
    Location
    Arizona
    Age
    37
    Posts
    190

    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.
    Reply With Quote Reply With Quote
    10.  

     
  10. 09-18-2006, 07:50 PM #10
    icky
    icky is offline

    icky's Avatar
    Join Date
    Jul 2005
    Location
    Ottawa Valley
    Posts
    6,152

    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 at 08:34 PM.
    Peace through fear... since 1947!
    Reply With Quote Reply With Quote
    11.  
  11. 09-19-2006, 07:23 AM #11
    Cain
    Cain is offline

    Join Date
    May 2003
    Location
    Sweden
    Posts
    129

    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.
    Reply With Quote Reply With Quote
    12.  
« Previous Thread | Next Thread »

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Bookmarks

Posting Permissions

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

Forum Rules



  
 

Back to top
Powered by vBulletin® Version 4.1.9
Copyright © 2012 vBulletin Solutions, Inc. All rights reserved.
Search Engine Optimization by vBSEO 3.6.0


©2004-2011 - Tactical Industries, LLC - All Rights Reserved
All times are GMT -4. The time now is 02:03 AM.