CODEWITHSUNDEEP
javascript
Emmanuel Grooviedelik
Emmanuel Grooviedelik

Reputation: 11

How to load and change an image when selecting an option with javascript

Thanks for the help

I have this code, but now I want that when selecting a track also change the image in a div that is called "cover"

I have searched several tutorials and answers on pages like this how to change images with javascript but I have not found how to do it by selecting an option.

I appreciate the attention and time for your help.

<script>
function cambiarTrack(track) {
   var path =  track.getAttribute("path")
   viejo_audio = document.getElementById("reproductor")
   audio_padre = viejo_audio.parentNode
   audio_padre.removeChild(viejo_audio)
   nuevo_audio = document.createElement("audio")
   nuevo_audio.setAttribute("id","reproductor")
   nuevo_audio.setAttribute("controls", "controls")
  // nuevo_audio.setAttribute("autoplay", "autoplay")
   source = document.createElement("source")
   source.setAttribute("src", path)
   source.setAttribute("type", "audio/mpeg")
   source.setAttribute("id", "reproductorSource")
   nuevo_audio.appendChild(source)
   audio_padre.appendChild(nuevo_audio)}
function cargarReproductor() {
         var select = document.getElementById("selectTrack")
         var path = select.options[0].getAttribute("path")
   nuevo_audio = document.createElement("audio")
   nuevo_audio.setAttribute("id","reproductor")
   nuevo_audio.setAttribute("controls", "controls")       
   source = document.createElement("source")
   source.setAttribute("src", path)
   source.setAttribute("type", "audio/mpeg")
   source.setAttribute("id", "reproductorSource")
   nuevo_audio.appendChild(source)
   padre = document.getElementById("reproductorBox")
   padre.appendChild(nuevo_audio)
}
</script>

<div id="reproductorBox" ></div>

<select id="selectTrack" multiple onchange="cambiarTrack(this.options[this.selectedIndex]) ; ">
<option  path="https://archive.org/download/heavypsyradio_3/HPR_Z.mp3" >Heavy Psy Radio 3</option>
<option path="https://archive.org/download/heavypsyradio_Jul17/HPR_Y.mp3">Heavy Psy Radio 2</option>
<option path="https://archive.org/download/HPRJun17/HPR_Jun17.mp3">Heavy Psy Radio 1</option>
</select>
<script>cargarReproductor();</script>

<div id="cover">
 <img id="img" src="http://www.heavypsy.net/favicon.jpg" class="img-responsive">
</div>

Upvotes: 1

Views: 82

Answers (2)

Chava Geldzahler
Chava Geldzahler

Reputation: 3730

You can add each track's image src as another attribute on the option, 

<option  path="https://archive.org/download/heavypsyradio_3/HPR_Z.mp3" img="http://www.heavypsy.net/favicon.jpg">Heavy Psy Radio 3</option>

and then use it to change the image:

document.getElementById("img").src = track.getAttribute("img")


<script>
function cambiarTrack(track) {
   var path =  track.getAttribute("path")
   // Get the image url from the img attribute:
   var img = track.getAttribute("img")
   // Assign it to the src attribute of the cover image:
   document.getElementById("img").src = img
   viejo_audio = document.getElementById("reproductor")
   audio_padre = viejo_audio.parentNode
   audio_padre.removeChild(viejo_audio)
   nuevo_audio = document.createElement("audio")
   nuevo_audio.setAttribute("id","reproductor")
   nuevo_audio.setAttribute("controls", "controls")
  // nuevo_audio.setAttribute("autoplay", "autoplay")
   source = document.createElement("source")
   source.setAttribute("src", path)
   source.setAttribute("type", "audio/mpeg")
   source.setAttribute("id", "reproductorSource")
   nuevo_audio.appendChild(source)
   audio_padre.appendChild(nuevo_audio)}
function cargarReproductor() {
         var select = document.getElementById("selectTrack")
         var path = select.options[0].getAttribute("path")
   nuevo_audio = document.createElement("audio")
   nuevo_audio.setAttribute("id","reproductor")
   nuevo_audio.setAttribute("controls", "controls")       
   source = document.createElement("source")
   source.setAttribute("src", path)
   source.setAttribute("type", "audio/mpeg")
   source.setAttribute("id", "reproductorSource")
   nuevo_audio.appendChild(source)
   padre = document.getElementById("reproductorBox")
   padre.appendChild(nuevo_audio)
}
</script>

<div id="reproductorBox" ></div>

<select id="selectTrack" multiple onchange="cambiarTrack(this.options[this.selectedIndex]) ; ">
<option  path="https://archive.org/download/heavypsyradio_3/HPR_Z.mp3" img="http://www.heavypsy.net/favicon.jpg">Heavy Psy Radio 3</option>
<option path="https://archive.org/download/heavypsyradio_Jul17/HPR_Y.mp3" img="http://via.placeholder.com/350x150">Heavy Psy Radio 2</option>
<option path="https://archive.org/download/HPRJun17/HPR_Jun17.mp3" img="http://via.placeholder.com/200x200">Heavy Psy Radio 1</option>
</select>
<script>cargarReproductor();</script>

<div id="cover">
 <img id="img" src="http://via.placeholder.com/100x100" class="img-responsive">
</div>

Upvotes: 0

Aydin4ik
Aydin4ik

Reputation: 1935

From my understanding, what you are trying to achieve is:

  1. Link each of the options to an image
  2. When that option is selected, change the image in the 'cover' div

To do this, you can add a data-cover attribute to each of the options, such as:

<option path="https://archive.org/download/heavypsyradio_3/HPR_Z.mp3" data-cover="heavy.jpg">Heavy Psy Radio 3</option>

Then, when this option is selected, update the image like this. Add this to the cargarReproductor() function:

var cover = select.options[0].dataset.cover;
document.getElementById('img').src=cover;

Obviously, replace newimage.jpg with the path to your image.

Upvotes: 1

Related Questions