Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <html>
- <style>
- * {
- box-sizing: border-box;
- }
- .row::after {
- content: "";
- clear: both;
- display: table;
- }
- [class*="col-"] {
- float: left;
- padding: 15px;
- }
- @media only screen and (min-width: 768px) {
- /* For desktop: */
- .col-1 {
- width: 8.33%;
- }
- .col-2 {
- width: 16.66%;
- }
- .col-3 {
- width: 25%;
- }
- .col-4 {
- width: 33.33%;
- }
- .col-5 {
- width: 41.66%;
- }
- .col-6 {
- width: 50%;
- }
- .col-7 {
- width: 58.33%;
- }
- .col-8 {
- width: 66.66%;
- }
- .col-9 {
- width: 75%;
- }
- .col-10 {
- width: 83.33%;
- }
- .col-11 {
- width: 91.66%;
- }
- .col-12 {
- width: 100%;
- }
- }
- /* ///////////////////////// */
- #picContainer {
- border: 1px solid black;
- height: 350px;
- width: 100%;
- padding: 15px;
- }
- .optContainer {
- border: 1px solid black;
- width: 135px;
- height: 135px;
- margin: 0 auto;
- padding: 5px;
- }
- .prev {
- width: 100%;
- max-width: 250px;
- height: auto;
- display: block;
- margin-left: auto;
- margin-right: auto;
- }
- .imgSelected {
- width: 120px;
- display: block;
- margin-left: auto;
- margin-right: auto;
- }
- .hoveredImg {
- border: 1px solid #ff0000;
- }
- </style>
- <script>
- var imgCount = 0;
- var imgContent = [
- ["imgOption1", "BOM", "Lorem ipsum dolor sit amet."],
- ["imgOption2", "DOM", "Nullam fringilla imperdiet eleifend"],
- ["imgOption3", "JavaScript", "Cras dapibus ipsum a consequat tincidunt"]
- ];
- function initialize() {
- document.getElementById("imgViewer").src = "bom.png"
- document.getElementById("topicTtl").innerHTML = imgContent[0][1]
- document.getElementById("topicDescrpt").innerHTML = imgContent[0][2]
- }
- function previewImg(imgSrc) {
- document.getElementById("imgViewer").src = imgSrc.src;
- for (let i = 0; i < imgContent.length; i++) {
- if (imgSrc.id == imgContent[i][0]) {
- imgCount = i
- }
- }
- document.getElementById("topicTtl").innerHTML = imgContent[imgCount][1]
- document.getElementById("topicDescrpt").innerHTML = imgContent[imgCount][2]
- }
- </script>
- <head>
- <title>Image Viewer DOM </title>
- </head>
- <body onload="initialize()">
- <!-- image view container -->
- <div class="row">
- <div class="col-3">
- <!-- blank -->
- </div>
- <div class="col-6">
- <div id="picContainer">
- <div class="row">
- <div class="col-8">
- <img id="imgViewer" class="prev" src="">
- </div>
- <div class="col-4">
- <!-- title and description -->
- <h3 id="topicTtl">Title</h3>
- <p id="topicDescrpt">Description</p>
- </div>
- </div>
- </div>
- </div>
- <div class="col-3">
- <!-- blank -->
- </div>
- </div>
- <!-- hover or clicked to display -->
- <div class="row">
- <div class="col-3">
- <!--blank-->
- </div>
- <div class="col-2">
- <div class="optContainer">
- <img id="imgOption1" alt="no image" src="bom.png" class="imgSelected" onmouseover="previewImg(this)">
- </div>
- </div>
- <div class="col-2">
- <div class="optContainer">
- <img id="imgOption2" alt="no image" src="dom.png" class="imgSelected" onmouseover="previewImg(this)">
- </div>
- </div>
- <div class="col-2">
- <div class="optContainer">
- <img id="imgOption3" alt="no image" src="intro.png" class="imgSelected" onmouseover="previewImg(this)">
- </div>
- </div>
- <div class="col-3">
- <!--blank-->
- </div>
- </div>
- </body>
- </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement