Display certain image for derminated numbers

Question

I got the following <input> and <img> on the page.

<input class="form-control" id="cordenadasaqui" value="47644.63956 74592.843" readonly>

<img id="imagemaqui" src="http://www.meusite.com/los-santos.jpg">

I need to display a different image for each set of displayed strings.

Example

---

If the <input> above is with the value=" " containing in the first 11 characters:

47644.63956

the image displayed will be:

<img id="imagemaqui" src="http://www.meusite.com/los-santos.jpg">

---

If you have the value=" " containing the following numbers in the first 11 characters:

87635.98456

the image displayed will be:

<img id="imagemaqui" src="http://www.meusite.com/las-venturas.jpg">

---

To simplify the question

In the value=" " a set of numbers will be loaded, and then only the first 11 characters (10 numbers and 1 point ".").

If these first 11 characters are 47644.63956 = los-santos.jpg

If these first 11 characters are 87635.98456 = las-venturas.jpg

And so on... How to do this?

Answer 1

I believe this code solves your problem. By loading the page it takes the value of the input and compares according to what Oce said. And assigning the image:

<input class="form-control" id="cordenadasaqui" value="87635.98456 74592.843" readonly>

<img id="imagemaqui" src="http://www.meusite.com/los-santos.jpg">
<script>
$(document).ready(function(){
   var coordenadas= $("#cordenadasaqui").val().substr(0,11);
   var img="";
if(coordenadas=="47644.63956"){
img="http://www.meusite.com/los-santos.jpg";
    }
else if(coordenadas=="87635.98456"){
        img="http://www.meusite.com/las-venturas.jpg";
    }
    $("#imagemaqui").attr("src",img);
});
</script>

I used Jquery. I hope I helped!!