Line 1: | Line 1: | ||
− | + | <!DOCTYPE html> | |
− | + | ||
− | + | ||
<html> | <html> | ||
<head> | <head> | ||
Line 8: | Line 6: | ||
<style> | <style> | ||
.poster_bg { | .poster_bg { | ||
− | + | display: inline-block; | |
− | + | width: 100%; | |
− | } | + | } |
− | .texting { | + | .texting { |
− | + | min-width: 50%; | |
− | } | + | } |
− | .tabcontent { | + | .tabcontent { |
− | + | display: inline-block; | |
− | + | padding: 2.5%; | |
− | + | font-family: Avenir, Arial; | |
− | } | + | } |
− | .center { | + | .center { |
− | + | display: flex; | |
− | + | flex-direction: row; | |
− | } | + | } |
− | + | </style> | |
− | + | </head> | |
− | + | <body> | |
− | <!-- | + | <script> |
+ | /*! Image Map Resizer (imageMapResizer.min.js ) - v1.0.10 - 2019-04-10 | ||
+ | * Desc: Resize HTML imageMap to scaled image. | ||
+ | * Copyright: (c) 2019 David J. Bradshaw - dave@bradshaw.net | ||
+ | * License: MIT | ||
+ | */ | ||
+ | !function(){"use strict";function r(){function e(){var r={width:u.width/u.naturalWidth,height:u.height/u.naturalHeight},a={width:parseInt(window.getComputedStyle(u,null).getPropertyValue("padding-left"),10),height:parseInt(window.getComputedStyle(u,null).getPropertyValue("padding-top"),10)};i.forEach(function(e,t){var n=0;o[t].coords=e.split(",").map(function(e){var t=1==(n=1-n)?"width":"height";return a[t]+Math.floor(Number(e)*r[t])}).join(",")})}function t(e){return e.coords.replace(/ *, */g,",").replace(/ +/g,",")}function n(){clearTimeout(d),d=setTimeout(e,250)}function r(e){return document.querySelector('img[usemap="'+e+'"]')}var a=this,o=null,i=null,u=null,d=null;"function"!=typeof a._resize?(o=a.getElementsByTagName("area"),i=Array.prototype.map.call(o,t),u=r("#"+a.name)||r(a.name),a._resize=e,u.addEventListener("load",e,!1),window.addEventListener("focus",e,!1),window.addEventListener("resize",n,!1),window.addEventListener("readystatechange",e,!1),document.addEventListener("fullscreenchange",e,!1),u.width===u.naturalWidth&&u.height===u.naturalHeight||e()):a._resize()}function e(){function t(e){e&&(!function(e){if(!e.tagName)throw new TypeError("Object is not a valid DOM element");if("MAP"!==e.tagName.toUpperCase())throw new TypeError("Expected <MAP> tag, found <"+e.tagName+">.")}(e),r.call(e),n.push(e))}var n;return function(e){switch(n=[],typeof e){case"undefined":case"string":Array.prototype.forEach.call(document.querySelectorAll(e||"map"),t);break;case"object":t(e);break;default:throw new TypeError("Unexpected data type ("+typeof e+").")}return n}}"function"==typeof define&&define.amd?define([],e):"object"==typeof module&&"object"==typeof module.exports?module.exports=e():window.imageMapResize=e(),"jQuery"in window&&(window.jQuery.fn.imageMapResize=function(){return this.filter("map").each(r).end()})}(); | ||
+ | //# sourceMappingURL=imageMapResizer.map | ||
+ | </script> | ||
+ | <script> | ||
+ | //Here I do the tabulator system! | ||
+ | function openIL(evt, ILName) { | ||
+ | var i, tabcontent, tablinks; | ||
+ | tabcontent = document.getElementsByClassName("tabcontent"); | ||
+ | for (i = 0; i < tabcontent.length; i++) { | ||
+ | tabcontent[i].style.display = "none"; | ||
+ | } | ||
+ | tablinks = document.getElementsByClassName("tablinks"); | ||
+ | for (i = 0; i < tablinks.length; i++) { | ||
+ | tablinks[i].className = tablinks[i].className.replace(" active", ""); | ||
+ | } | ||
+ | document.getElementById(ILName).style.display = "block"; | ||
+ | evt.currentTarget.className += " active"; | ||
+ | } | ||
+ | |||
+ | document.getElementById("defaultOpen").click(); | ||
+ | </script> | ||
+ | |||
+ | <!-- ok cool here starts the image --> | ||
<div class="center"> | <div class="center"> | ||
<div class="picture"> | <div class="picture"> | ||
Line 55: | Line 81: | ||
<div id="Biosensor" class="tabcontent"> | <div id="Biosensor" class="tabcontent"> | ||
<h1>Yo Dadda</h1> | <h1>Yo Dadda</h1> | ||
− | Jk, my one true love is Zen-senpai | + | Jk, my one true love is Zen-senpai |
</div> | </div> | ||
<div id="Model" class="tabcontent"> | <div id="Model" class="tabcontent"> | ||
Line 63: | Line 89: | ||
<div id="Method" class="tabcontent"> | <div id="Method" class="tabcontent"> | ||
<h1>The saving</h1> | <h1>The saving</h1> | ||
− | Jk, my one true love is Zen-senpai | + | Jk, my one true love is Zen-senpai |
</div> | </div> | ||
<div id="Results" class="tabcontent"> | <div id="Results" class="tabcontent"> | ||
<h1>The horror</h1> | <h1>The horror</h1> | ||
− | Jk, my one true love is Zen-senpai | + | Jk, my one true love is Zen-senpai |
</div> | </div> | ||
<div id="Beyond" class="tabcontent"> | <div id="Beyond" class="tabcontent"> | ||
<h1>Double death</h1> | <h1>Double death</h1> | ||
− | Jk, my one true love is Zen-senpai | + | Jk, my one true love is Zen-senpai |
</div> | </div> | ||
<div id="HP" class="tabcontent"> | <div id="HP" class="tabcontent"> | ||
<h1>Yo What do to now</h1> | <h1>Yo What do to now</h1> | ||
− | Jk, my one true love is Zen-senpai | + | Jk, my one true love is Zen-senpai |
</div> | </div> | ||
<div id="Drop" class="tabcontent"> | <div id="Drop" class="tabcontent"> | ||
<h1>Yo im crying</h1> | <h1>Yo im crying</h1> | ||
− | Jk, my one true love is Zen-senpai | + | Jk, my one true love is Zen-senpai |
</div> | </div> | ||
<div id="Footer" class="tabcontent"> | <div id="Footer" class="tabcontent"> | ||
<h1>Yo kill me now</h1> | <h1>Yo kill me now</h1> | ||
− | Jk, my one true love is Zen-senpai | + | Jk, my one true love is Zen-senpai |
</div> | </div> | ||
</div> | </div> | ||
− | |||
− | |||
</div> | </div> | ||
+ | <script>imageMapResize();</script> | ||
</body> | </body> | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
</html> | </html> |
Revision as of 20:54, 8 November 2020
<!DOCTYPE html>