Darkness Seeker Darkness Seeker - 1 year ago 108
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>
<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">
<td valign="top">
Profile Picture:<br>
<span class="small3">(will be reduced to 50x50)</span>
<input size="100" id="newProfilePicture" name="profpic" value="/%profpic%/">
<img id="profilePicture" src="/%profimg%/">
$('#newProfilePicture').blur(function() {
var newSrc = $('#newProfilePicture').val();

Thank you for the Attention

Answer Source

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")

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download