Darkness Seeker Darkness Seeker - 5 months ago 16
Javascript Question

Change image src using JQuery Attributes and an HTML input

Good evening.

I am looking for a bit of help in a Code I found around, but I can't get towork as I would like:

This code, essentially, let's you insert in the Input the URL of an image (Let's say "http://i.blogs.es/e79516/nuevo-logo-google/650_1200.jpg") and once you left the input, the script automatically shows it up in the image below.

The problem, is that I would like to enter only the name of the archive, not the entire URL, but I don't know how or where to enter all the URL route and left only the dynamic part to change, since I am beginning with Js.

So, imagining I want to show only images already created and ubicated in "//localhost/ROL/images/Avatars/Characters/"NAME OF THE ARCHIVE".png", Which changes should I make to only enter the file name, without even the extension?

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Documento sin título</title>
<script src="js/jquery-2.1.4.js"></script>
<script src="js/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="js/jquery-ui.css">
</head>
<body>
<tr>
<td valign="top">
Profile Picture:<br>
<span class="small3">(will be reduced to 50x50)</span>
</td>
<td>
<input size="100" id="newProfilePicture" name="profpic" value="/%profpic%/">
<br>
<img id="profilePicture" src="/%profimg%/">
</td>
</tr>
</body>
<script>
$('#newProfilePicture').blur(function() {
var newSrc = $('#newProfilePicture').val();
$('#profilePicture').attr('src',newSrc);
});
</script>
</html>


Thank you for the Attention

Answer
.blur(function(){
    $('#profilePicture').prop('src',"i.blogs.es/e79516/nuevo-logo-google/"+$('#newProfilePicture').val()+".png");
});

Works but not necessary to save the value to a variable. You also may want to use prop() instead of attr. (Sorry I missed your OP question asking to tack on the ".png")

Comments