I have a website with 5 images.
I'm trying to use "usemap" for my image No. 5 where there are two icons with two links.
I don't know which code I have to use and where to place this code.
I found many solutions but they are not appropriate and I don't have enough knowledge in CSS to apply.
thanks
<!DOCTYPE html>
<html>
<head>
<style>
body{
overflow: hidden;
background: url(bg.png) repeat;
}
nav{
position: absolute;
top: 20px;
left: 20px;
z-index: 100;
}
nav ul{
list-style: none;
}
.link-1{
background: url('ico_1.png') no-repeat top left;
width: 32px;
height: 32px;
}
.link-1.link-active{
background: url('ico_1_active.png') no-repeat top left;
}
.link-2{
background: url('ico_2.png') no-repeat top left;
width: 32px;
height: 32px;
}
.link-2.link-active{
background: url('ico_2_active.png') no-repeat top left;
}
.link-3{
background: url('ico_3.png') no-repeat top left;
width: 32px;
height: 32px;
}
.link-3.link-active{
background: url('ico_3_active.png') no-repeat top left;
}
.link-4{
background: url('ico_4.png') no-repeat top left;
width: 32px;
height: 32px;
}
.link-4.link-active{
background: url('ico_4_active.png') no-repeat top left;
}
.link-5{
background: url('i-contact-hover.png') no-repeat top left;
width: 32px;
height: 32px;
}
.link-5.link-active{
background: url('i-contact-active.png') no-repeat top left;
}
.container{
width: 100%;
height: 100%;
}
/*@media screen and (max-width: 640px) {
.section{
width: 600px;
}
}
@media screen and (max-width: 800px) {
.section{
width: 700px;
}
}
@media screen and (max-width: 1024px) {
.section{
width: 900px;
}
}
@media screen and (max-width: 1200px) {
.section{
width: 1100px;
}
}
@media screen and (min-width: 1600px) {
.section{
width: 1500px;
}
}*/
.section{
width: 900px;
}
.section-1{
position: absolute;
top: 0px;
left: 0px;
height: 640px;
background: url(section_1.png) no-repeat top center;
}
.section-2{
position: absolute;
top: -900px;
left: 1800px;
height: 640px;
background: url(section_2.png) no-repeat top center;
}
.section-3{
position: absolute;
top: -1200px;
left: 300px;
height: 640px;
background: url(section_3.png) no-repeat top center;
}
.section-4{
position: absolute;
top: 250px;
left: 1800px;
height: 640px;
background: url(section_4.png) no-repeat top center;
}
.section-5{
position: absolute;
top: 900px;
left: -300px;
height: 640px;
background: url(section_5.png) no-repeat top center;
}
.sp-canvas{
display: none;
}
</style>
</head>
<body>
<nav>
<ul>
<li><a href="#section-1"><div class="link-1 link-active"></div></a></li>
<li><a href="#section-2"><div class="link-2"></div></a></li>
<li><a href="#section-3"><div class="link-3"></div></a></li>
<li><a href="#section-4"><div class="link-4"></div></a></li>
<li><a href="#section-5"><div class="link-5"></div></a></li>
</ul>
</nav>
<div class="container">
<section class="section section-1">
</section>
<section class="section section-2">
</section>
<section class="section section-3">
</section>
<section class="section section-4">
</section>
<section class="section section-5">
</section>
</div>
Aucun commentaire:
Enregistrer un commentaire