PotionMenus

by roomyrooms

HTML

<div class='select_box'>

  <div class='select_interior_wrapper'>

    <div class='select_scroll'>
      <div tabindex='0' class='select_scroll_element'>
        <img class='select_scroll_element_image'>
        <span class='select_scroll_element_text'>
          Diffraction Ray
        </span>
      </div>
      <div tabindex='0' class='select_scroll_element'>
        <img class='select_scroll_element_image'>
        <span class='select_scroll_element_text'>
          Diffraction Ray
        </span>
      </div>
    </div>

    <div class='select_detail'>
      <img id='select_detail_portrait'>
    </div>

  </div>

</div>

CSS

.select_box {
  width: 400px;
  height: 300px;
  padding: 60px;
  font-size: 18px;
  outline: none;
  display: inline-block;
  vertical-align: bottom;
  margin-bottom: 0px;
}

.select_interior_wrapper {
  text-align: start;
  outline: none;
}

.select_scroll {
  border: 10px solid;
  border-image: url(https://i.imgur.com/T7tm80Z.png) 10 round;
  background: #6d6f7f;
  border-radius: 5px;
  width: 55%;
  height: 280px;
  position: relative;
  top: -16px;
  left: -16px;
  float: left;
  overflow: auto;
}

.select_scroll_element {
  border-width: 2px;
  border-style: inset;
  border-color: initial;
  margin-top: 5px;
  margin-bottom: 5px;
  width: 90%;
  height: 10%;
  min-height: 32px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.8);
  color: #4dbacd;
  background-color: rgba(0, 0, 0, 0.3);
  transition: border-color 0.3s ease-in-out;
  outline: none;
}

.select_scroll_element:focus {
  border-color: #cd4d7a;
}

.select_scroll_element:focus > img {
  border-color: #cd4d7a;
}

.select_scroll_element_image {
  width: 32px;
  height: 32px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, 0.8);
  transition: border-color 0.3s ease-in-out;
  position: relative;
  left: -1px;
  top: -1px;
}

.select_scroll_element_text {
  font-size: 15px;
  font-weight: 600;
  position: relative;
  top: -40%;
  user-select: none;
}

.select_detail {
  border: 10px solid;
  border-image: url(https://i.imgur.com/T7tm80Z.png) 10 round;
  background: #6d6f7f;
  border-radius: 5px;
  width: 35%;
  height: 280px;
  position: relative;
  top: -16px;
  left: -16px;
  float: right;
  overflow: auto;
}

#select_detail_portrait {
  width: 64px;
  height: 64px;
  position: relative;
  left: 22%;
  image-rendering: pixelated;
  border: 5px solid;
  border-image: url(https://i.imgur.com/T7tm80Z.png) 5 round;
  border-radius: 5px;
}

JavaScript

var spellLinks = {
		"spell/SpiritsBlessing": "https://i.imgur.com/VgefnLt.png",
		
		"spell/Regeneration": "https://i.imgur.com/TXxlFZb.png",
		"spell/EnergyOverflow": "https://i.imgur.com/4KUthGD.png",
		"spell/Adrenaline": "https://i.imgur.com/BrwBoeW.png",

		"spell/CrystalSpray": "https://i.imgur.com/UK9Y8dN.png",
		"spell/CrystallineBarrier": "https://i.imgur.com/bQWWbxP.png",
		"spell/IridescentPrism": "https://i.imgur.com/375uJRU.png",

		"spell/CrushingBlow": "https://i.imgur.com/GpUpRux.png",
		"spell/GravityCrash": "https://i.imgur.com/JwRm47A.png",
		"spell/GroundingGrasp": "https://i.imgur.com/pkRCyGo.png",
		"spell/VectorSwap": "https://i.imgur.com/jhpFPQu.png",

		"spell/Blizzard": "https://i.imgur.com/eTpbYWz.png",
		"spell/FrigidSpike": "https://i.imgur.com/q8Uf8dM.png",
		"spell/Cryogenics": "https://i.imgur.com/HJPk9N9.png",

		"spell/DiffractionRay": "https://i.imgur.com/hd9BZ1Q.png",
		"spell/BetweenTheWaves": "https://i.imgur.com/DUKFT1Q.png",
		"spell/PhotonBomb": "https://i.imgur.com/Wz581dh.png",

		"spell/ZenithOfSpeed": "https://i.imgur.com/e9gdy1y.png",
		"spell/Thunderstorm": "https://i.imgur.com/rjaeYrJ.png",

		"spell/CorePlating": "https://i.imgur.com/OayWPSI.png",
		"spell/MagmaticEruption": "https://i.imgur.com/Cdm5jzN.png",
		"spell/ChainsOfBrimstone": "https://i.imgur.com/Yl6qJYZ.png",

		"spell/CrawlingField": "https://i.imgur.com/sOuM3AC.png",
		"spell/EntanglingThorns": "https://i.imgur.com/gHlX5Ql.png",
		"spell/VineSiphon": "https://i.imgur.com/xZTY9gi.png",

		"spell/UneasyRhythm": "https://i.imgur.com/miUlLjl.png",
		"spell/TranceRuined": "https://i.imgur.com/TNwEm2Z.png",
		"spell/SeaOfMemory": "https://i.imgur.com/Y6IqJBq.png",

		"spell/ScaldingFog": "https://i.imgur.com/eNbS9YG.png",
		"spell/DivergentMist": "https://i.imgur.com/DysojN8.png",
		"spell/VaporousMagic": "https://i.imgur.com/sl7nS6X.png",

		"spell/Geospike": "https://i.imgur.com/zttTPuV.png",
		"spell/Tremor":...