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
Related
If I have an img in index.html:
<script src="script/script.js" type="text/javascript"></script>
<img id="imgb" src="picture/banner1.jpg" border="0">
then in a separate file, such as gallery.html, I need to get the src element of the img in index.html.
I tried writing this function:
function imgbbs(){
var x = document.getElementById('imgb').src;
document.getElementById('imgbb').src = x;
}
Then try using it in gallery.html:
<script src="script/script.js" type="text/javascript"></script>
<body onload="imgbbs()">
<img id="imgbb" src="" border="0">
But it doesn't seem to be working. How can I get the src attribute of an img in a different file?
A way to do this is to load a partial part of the index page using jquery it would be like this:
$( "#your_image_container_in_gallery.html" ).load( "index.html #imgb" );
When I click on the anchor tag, the image shifts from div#left to div#right. I want the image to be copied. Is this the default behaviour of prepend()? How can I avoid this problem?
The image is just a placeholder for a big div with many children.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-2.1.0.min.js"></script>
<script type="text/javascript" src="Scripts/JavaScript.js"></script>
</head>
<body>
<div id="left" style="float:left">
<img src="Images/Rooms/K1.jpg" alt="Alternate Text" height="200" width="200"/>
</div>
<div id="right" style="float:right"></div>
<a id="addImageToRight" href="#">Add Image toRight</a>
</body>
</html>
The jQuery is:
$(document).ready(function () {
$("#addImageToRight").click(function () {
var $image = $("#left img");
var imgCopy = $image;
$("div#right").prepend(imgCopy);
});
});
Is this the default behaviour of prepend()?
Yes. Putting a DOM node somewhere in the document requires removing it from wherever in the document it is already. It can't exist in two places at the same time.
var imgCopy = $image;
That copies the value of $image to imgCopy. The value is a reference to the object. (In JavaScript, variables can only every hold references to objects).
How to avoid this problem?
Create a copy of the DOM node. Call .clone() on the jQuery object and prepend the return value.
var imgCopy = $image.clone();
You need to update your code from
var $image = $("#left img");
var imgCopy = $image;
to
var imgCopy = $("#left img").clone();
For reference - http://plnkr.co/edit/R5yjTY06dKkqccwmxS62?p=preview
Perhaps take a look at jQuery's clone() to create a copy of the img element.
<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
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>
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..