Over-laying a transparent image over a webpage?

[GRoston]

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.

 

[file3456]

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

 

[GRoston]

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.

 

[dg1261]

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 - - -

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.

 

[GRoston]

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

 

[file3456]

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!

 

[GRoston]

Good info - thanks. Need to check these out.