Difference between revisions of "Team:UChile Biotec/css"
| Line 43: | Line 43: | ||
} | } | ||
| + | function myFunction(imgs) { | ||
| + | // Get the expanded image | ||
| + | var expandImg = document.getElementById("expandedImg"); | ||
| + | // Get the image text | ||
| + | var imgText = document.getElementById("imgtext"); | ||
| + | // Use the same src in the expanded image as the image being clicked on from the grid | ||
| + | expandImg.src = imgs.src; | ||
| + | // Use the value of the alt attribute of the clickable image as text inside the expanded image | ||
| + | imgText.innerHTML = imgs.alt; | ||
| + | // Show the container element (hidden with CSS) | ||
| + | expandImg.parentElement.style.display = "block"; | ||
| + | } | ||
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | //////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// | ||
| Line 411: | Line 423: | ||
z-index: 9999; | z-index: 9999; | ||
} | } | ||
| + | |||
| + | /********************************* Interactive Image *********************************/ | ||
| + | |||
| + | /* The grid: Four equal columns that floats next to each other */ | ||
| + | .column { | ||
| + | float: left; | ||
| + | width: 25%; | ||
| + | padding: 10px; | ||
| + | } | ||
| + | |||
| + | /* Style the images inside the grid */ | ||
| + | .column img { | ||
| + | opacity: 0.8; | ||
| + | cursor: pointer; | ||
| + | } | ||
| + | |||
| + | .column img:hover { | ||
| + | opacity: 1; | ||
| + | } | ||
| + | |||
| + | /* Clear floats after the columns */ | ||
| + | .row:after { | ||
| + | content: ""; | ||
| + | display: table; | ||
| + | clear: both; | ||
| + | } | ||
| + | |||
| + | /* The expanding image container (positioning is needed to position the close button and the text) */ | ||
| + | .container { | ||
| + | position: relative; | ||
| + | display: none; | ||
| + | } | ||
| + | |||
| + | /* Expanding image text */ | ||
| + | #imgtext { | ||
| + | position: absolute; | ||
| + | bottom: 15px; | ||
| + | left: 15px; | ||
| + | color: white; | ||
| + | font-size: 20px; | ||
| + | } | ||
| + | |||
| + | /* Closable button inside the image */ | ||
| + | .closebtn { | ||
| + | position: absolute; | ||
| + | top: 10px; | ||
| + | right: 15px; | ||
| + | color: white; | ||
| + | font-size: 35px; | ||
| + | cursor: pointer; | ||
| + | } | ||
/********************************* HTML STYLING *********************************/ | /********************************* HTML STYLING *********************************/ | ||
Revision as of 21:52, 17 October 2018