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
<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
Code by : Komal Dawkhar (MCA II )
HTML5 CSS3 Session 2015
<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