Solved

How do I create a transparent div over another div that contains google maps?

Posted on 2008-10-09
1
3,271 Views
Last Modified: 2012-05-05
I am creating a site that uses google maps and I am trying to put a transparent div over the map. The only way I could get it done was this:

<div id="container" class="container">&nbsp;
    <div id="map_canvas" class="map"></div>
    <div id="over_map" class="over_map" ></div>
</div>
   However it has a bug. If you open the page in a IE tab, then move the focus to another IE, wait a few seconds, and go back to the initial tab, it looses the transparent efect. I have created a small test file so yo can see it better.



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
 

div.container {

	position:relative;

	width: 100%;

	height: 100%;
 

}
 

div.map {

	position:absolute;

	width: 100%;

	height: 100%;

	top:0;

	left:0;

	z-index:1;

	background-color: red;

	}

div.over_map {

	position:absolute;

	width: 100%;

	height: 100%;

	top:0;

	left:0;

	background-color: black;

	z-index:2;

	filter:alpha(opacity=50);

		-moz-opacity:0.5;

	opacity:0.5;
 

}

</style>

</head>
 

<body style="">
 

<table width="100%" height='100%' border="1" >

	<tr>

		<td width="20%"></td>

		<td width="80%">

			<div class="container">&nbsp;

				<div id="map_canvas" class="map">&nbsp;</div>

				<div id="over_map" class="over_map">&nbsp;</div>

			</div>

		</td>

	</tr>

</table>

</body>

</html>

Open in new window

0
Comment
Question by:ldeabreu
1 Comment
 

Accepted Solution

by:
ldeabreu earned 0 total points
Comment Utility
I found my own solution to this. I decided not to use the CSS opacity. Now I am using a transparent background and it works fine.

Here is the code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Untitled Document</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

 

div.container {

	position:relative;

	width: 100%;

	height: 100%;

 

}

 

div.map {

	position:absolute;

	width: 100%;

	height: 100%;

	top:0;

	left:0;

	z-index:1;

	background-color: red;

	}

div.over_map {

	position:absolute;

	width: 100%;

	height: 100%;

	top:0;

	left:0;

	background: url(../images/1x1pixel.gif) repeat;

	z-index:2;

}

</style>

</head>

 

<body style="">

 

<table width="100%" height='100%' border="1" >

	<tr>

		<td width="20%"></td>

		<td width="80%">

			<div class="container">&nbsp;

				<div id="map_canvas" class="map">&nbsp;</div>

				<div id="over_map" class="over_map">&nbsp;</div>

			</div>

		</td>

	</tr>

</table>

</body>

</html>

Open in new window

0

Featured Post

6 Surprising Benefits of Threat Intelligence

All sorts of threat intelligence is available on the web. Intelligence you can learn from, and use to anticipate and prepare for future attacks.

Join & Write a Comment

Suggested Solutions

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

772 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

10 Experts available now in Live!

Get 1:1 Help Now