Examples/imgNav.html at master · DymoneLewis/Examples · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example1</title>
</head>
<body>
<h1>the comparation between image navbar & image map</h1>
<diV>
    <a style="height:61px;width:50px;position:absolute;top:37em; left:4em; background-image:url('./Examples/1.jpg'); background-size:50px 61px;" href="https://dymonelewis.github.io/"></a>
    <a style="height:61px;width:50px;position:absolute;top:37em; left:8em; background-image:url('./Examples/2.jpg'); background-size:50px 61px;" href="https://dymonelewis.github.io/2019/03/15/Today-sNews/"></a>
    <a style="height:61px;width:50px;position:absolute;top:37em; left:12em; background-image:url('./Examples/3.jpg'); background-size:50px 61px;" href="https://dymonelewis.github.io/2019/03/15/Realize-a-Jump-Loading-By-CSS/"></a>
    <a style="height:61px;width:50px;position:absolute;top:37em; left:16em; background-image:url('./Examples/4.jpg'); background-size:50px 61px;" href="https://dymonelewis.github.io/2019/03/15/Add-a-%E9%9F%B3%E4%B9%90%E6%92%AD%E6%94%BE%E5%99%A8-Music-Player/"></a>
    <a style="height:61px;width:50px;position:absolute;top:37em; left:20em; background-image:url('./Examples/5.jpg'); background-size:50px 61px;" href="https://dymonelewis.github.io/2019/03/06/Flexible-box/"></a>
    <a style="height:61px;width:50px;position:absolute;top:37em; left:24em; background-image:url('./Examples/6.jpg'); background-size:50px 61px;" href="https://dymonelewis.github.io/2018/12/05/%E4%B8%80%E4%B8%AA%E6%BB%91%E7%A8%BD%E7%9A%84%E6%A2%A6/"></a>
    <a style="height:61px;width:50px;position:absolute;top:44em; left:4em; background-image:url('./Examples/7.jpg'); background-size:50px 61px;" href="https://dymonelewis.github.io/2018/12/05/2018-12-05/"></a>
    <a style="height:61px;width:50px;position:absolute;top:44em; left:8em; background-image:url('./Examples/8.jpg'); background-size:50px 61px;" href="https://dymonelewis.github.io/2018/11/19/My-ES6-Parts/"></a>
    <a style="height:61px;width:50px;position:absolute;top:44em; left:12em; background-image:url('./Examples/9.jpg'); background-size:50px 61px;" href="https://dymonelewis.github.io/2018/11/19/2018-11-18/"></a>
    <a style="height:61px;width:50px;position:absolute;top:44em; left:16em; background-image:url('./Examples/10.jpg'); background-size:50px 61px;" href="https://dymonelewis.github.io/2018/11/19/History-Of-Front-End/"></a>
    <a style="height:61px;width:50px;position:absolute;top:44em; left:20em; background-image:url('./Examples/11.jpg'); background-size:50px 61px;" href="https://dymonelewis.github.io/2018/11/18/My-Angular-Part/"></a>
    <a style="height:61px;width:50px;position:absolute;top:44em; left:24em; background-image:url('./Examples/12.jpg'); background-size:50px 61px;" href="https://dymonelewis.github.io/2018/11/17/2018-11-17/"></a>
</diV>
<div>
    <img src="all.jpg" style="height:210px;width:480px;position:absolute;top:58em; left:4em; " usemap="#map1" border=0>
    <map name="map1">
        <area shape="rect" coords="0,0,80,105" href="https://dymonelewis.github.io/">
        <area shape="rect" coords="80,0,160,105" href="https://dymonelewis.github.io/2019/03/15/Today-sNews/">
        <area shape="rect" coords="160,0,240,105" href="https://dymonelewis.github.io/2019/03/15/Realize-a-Jump-Loading-By-CSS/">
        <area shape="rect" coords="240,0,320,105" href="https://dymonelewis.github.io/2019/03/15/Add-a-%E9%9F%B3%E4%B9%90%E6%92%AD%E6%94%BE%E5%99%A8-Music-Player/">
        <area shape="rect" coords="320,0,400,105" href="https://dymonelewis.github.io/2019/03/06/Flexible-box/">
        <area shape="rect" coords="400,0,480,105" href="https://dymonelewis.github.io/2018/12/05/%E4%B8%80%E4%B8%AA%E6%BB%91%E7%A8%BD%E7%9A%84%E6%A2%A6/">
        <area shape="rect" coords="0,105,80,210" href="https://dymonelewis.github.io/2018/12/05/2018-12-05/">
        <area shape="rect" coords="80,105,160,210" href="https://dymonelewis.github.io/2018/11/19/My-ES6-Parts/">
        <area shape="rect" coords="160,105,180,210" href="https://dymonelewis.github.io/2018/11/19/2018-11-18/">
        <area shape="rect" coords="180,105,320,210" href="https://dymonelewis.github.io/2018/11/19/History-Of-Front-End/">
        <area shape="rect" coords="320,105,400,210" href="https://dymonelewis.github.io/2018/11/18/My-Angular-Part/">
        <area shape="rect" coords="400,105,480,210" href="https://dymonelewis.github.io/2018/11/17/2018-11-17/">
    </map>
</div>
</body>
</html>