Over-laying a transparent image over a webpage?


  1. Posts : 301
    Windows 7 x64 Pro
       #1

    Over-laying a transparent image over a webpage?


    I have a road map image that I made, and I made everything except the roads transparent. I would like to overlay this image over a web-based map, like google maps, just to see how areas compare. Is this possible? If so, what tool, or tools, should I use?

    Thanks.
      My Computer


  2. Posts : 0
    Windows 7 Ultimate x64
       #2

    I'm not very skilled in photo editing, but I know of some resources that could help. I think what you're dealing with are called "layers" in the photo editing community. I can also tell you that if you want to overlay that image on a map you'll need exact proportions as the image with transparent roads.

    LunaPic | Free Online Photo Editor

    LunaPic Photo Editor Help - How do I combine two pictures? The audio came from 1929.

    I use mapper.acme instead of Google. ACME Mapper 2.2

    OpenStreetMaps is a great resource and I'm a contributor there adding places that otherwise never existed in the open source mapping software. Export | OpenStreetMap

    Make a map. GPS Visualizer: Draw a map from a GPS data file

    I also use OsmAnd on my Android phone. OsmAnd | OsmAnd

    Convert mapping formats. GPSBabel: convert, upload, download data from GPS and Map programs

    Buy your own Sat imagery. Spectator - Real-Time Satellite Monitoring



    Turn your resulting image into an animated GIF to show the before and after. Animated GIF editor and GIF maker

    You can upload KML, GMX and geoJson to windy.com to see all kinds of weather data for your markers and whatnot. Windy.com also allows you to pick different weather models. Windy: Wind map & weather forecast
      My Computer


  3. Posts : 301
    Windows 7 x64 Pro
    Thread Starter
       #3

    F22 Simpilot - Thanks for the reply, but... I know how to make the image transparent (and have already done so). I also know how to overlay a transparent image over another image in an image editing program, like PhotoShop. What I am trying to figure out is how to overlay a transparent image over a web browser. If I double-click animage, it is opened by PhotoViewer and the background is not transparent.
      My Computer


  4. Posts : 396
    Windows 7/8.1/10 multiboot
       #4

    Try using CSS to bias your transparent image.

    For example, extract the two attached files to your desktop, then open a new browser tab and drag/drop the html file into it. (The gif file has to be in the same place, so that's why I suggest putting both on your desktop, where you can easily delete them later.) Examine the html source to see how CSS is being used.

    Beware that, AFAIK, the HTML spec doesn't support all transparent formats. I know it supports transparent gif, but I don't think it supports transparent png, for example.

    - - - Updated - - -

    GRoston said:
    What I am trying to figure out is how to overlay a transparent image over a web browser.
    Oh, I think I get what you're trying to do, now. I thought you were trying to overlay two images in your web browser, but I think what you're really asking for is to be able to open an image in some app on your computer and then slide that window over the top of your web browser window. I don't think I've ever seen any such app.
    Over-laying a transparent image over a webpage? Attached Files
      My Computer


  5. Posts : 301
    Windows 7 x64 Pro
    Thread Starter
       #5

    dg1261: "I don't think I've ever seen any such app." - agreed, that's why I asked.
      My Computer


  6. Posts : 0
    Windows 7 Ultimate x64
       #6

    The program Overlay2 looks promising and I may buy it myself. As of this post it's $15 USD but offers a trial with a nag screen I guess.

    OVERLAY2 - Image overlay software for Mac and Windows

    As a browser extension (add-on) PerfectPixel by WellDoneCode

    Program developed in Java and allows click through. CThruView Transparent Image Viewer 1.0 Read the ENTIRE webpage...

    Another image overlay program that's free and code is open source. Click "Releases" to the right and download the Zip file. Not the source code unless you want to compile it yourself (there are privacy/security advantages to that for those that know how. For the majority, don't worry about knowing how to compile code. It's an involved process and requires Visual Studio knowledge) GitHub - torcado194/opti: simple, transparent media viewer

    Another image overlay program but can use a PDF. Overlay on the Mac App Store

    Free and open source program for image overlaying for Mac. GitHub - yuhua-chen/LayerX: An intuitive app to display transparent images on screen.


    I've never used any of these programs so YMMV. Never mind. Done gone tried a couple.

    - - - Updated - - -

    CThruView Transparent Image Viewer coded in Java seems to work pretty good. I don't get click through though and resizing doesn't work right. But that's probably my Java version as the author indicated on the website you'd have to use Java 1.6.







    And you need a BS Oracle account. No, thanks... Java Archive Downloads - Java SE 6 (1.6 is the same as 6)...

    - - - Updated - - -

    Overlay2 seems to work a bit better. You can click the edges of the window to resize, you can pan, magnify, etc. The nag screen appeared at about 30 seconds, but clicking "cancel" resumed the software without issue. Think I'll buy it!


      My Computer


  7. Posts : 301
    Windows 7 x64 Pro
    Thread Starter
       #7

    Good info - thanks. Need to check these out.
      My Computer


 

  Related Discussions
Our Sites
Site Links
About Us
Windows 7 Forums is an independent web site and has not been authorized, sponsored, or otherwise approved by Microsoft Corporation. "Windows 7" and related materials are trademarks of Microsoft Corp.

© Designer Media Ltd
All times are GMT -5. The time now is 14:35.
Find Us