Attempting to get a javascript variable to be an image source - javascript

<div id="companyLogo"></div>
<script type = "text/javascript">
var imageName = prompt("Client Logo Image:");
$('#companyLogo').html(<img src = imageName, style="-webkit-filter: invert(100%);">);
</script>
I am trying to get imageName to be the source for the "img src" tag. Any help is greatly appreciated. Thanks!

try this.
in the begining :
<div id="companyLogo">
<img src="" id="#companyImg" style="display:none;" />
</div>
On some event the prompt box is displayed to the user
<script>
$(document).ready(function(){
var imageName = prompt("Client Logo Image:");
$("#companyImg").attr('src', 'your image path' + imageName);
$("#companyImg").css('display','block');
});
</script>

It's a better practice to keep your javascript away from your html. So you could create an html document like so:
<!DOCTYPE html>
<html>
<body>
<img id="companyLogo" src="path/to/some/default.img" alt="Your Company Logo" />
<script>
//prompts user for input
var imgSrc = prompt("Please input name");
//changes src of the targeted image to the value input by the user
document.getElementById("companyLogo").src = imgSrc;
</script>
</body>
</html>
Here is a fiddle

Related

Assign src of image to a variable through JS in HTML

I want to assign content of the src tag of image to a variable on clicking on the image through JS:
Eg-
HTML
<div id="img">
<img src="image1.jpg">
<img src="image2.jpg">
</div>
<span id="source"/>
JS
???
I want to assign the image source of the clicked image to a variable and then display the source on HTML through span. This all should happen when I click the image. And the source that is going to be assigned to variable should be of the clicked image.
How can I do it?
Thanks in advance.
try the following:
<html>
<head>
<script>
function setImage(id){
var element = document.getElementById(id).src;
document.getElementById("source").innerHTML = "<img src='" + element + "' />";
}
</script>
</head>
<body>
<div id="img">
<img id="img1" src="image1.jpg" onclick="setImage(this.id)" >
<img id="img2" src="image2.jpg" onclick="setImage(this.id)" >
</div>
<span id="source"></span>
</body>
</html>
you can try this,
<img ng-src="{{myVar}}">

Javascript - Changing an image with variables

I'm trying to create a slide show but I'm having some difficulty. I've googled the problem and read loads of pages but I still can't get it to work. I'm doing this all in my header, then the header.php will be included on whichever page. I've tried setting the source to a string containing the location, creating an image before and then setting it to that image's source, and just trying odd things trying to get it to work.
The strange thing is when I call the updateSlider() function, the source of my image is null even though I can see it on the screen, and afterwards when I set it, it says there is a source but the image is the same.
But at the moment I'm just trying to change the image when I click a button and then I'm going to try and make the slide show. Here is the header.php code, you can see some of the different things I've tried in it:
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="all">#import "./includes/layout.css";</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
var slideImages = new Array("includes/images/mmSlideImage1.png",
"includes/images/mmSlideImage2.png", "includes/images/mmSlideImage3.png");
var slideImage = newImage();
slideImage.src = slideImages[0];
pic = document.createElement("img");
pic.setAttribute("src", "includes/images/mmSlideImage2.png");
pic.setAttribute("alt", "No Image");
var url2 = "includes/images/mmSlideImage2.png";
var img2 = new Image();
img2.src = url2;
function updateSlider() {
console.log(document.getElementById("ht").getAttribute("src"));
document.getElementById("ht").setAttribute("src", img2.src);
console.log(document.getElementById("ht").getAttribute("src"));
}
</script>
</head>
<body>
<img src="includes/images/mmSlideImage1.png" alt="Logo" width="970" height="278" />
<button type="button" onclick="updateSlider()">Update Slider</button>
<div id="nav">
Home
About
Gallery
Programs
</div>
Thank you in advance for any help!
==================================================================================
UPDATED CODE:
<!DOCTYPE html>
<html>
<head>
<style type="text/css" media="all">#import "./includes/layout.css";</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"
</script>
<script>
var url2 = "includes/images/mmSlideImage2.png";
function updateSlider() {
console.log(document.getElementById("ht").getAttribute("src"));
$('ht').attr('src', url2);
console.log(document.getElementById("ht").getAttribute("src"));
}
</script>
</head>
<body>
<img src="includes/images/mmSlideImage1.png" alt="Logo" width="970" height="278" />
<button type="button" onclick="updateSlider()">Update Slider</button>
Simple. You're trying to give an anchor a image attribute. Give your img an id and fix it in the Javascript. For example, if you give it an "currentSlideImage" id:
$('#currentSlideImage').attr('src', url2);
BTW, I'd suggest you take a read on Unobstrusive Javascript.
i am not sure why are you using new image when you are just changing src of an image tag.
the easiest way is to use jquery code
$('#imgTagID').attr('src', url2);
or in javascript
document.getElementById("imgTagID").src = url2;
Here you go you were just missing id Tag inside jquery i just tried it with online images
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
var url2 = "http://www.thinkstockphotos.com.au/CMS/StaticContent/WhyThinkstockImages/Best_Images.jpg";
function updateSlider() {
//console.log(document.getElementById("ht").getAttribute("src"));
$('#ht').attr('src', url2);
//console.log(document.getElementById("ht").getAttribute("src"));
}
</script>
</head>
<body>
<a href="index.html" class="logo" > <img id="ht" src="http://www.nasa.gov/sites/default/files/images/743348main_Timelapse_Sun_4k.jpg" alt="Logo" width="970" height="278" /></a>
<button type="button" onclick="updateSlider()">Update Slider</button>
</body>
</html>

