Introduction:
Here I will explain how to use jQuery to show image based on url entered in textbox with example orjQuery display image based on url with example or jQuery get images inside of div with example orjQuery show image when image URL entered in textbox with example or jQuery display image with url entered in textbox example. In jQuery by adding attr properties to image elements we can easily show image based on the URL entered in textbox based on our requirements.
Description :
In previous articles I explained jQuery get all image urls within the div example, jQuery show content on image hover with example, jQuery autocomplete highlight matching text in search results, jQuery show / hide div element on scroll with example, jQuery change textbox background color on focus / blur example and many articles relating to css, AngularJS , jQuery, JavaScript and asp.net . Now I will explain how to use jQuery to display image based on entered textbox url with examples.
In previous articles I explained jQuery get all image urls within the div example, jQuery show content on image hover with example, jQuery autocomplete highlight matching text in search results, jQuery show / hide div element on scroll with example, jQuery change textbox background color on focus / blur example and many articles relating to css, AngularJS , jQuery, JavaScript and asp.net . Now I will explain how to use jQuery to display image based on entered textbox url with examples.
In jQuery to display image based on the
image url entered in textbox we need to write the code like as shown below
|
<script type="text/javascript">
$(function () {
$('#btnShow').click(function () {
$("#imgTest").attr("src",
$("#txtUrl").val());
})
})
</script>
|
If you want complete example to
show the image based on the image url entered in textbox we need to write the
code like as shown below
|
<html>
<head>
<title> jquery show image from url entered in textbox </title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function () {
$('#btnShow').click(function () {
$("#imgTest").attr("src",
$("#txtUrl").val());
})
})
</script>
</head>
<body>
<div>
Enter Image URL:<input type="text" id="txtUrl" /> <input type="button" id="btnShow" value ="Show
Image" />
</div><br />
<img id="imgTest" />
</body>
</html>
|
No comments:
Post a Comment