Ping your company address in maps with jQuyer and CSS effectively
Ping your company address in maps with jQuyer and CSS effectively
Description : Hi every one, today i am going to show you how to ping a company branch addresses in maps using jQuery and CSS. Suppose if you have a company and it has 5 branches so if you want to show them in very easy manner, very less code and less resources i mean if you use the google maps it will take long time to load the content from the server if your customers have a good bandwidth than no problem but it's not possible to all of your customers having good bandwidth. So i am here to present you how to ping your company address in maps using a single image and very less jQuery and CSS code.
1) Download the ProjectFiles
Download
Steps :
- In this example i used jquery-1.7.2.min.js library if you want to use higher version of jQuery then no problem go ahead and use the higher version.
- In this tutorial the core part is jQuery so i will explain how I implemented the jQuery.
- Before going to the main jQuery code, we will see how to arrange our images and address.
- First i have taken an india map image and placed in a div.class="india_map" as background image.
- Inside the div.class="india_map" i added 5 anchor tags with a class="dot" and attribute named as city ="Hyderbad" and used position="absolute" for the anchor tags and placed accordingly.
- I wrote a jQuery function like when ever the user clicks on dot then the function get the current anchor tag city attribute. So based on the city name the function gets the particular id content address and please in a separate place.
jQuery:
[javascript]
<script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.india_map a.dot').click(function(){
$('.india_map a.dot').removeClass('selected');
$(this).addClass('selected');
var city = '.col_fw#' + $(this).attr('city');
var htmlCode = $(city).html();
$('.display_content').fadeOut(500, function(){
$('.display_content .col_fw').html(htmlCode);
$('.display_content').fadeIn(500);
});
});
});
</script>
[/javascript]
CSS:
[css]
.map {
overflow: hidden;
}
.india_map {
height: 300px;
width: 271px;
background-image: url(../images/india-map4.png);
background-repeat: no-repeat;
position: relative;
float: left;
}
.india_map a.dot {
background-image: url(../images/dots.png);
background-repeat: no-repeat;
background-position: 0px 0px;
display: block;
height: 20px;
width: 20px;
cursor: pointer;
position: absolute;
}
.india_map a.dot:hover {
background-position: 0px -20px;
}
.india_map a.dot:active, .india_map a.dot.selected {
background-position: 0px -40px;
}
.display_content {
height: 140px;
width: 300px;
float: left;
margin-left: 80px;
margin-top: 80px;
border: thin solid #CCC;
padding: 10px;
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
}
.col_fw {
float: left;
margin: 0px;
padding: 0px;
}
.col_fw h6 {
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
font-weight: bold;
line-height: normal;
color: #FD2B0A;
margin: 0px;
padding: 0px;
}
.col_fw p {
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
line-height: normal;
font-weight: normal;
padding: 6px;
margin-top: 2px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 6px;
}
[/css]
HTML:
[html]
<h2><span>Mailing Address</span></h2><!--end of the content_services-->
<div class="map" >
<div class="india_map">
<a class="dot" style="left: 175px; top: 141px;" city="Kolkata"></a>
<a class="dot" style="left: 100px; top: 250px;" city="Chennai"></a>
<a class="dot" style="left: 98px; top: 194px;" city="Hyderabad"></a>
<a class="dot" style="left: 66px; top: 233px;" city="Bangalore"></a>
<a class="dot" style="left:116px; top:98px;" continent="LUC" city="Lucknow"></a>
</div> <!-- // .india_map -->
<div class="display_content">
<div class="col_fw">
</div>
</div> <!-- // .display_content -->
</div>
<div class="col_w300" style="width:auto">
<div style="overflow:hidden">
<div class="col_fw" id="Hyderabad">
<h6><strong>SPLessons</strong></h6>
<p>Hi-Tech City<br />
Madhapur,<br />
Hyderabad - 500034 India<br />
<strong>Phone:</strong> +91 40 54542530/51<br />
<strong>Email:</strong> <a href="mailto:info@splessons.com">info@splessons.com</a> </p>
</div>
<div class="col_fw" id="Chennai" style="float:left; margin-left:120px;">
<h6><strong>SPLessons</strong></h6>
<p> 14, Nelson Manickam Rd,<br />
Nungambakkam,<br />
Chennai , Tamilnadu - 600094 India<br />
<strong>Phone:</strong>+91 5523786373<br />
<strong>Email:</strong> <a href="mailto:info@splessons.com">info@splessons.com</a> </p>
</div>
<div class="col_fw" id="Kolkata" style="float:left;margin-left:8px;">
<h6><strong>SPLessons</strong></h6>
<p>24, Chowringhe Road,<br>
Near Indian Museum,<br />
Behind Bible House, Kolkata-87, INDIA<br />
<strong>Phone:</strong> +91 77584278676 (M) / 033- 98516553 (L)<br />
<strong>Email:</strong> <a href="mailto:info@splessons.com">info@splessons.com</a></p>
</div>
</div> <!--menu divs1-->
</div>
<div class="col_w300" id="Bangalore" style="width:auto; margin-top:10px;">
<div style="overflow:hidden">
<div class="col_fw" id="Bangalore" style="float:left;">
<h6><strong>SPLessons</strong></h6>
<p> #51, Anjaneya Mansion<br />
Near Kalamandir, 3rd cross, Aswath Nagar,<br />
Marathahalli Bridge, <br />
Bangalore, Karnataka 560037 India<br />
<strong>Phone:</strong> +91 80 406844884 / 965445986<br />
<strong>Email:</strong> <a href="mailto:info@splessons.com">info@splessons.com</a> </p>
</div>
<div class="col_fw" id="Lucknow" style="float:left;margin-left:38px">
<h6><strong>SPLessons</strong></h6>
<p> #0527, B-1298,<br>
Indra Nagar,<br />
Lucknow (UP) India<br />
<strong>Email:</strong> <a href="mailto:info@splessons.com">info@splessons.com</a>
<br />
<br />
<br /> </p>
</div>
</div>
</div>
[/html]
