Solved

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

Posted on 2008-10-09
1
3,273 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
ID: 22686345
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

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Re-position the objects 7 96
P tag not forcing line space 2 22
Centered Image 2 21
Why my select dropdown does not work? 8 25
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 …
This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
In this tutorial viewers will learn how to position overlapping items using z-index in CSS. They will also learn the restrictions on the z-index property.  Create a new HTML document with an internal stylesheet.: Create a div in CSS and name it Red.…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…

911 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

20 Experts available now in Live!

Get 1:1 Help Now