Tengo una galería de miniaturas con 6 imágenes, siendo nuevo en Java, quiero que cada imagen (icono) muestre el texto asociado y oculte el seleccionado previamente.
El código es aproximado, solo quiero que funcione por ahora, así que solo he incluido lo básico. Cualquier ayuda sería muy apreciada.
Esto es lo que tengo hasta ahora....
<main> <div class="centre"> <div class="thumb" id="gallery"> <div class="imgthumb" id="web"> <img src="images/icn-web.svg" alt="" onclick="showBlurb(this);"/> </div> <div class="imgthumb" id="des"> <img src="images/icn-des.svg" alt=""/> </div> <div class="imgthumb" id="ads"> <img src="images/icn-ads.svg" alt=""/> </div> <div class="imgthumb" id="soc"> <img src="images/icn-soc.svg" alt=""/> </div> <div class="imgthumb" id="prnt"> <img src="images/icn-prnt.svg" alt=""/> </div> <div class="imgthumb" id="bus"> <img src="images/icn-bus.svg" alt=""/> </div> </div> <div class="servblurb"> <div class="servblurbctn" id="hide1"> <h1>JUST WEB CHECKING</h1> </div> <div class="servblurbctn" id="hide2"> <h1>JUST DES CHECKING</h1> </div> <div class="servblurbctn" id="hide3"> <h1>JUST SOC CHECKING</h1> </div> </div></div> </main> CSS... body, html { margin: 0; padding: 0; } .centre { margin: auto; width: 90%; max-width: 1200px; } .thumb { width: 100%; height: auto; padding: 2%; overflow-x: scroll; } .imgthumb { display: inline-block; width: 12%; padding: 2%; height: auto; margin: auto; } .imgthumb:hover { opacity: 0.5; transition: 0.4s; cursor: pointer; } Javascript.... (this part is not sharp) <script> function showBlurb() { var x = document.getElementById("????"); if (x.style.display === "block") { x.style.display = "none"; } else { x.style.display = "block"; } } </script>Para ocultar todo el texto por defecto:
.servblurbctn{display:none;}Llame a su función con la identificación del elemento que desea mostrar:
<div class="imgthumb" id="web"> <img src="images/icn-web.svg" alt="" onclick="showBlurb('hide1');"/> </div>Entonces el javascript (no java) se vería así:
function showBlurb(id) { var x = document.getElementById(id); // hide all blurbs var t = document.querySelectorAll(".servblurbctn"); t.forEach(e => { e.style.display = "none"; }); // show the selected blurb document.getElementById(id).style.display = "block"; }