Mi objetivo es crear un menú desplegable que cuando se haga clic en cada elemento del menú desplegable, muestre una imagen diferente encima, reemplazando la anterior. He estado usando estas páginas como guía:
El menú desplegable tiene nueve opciones y el html se ve así:
<div class="dropdown"> <img id="a_features" src="a_features" style="display:none;"/> <button onclick="myFunction()" class="dropbtn">Change in Audio Features Over Time</button> <div id="myDropdown" class="dropdown-content"> <a onclick="danceability()">Danceability</a> <a onclick="duration()">Duration</a> <a onclick="energy()">Energy</a> <a onclick="instrumentalness()">Instrumentalness</a> <a onclick="liveness()">Liveness</a> <a onclick="loudness()">Loudness</a> <a onclick="speechiness()">Speechiness</a> <a onclick="tempo()">Tempo</a> <a onclick="valence()">Valence</a> </div>
Y un ejemplo de las funciones que estoy usando, todas son idénticas a excepción de la fuente de la imagen, es este:
function danceability(){ var pic = "https://imgur.com/Ga5bnai" document.getElementById('a_features').src = pic.replace('90x90', '225x225'); document.getElementById('a_features').style.display='block'; }
Esta configuración funciona cuando uso la imagen utilizada en el ejemplo de desbordamiento de pila ("http://img.tesco.com/Groceries/pi/118/5000175411118/IDShot_90x90.jpg"), pero falla cuando intento vincularla al imágenes alojadas en imgur. ¿Se trata de un problema con la fuente de la imagen y, de ser así, cómo soluciono esto?
Me parece que el enlace imgur que está usando (si es el que realmente está usando), (a) no se vincula a una imagen sino a una página web (b) no incluye '90x90', así que ganó No lo reemplaces con nada más. Si reemplazara el src con un enlace a una imagen real, probablemente funcionaría. Además, puedes generalizar la función. En lugar de llamar a una función diferente en cada elemento, puede llamar a 1 función y agregar la imagen src en un atributo de datos, por ejemplo:
<div id="myDropdown" class="dropdown-content"> <a data-image="https://imgur.com/Ga5bnai">Danceability</a> <a data-image="https://imgur.com/35ewr">Duration</a> <a data-image="https://imgur.com/fas353F">Energy</a> <!-- ... --> </div>
const image = document.getElementById('a_features'); const setImage = (element) => { const src = element.dataset.image; image.src = src.replace('90x90', '225x225'); image.style.display = 'block'; } document.querySelectorAll('#myDropdown a').forEach((item) => { item.addEventListener('click', () => setImage(item)); });
Un ejemplo: https://codepen.io/dagropp/pen/WNZzaay