Total Pageviews

Tuesday, March 24, 2015

how to create Image Mapping in HTML

 How to create Image Mapping in HTML , how to image map html, html  image mapping tutorial , html css imag map popup div





create Pop up div on image using Image Mapping HTML CSS Example ,

          

 How to create Image Mapping in HTML video tutorial


Image Mapping example with source code,

How To Create Image map Using CSS

HTML CSS IMAGE MAPPING, 

PHP JSP ASP.NET HTML CSS POP UP DIV EXAMPLE WITH SOURCE CODE,










______________________________________ 

IN THIS POST WE ARE  GOING TO CREATE DIFFERENT HOTSPOT ON SINGLE IMAGE WHEN YOU MOVE MOUSE AT SPECIFIC LOCATION ON IMAGE DIV WILL POP UP AND DISPLAY INFORMATION ABOUT THAT LOCATION IMAGE  MAPPING

IN THIS EXAMPLE I HAVE USED MAP OF INDIA WITH DIFFERENT STATES WHEN YOU MOVE MOUSE ON STATE DIV WILL POP UP AND DISPLAY CAPITAL OF THAT STATE WITH INFORMATION WE NEED NUMBER OF IMAGES YOU CAN DOWNLOAD TEMPLATE WITH SOURCE CODE BY CLICKING DOWNLOAD LINK

 DOWNLOAD Image Mapping HTML CSS 



Code by : Komal Dawkhar (MCA II ) 
HTML5 CSS3 Session 2015


<html>
<head>
<title>CSS imagemapping</title>
<style type="text/css">
#map{
                      float:;
                      <!--align-left:center;--!>
                      margin-left:400;
                      padding:;
                      width:1299px;
                      height:1413px;
                      background:url(map1.gif);
background-repeat:no-repeat;
                      font-family:arial,helvetica;
                      font-size:10pt;
           }
#map li{
                     margin:0;
                     padding:0;
                     list-style:none;
              }
#map li a{
                           position:absolute;
                          display:block;
                          background:url(blank.gif);
                          text-decoration:none;
                          color:#000;
                  }
#map li a span{display:none;}

#map li a:hover span{
                                         position:absolute;
                                         display:block;
                                         width:210px;
                                         left:20px;
                                        top:20px;
                                        border:4px solid #000;
                                        background:#fff;
                                        padding:5px;
                                        filter:alpha(opacity=80);
                                       opacity:0.8;
                                    }
#map a.jk{
                        top:9px;
                         left:98px;
                         width:100px;
                         height:100px;
                     }

#map a.hp{
                           top:94px;
                           left:170px;
                           width:40px;
  height:40px;
                           height:111px;                                        
                       }

#map a.pun{
                          top:101px;
                          left:118px;
                          width:50px;
                         height:50px;
                        }

#map a.raj{
                           top:182px;
                            left:31px;
                           width:156px;
                            height:252px;
                       }

#map a.guj{
                        top:230px;
                        left:10px;
                        width:102px;
                        height:100px;
                     }
#map a.asam{
                        top:125px;
                        left:400px;
                        width:480px;
                        height:250px;
                     }
#map a.maharashtra{
                                           top:303px;
                                           left:80px;
                                           width:201px;
                                           height:388px;
                                        }
#map a.kerala{
                                        top:470px;
                                         left:100px;
                                         width:145px;
                                         height:528px;
                                        }
#map a.ap{
                                        top:400px;
                                         left:161px;
                                         width:100px;
                                         height:100px;
                                        }
#map a.up{
                        top:180px;
                        left:210px;
                        width:105px;
                       height:79px;
                     }

#map a.bih{
                          top:203px;
                          left:285px;
                          width:50px;
                          height:60px;
                        } 
#map a.uttaranchal{
                          top:132px;
                          left:182px;
                          width:100px;
                          height:100px;
                        } 
#map a.hariyana{
                          top:160px;
                          left:146px;
                          width:100px;
                          height:100px;
                        } 

#map a.mp{
                          top:235px;
                          left:137px;
                          width:100px;
                          height:100px;
                        } 
#map a.chattis{
                          top:270px;
                          left:244px;
                          width:100px;
                          height:300px;
                        } 
#map a.jhar{
                          top:245px;
                          left:295px;
                          width:100px;
                          height:100px;
                        } 
#map a.orissa{
                          top:354px;
                          left:296px;
                          width:200px;
                          height:60px;
                        } 
#map a.wb{
                          top:286px;
                          left:370px;
                          width:50px;
                          height:60px;
                        } 
#map a.sikkim{
                          top:174px;
                          left:390px;
                          width:102px;
                          height:110px;
                        } 
#map a.meghalaya{
                          top:213px;
                          left:500px;
                          width:412px;
                          height:225px;
                        } 
#map a.tripura{
                          top:245px;
                          left:499px;
                          width:411px;
                          height:265px;
                        } 
#map a.mizoram{
                          top:244px;
                          left:417px;
                          width:42px;
                          height:40px;
                        } 
#map a.manipur{
                          top:243px;
                          left:524px;
                          width:50px;
                          height:40px;
                        } 
#map a.nagaland{
                          top:235px;
                          left:530px;
                          width:41px;
                          height:42px;
                        }
#map a.aruna{
                          top:155px;
                          left:432px;
                          width:100px;
                          height:50px;
                        }  
#map a.karnataka{
                        top:400px;
                          left:110px;
                          width:100px;
                          height:100px;
                        }
#map a.tamil{
                          top:381px;
                          left:167px;
                          width:100px;
                          height:100px;
                        }
#map a.goa{
                          top:405px;
                          left:94px;
                          width:98px;
                          height:60px;
                        }

#map a.pond{
                          top:200px;
                          left:195px;
                          width:240px;
                          height:420px;
                        }











DOWNLOAD Image Mapping HTML CSS  

 

______________________________________ 






create Pop up div on image using Image Mapping HTML CSS Example ,

Image Mapping example with source code,

How To Create Image map Using CSS

HTML CSS IMAGE MAPPING, 

PHP JSP ASP.NET HTML CSS POP UP DIV EXAMPLE WITH SOURCE CODE,

 

 

Popular Posts

Follow by Email