图片地图html,jquery+CSS3实现图像地图标注

jquery+CSS3实现图像标注实现如地图对某一地点增加标注，点击标注弹出详细信息。

HTML MARK

Back to article

© Prabhakaran Arunachlam

CSS3 Image Mapping - Tutorials

Sofa

A sofa, is an item of furniture designed to seat more than one person, and providing support for the back and arms.

Television

Television (TV) is a telecommunication medium for transmitting and receiving moving images that can be monochrome (black-and-white) or colored, with or without accompanying sound.

Carpet

Carpet is a textile floor of an upper layer attached to a backing.

Chair

Chair is an item of furniture designed to seat one person, and providing support for the back and arms.

Showcase

Showcase is used to showcase things at home

X

CSS

html {

background: #ffffff;

font-size: 75%;

font-family: "Open Sans", "Helvetica Neue", Helvetica, sans-serif;

}

body {

font-family: "Open Sans", Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;

margin: 0;

padding: 0;

font-weight:700;

width: 100%;

height: 100%;

}

.title {

font-size: 20px;

color: #333333;

width:400px;

text-align:center;

margin: 3% auto;

}

.container {

background: url("bg1.png") no-repeat scroll center top transparent;

color: #000000;

height: 535px;

margin: 20px auto;

border: 10px solid #333;

overflow: hidden;

position: relative;

width: 1000px;

position:relative;

-webkit-box-shadow:0 2px 8px rgba(0, 0, 0, 0.3), 0 0 50px rgba(0, 0, 0, 0.1) inset;

-moz-box-shadow:0 2px 8px rgba(0, 0, 0, 0.3), 0 0 50px rgba(0, 0, 0, 0.1) inset;

box-shadow:0 2px 8px rgba(0, 0, 0, 0.3), 0 0 50px rgba(0, 0, 0, 0.1) inset;

}

.description {

background-color: rgba(230, 145, 23, 0.9);

color: #FFFFFF;

display: none;

height: 140px;

left: 343px;

line-height: 24px;

padding: 100px 30px;

position: absolute;

text-align: center;

top: 97px;

width: 280px;

z-index: 10;

-moz-border-radius: 170px;

-ms-border-radius: 170px;

-o-border-radius: 170px;

-webkit-border-radius: 170px;

border-radius: 170px;

}

.description .close {

background-color: #808080;

cursor: pointer;

font-size: 22px;

font-weight: bold;

height: 36px;

line-height: 36px;

position: absolute;

right: 10px;

top: 60px;

width: 36px;

-moz-border-radius: 18px;

-ms-border-radius: 18px;

-o-border-radius: 18px;

-webkit-border-radius: 18px;

border-radius: 18px;

}

.labels p {

display: none;

}

.labels a {

background-color: rgba(230, 145, 23, 0.8);

color: #FFFFFF;

display: none;

height: 50px;

padding: 30px 0 0;

position: absolute !important;

text-align: center;

text-decoration: none;

width: 80px;

-moz-border-radius: 40px;

-ms-border-radius: 40px;

-o-border-radius: 40px;

-webkit-border-radius: 40px;

border-radius: 40px;

}

.labels > a {

background-color: rgba(230, 145, 23, 0.8);

-moz-transition: .3s;

-ms-transition: .3s;

-o-transition: .3s;

-webkit-transition: .3s;

transition: .3s;

}

.labels a:hover {

background-color: rgba(128, 128, 128, 0.8);

}

.labels a span {

border-left: 10px solid transparent;

border-right: 10px solid transparent;

border-top: 15px solid rgba(230, 145, 23, 0.8);

bottom: -14px;

height: 0;

left: 30px;

position: absolute;

width: 0;

-moz-transition: .3s;

-ms-transition: .3s;

-o-transition: .3s;

-webkit-transition: .3s;

transition: .3s;

}

.labels a:hover span {

border-top: 15px solid rgba(128, 128, 128, 0.8);

}

#label1 {

left: 800px;

top: 350px;

}

#label2 {

left: 350px;

top: 210px;

}

#label3 {

left: 450px;

top: 400px;

}

#label4 {

left: 170px;

top: 335px;

}

#label5 {

left: 570px;

top: 160px;

}

#label6 {

left: 275px;

top: 30px;

} Jquery

jQuery(function(){

$('.labels a#label1').fadeIn(100).effect('bounce', { times:3 }, 300, function() {

$('.labels a#label2').fadeIn(100).effect('bounce', { times:3 }, 300, function() {

$('.labels a#label3').fadeIn(100).effect('bounce', { times:3 }, 300, function() {

$('.labels a#label4').fadeIn(100).effect('bounce', { times:3 }, 300, function() {

$('.labels a#label5').fadeIn(100).effect('bounce', { times:3 }, 300, function() {

$('.labels a#label6').fadeIn(100).effect('bounce', { times:3 }, 300);

});

});

});

});

});

$('.description .close').click(function() {

$(this).parent().fadeOut(500);

return false;

});

$('.labels a').click(function() {

$('.description p').html( $(this).find('p').html() ).parent().fadeIn(500);

return false;

});

$('.container').click(function() {

$('.description').fadeOut(500);

});

});

相关链接