specify image source in javascript

I was wondering is there a way to only specify the source of an image in javascript. So if I had the following image tag:
<img class="CustomerPict" id="Image" alt="name" src=src style="left: 18px; top: 18.5px;">
And in javascript I want to declare the variable src? Any help would be appreciated!
HTML provides no way to set an attribute value using JavaScript.
You either need to set the src to a default value (possible a 1x1 transparent gif) and then change it with JavaScript later, or to generate the entire img element from JS.
<img class="CustomerPict" id="Image" alt="name" src="1x1.gif" style="left: 18px; top: 18.5px;">
<script>
document.getElementById('Image').src = src;
</script>
or
<script>
var container = document.getElementById('image-container');
var image = document.createElement('img');
image.src = src;
image.id = "Image";
image.className = "CustomerPict";
image.alt = "name";
// You can move these to a style sheet ruleset with a class or id selector
image.style.left = "18px";
image.style.top = "18.5px";
container.appendChild(image);
</script>
document.getElementById('Image').src = 'http://domain.com/picture.png';
<img src="src" id="Image">
document.getElementById('Image').setAttribute('src', 'http://www.gravatar.com/avatar/c9bef77e2d810012d8c96f84b9fc9bc9?s=32&d=identicon&r=PG');
img=document.getElementById("Image");
console.log(img.src);
or the nicer way (in my opinion)
img=document.getElementsByTagName("img");
console.log(img[0].src);
then you can assign img[0].src a value
You can make it a oneliner by using the img-tags onerror attribute:
<img src='not-found.zzz' onerror='this.src=window.src;'>
But make sure that the specified image in window.src (global scope) is correct or the script will loop forever...
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<script type='text/javascript'>
var src = 'my_real_image.png';
</script>
</head>
<body>
<img src='not-found.zzz' onerror='this.src=window.src;'>
</body>
</html>
DEMO: http://jsbin.com/ozimov/1/embed

get the id of the image from another html file using javascript

I using iframe for displaying a image. Here is my code.
index.html
<html>
<head>
<title>Center</title
<script type="text/javascript">
function sample(id){
var frameht=document.getElementById("ifrm").style.height;
var framewd=document.getElementById("ifrm").style.width;
}
</script>
</head>
<body>
<iframe style="width:700px;height:600px;" src="test.html" id="ifrm" onload="javascript:sample(this.id);"></iframe>
</body>
</html>
test.html
<html>
<head>
<title>Center</title>
<script type="text/javascript">
</script>
</head>
<body>
<img src="14.jpg" id="img1" onload="javascript:sample();"/>
</body>
</html>
I want the id of the image in index.html. Is it possible to get? Any one can help? Please!
document.getElementById('ifrm').contentWindow.document.getElementById('img1');
this should work
img = document.getElementById('ifrm').contentWindow.document.getElementsByTagName('img');
img[0].id to get the dinamically id
First get iframe.
var iframe = document.getElementById('ifrm');
Get access to elements of iframe.
var frameDoc = iframe.contentDocument || iframe.contentWindow.document;
Then, get id by tagname. In our case img.
var el = frameDoc.getElementsByTagName('img')[0].id;
Here is an example without iframe, to give you an idea how to get id of element after:
http://jsfiddle.net/nukec/eymq2/
Insted of id use name and try this..
<script>
window.frames["fName"].document.getElementById("img1");
</script>
<iframe style="width:700px;height:600px;" src="test.htm" id="ifrm" name="fName" onload="javascript:sample(this.id);"></iframe>
You should use jQuery
var imageObj= $('#myiframe').contents().find('img');
var imgId=$(imageObj).attr("id");

javascript image source

img src tag
i want, when click on image the source of the image in javascript variable
i want to use the src in javascript
var imageSource = document.getElementById ( "yourimageid").src;
A sample one
<script type="text/javascript">
function GetSrc(elem)
{
alert ( elem.src );
}
</script>
<img src="images/yourimage.extn" id="img1" onclick="GetSrc(this);" />
<img src="image.png" id="image" alt="image">
<script type="text/javascript">
alert(document.getElementById('image').src);
</script>
This will alert the src of the element with the id 'image'
Also you can use document.getElementById("[elementName]").getAttribute("src") and setAttribute..

Categories

Resources