Галерея изображений, делегирование, tooltip
делегирование
<!DOCTYPE HTML>
<html>
<head>
<title>Галерея</title>
<style>
body {
margin: 0;
padding: 0;
font: 75%/120% Arial, Helvetica, sans-serif;
}
h2 {
font: bold 190%/100% Arial, Helvetica, sans-serif;
margin: 0 0 .2em;
}
h2 em {
font: normal 80%/100% Arial, Helvetica, sans-serif;
color: #999999;
}
#largeImg {
border: solid 1px #ccc;
width: 550px;
height: 400px;
padding: 5px;
}
#thumbs{
text-align:center;
}
#thumbs a {
position:relative;
display:block;
border: solid 1px #ccc;
width: 100px;
height: 100px;
padding: 3px;
margin: 2px;
float: left;
}
#thumbs a:hover {
border-color: #FF9900;
}
.tooltip{
border-radius:3px;
border-bottom-left-radius:0;
padding:5px;
color:white;
z-index:3;
position:absolute;
top:-15px;
right:-15px;
background:rgba(0,0,0,.6);
}
.tooltip:after{
content: "";
position: absolute;
left: -0.6px;
bottom: -5px;
z-index:3;
-webkit-transform: rotate(0deg) skewX(-14deg);
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid rgba(0,0,0,.6);
}
p{
position:relative;
}
</style>
<meta charset="utf-8">
</head>
<body>
<p>
<img id="largeImg" src="https://js.cx/gallery/img1-lg.jpg" alt="Large image">
</p>
<span id="thumbs">
<!-- При наведении на изображение показывается встроенная подсказка браузера (title) -->
<a href="https://js.cx/gallery/img2-lg.jpg" title="Image 2"><img src="https://js.cx/gallery/img2-thumb.jpg"></a>
<a href="https://js.cx/gallery/img3-lg.jpg" title="Image 3"><img src="https://js.cx/gallery/img3-thumb.jpg"></a>
<a href="https://js.cx/gallery/img4-lg.jpg" title="Image 4"><img src="https://js.cx/gallery/img4-thumb.jpg"></a>
<a href="https://js.cx/gallery/img5-lg.jpg" title="Image 5"><img src="https://js.cx/gallery/img5-thumb.jpg"></a>
<a href="https://js.cx/gallery/img6-lg.jpg" title="Image 6"><img src="https://js.cx/gallery/img6-thumb.jpg"></a>
</span>
<script>
var d = document.getElementById("thumbs"),
e = document.getElementById("largeImg");
d.onmouseover = function (a) {
a = a || window.event;
a = a.target || a.srcElement;
if ("IMG" == a.tagName) {
var b = document.createElement("div"),
c = a.parentNode;
b.innerHTML = c.title;
b.className = "tooltip";
c.appendChild(b);
a.onmouseout = function () {
c.removeChild(b)
this.onmouseout = null
}
}
};
d.onclick = function (a) {
a = a || window.event;
a = a.target || a.srcElement;
"IMG" == a.tagName && (e.src = a.parentNode.href);
return false
};
</script>
</body>
</html>
|