I am working on a Phonegap android project.
I would like to know whether the DOM property will work for Phone Gap or not.Because,I tried implementing a condition such as
if(results.rows.item(val[1]).COLUMN_NAME==="")
{
document.getElementById("ID").src="img/abc.png";
console.log("abc image to be changed"+val[1]);
}
else
{
document.getElementById("ID").src="img/abc1.png";
console.log("no change "+val[1]);
}
HTML CODE:
I tried executing the program in 2 of the following cases in HTML
CASE 1:
<div id="ID" > <img src="img/abc1.png" onclick="abc()" /></div>
CASE 2:
<div id="ID" > <img src="" onclick="abc()" /></div>
when i run the program the Console statement is being displayed,but there is no change in the image.
AM I RIGHT IN THE WAY OF IMPLEMENTATION?
please guide.
div doesn't have the attribute src. so you need to give the id to img tag to change the src of image like that:
<div> <img src="img/abc1.png" id="ID" onclick="abc()" /></div>
Or you can change the image by the innerHTML property like this:
document.getElementById("ID").innerHTML = '<img src="img/abc.png" onclick="abc()" />';
Use any one which you want.
div tag does't have any src attribute .src attribute is img tag property . so get that id inside img tag . then only you can change the src attribute
Related
When I add this line off code, instead of showing the image, my page gets blank. How can I fix this?
<img>
src={"https://media1.s-nbcnews.com/i/newscms/2019_21/2870431/190524-classic-american-cheeseburger-ew-207p_d9270c5c545b30ea094084c7f2342eb4.jpg"} alt={''}
</img>
src is not the child component of tag. src is a attribute of tag.
<img src={"https://media1.s-nbcnews.com/i/newscms/2019_21/2870431/190524-classic-american-cheeseburger-ew-207p_d9270c5c545b30ea094084c7f2342eb4.jpg"} alt={''}
/>
check https://www.w3schools.com/tags/tag_img.asp for details.
You are using the img tag incorrectly, Please update it as :
<img src={'https://media1.s-nbcnews.com/i/newscms/2019_21/2870431/190524-classic-american-cheeseburger-ew-207p_d9270c5c545b30ea094084c7f2342eb4.jpg'} />
Also, recheck the image link as it shows unavailable.
img is self closing tag and it's required the src attribute. correct way to use img tag is:
<img src={"https://media1.s-nbcnews.com/i/newscms/2019_21/2870431/190524-classic-american-cheeseburger-ew-207p_d9270c5c545b30ea094084c7f2342eb4.jpg"} />
check https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img for more information
I have a image tag which is :
<img id="imageUpload" alt="your image" style="display: none;">
I have a base64 code(it is working) of which i have added in string:
var imgName="data:image/png;base64,"+base64codes+"";
console.log(imgName);
How to pass the string value inside the src attribute of image using jquery/javascript?
I tried to pass the imgName inside attr using jquery but it is not working.
$('#imageUpload').attr('src',imgName);
my console for imgName is :
Your code looks correct. Maybe you just have to remove the style 'display: none'
$('#imageUpload').attr('style', '');
below is my code
<img src="1.gif"></i>
<img src="2.gif">
as shown in the above code when user clicks on smiley image it changes the value of text area #chat_textarea values are different for different smiley images,above code works fine... but what if i have more then 100 smileys? is there any way i can change the value of chat_textarea dynamically...? because to load images Iam just for loop which loads all images 1 to given number...
Updated:Hi all I know that we can use classname
$('.add_smile').on('click', function(){
// Prepend the ALT of the image to the textarea
$('#chat_textarea').val( $('#chat_textarea').val()+ this.alt );
});
But my question is different...i can not add alt / value to each image, it should be loaded automatically,something like fetching ;) from json file by passing id ....is there any ways to fix in that way....
Below some simpeler html.
If you want to load them dynamicly, just use your language of choice to loop through an array:
// Php
foreach($smileys as $img=>$code){ echo '<img src="'.$img.'" alt="'.$code.'" />';}
// Javascript
$.each(smileys, funcion(index,smile){
$('#smileWrap').append('<img src="'+smile.src+'" alt="'+smile.alt+'" />')
});
<img class="add_smile" src="/img1.jpg" alt=":)" />
<img class="add_smile" src="/img2.jpg" alt=":(" />
<img class="add_smile" src="/img3.jpg" alt=";)" />
$('.add_smile').on('click', function(){
// Prepend the ALT of the image to the textarea
$('#chat_textarea').val( $('#chat_textarea').val()+ this.alt );
});
jQuery doesnt care what you add the click to, the image is just fine. If you want a pointer as mouse, just css that.
Now you can use php to loop and place as many images as needed. Images are required to have an alt, that's fixed. And we can easily access it in javascript, not needing extra html (the anchor) to get that.
My jsFiddle, with auto space-add if not present
Remove unnecessary links, add a ClassName and a data-val attribute to each smiley and modify your HTML like this:
<img src="1.gif" class="smiles_btn" data-val=':#'>
<img src="2.gif" class="smiles_btn" data-val='8D'>
<img src="1.gif" class="smiles_btn" data-val=':#'>
<img src="2.gif" class="smiles_btn" data-val='8D'>
Then use this JQuery:
$('.smiles_btn').click(function(){
$('#chat_textarea').val($('#chat_textarea').val() + ' ' + $(this).data('val')).focus();
});
Check JSFiddle Demo
I've got the following code (example):
<body>
<div id="obj1">
<span id="obj2">
<img src="someimage2.jpg" class="image" />
</span>
<img src="someimage2.jpg" class="image" />
</div>
<img src="someimage3.jpg" class="image" />
<button onClick="getUrl();">Get it?</button>
</body>
I need JavaScript to get the url of the image which is located at body >> obj1 >> obj2 >> img
I can imagine a markup similar to this...
function getUrl() {
alert(document.getElementById("obj1").getElementById("obj2").img.getAttribute("src"));
}
But (what a surprise!) it doesn't work, apparently.
Any help? :)
What I am trying to do (if this helps):
I've got an input and a button. Say I type this into input:
Cyber Dragon
This code is called upon the button is pressed:
'do something' or here: document.write('<input id="src" /><button onClick="getImg();">Get</button><br /><iframe src="http://yugioh.wikia.com/wiki/' + document.getElementById("src").value.replace(" ","_") + '"></iframe>');
Then, I'd need to get the image's src attribute from the site (which is "http://yugioh.wikia.com/wiki/Cyber_Dragon" in this case), but it's not all that simple.
The site stores it in an img, not an ID's Div, and can only be told from other images by its hierarchy position. Also, the img's src is complicated and not universal. For example, one's adress would be
http://images3.wikia.nocookie.net/__cb20060929013607/yugioh/images/thumb/e/e5/CyberDragonCRV-EN-SR.jpg/300px-CyberDragonCRV-EN-SR.jpg
and another would look like
http://images1.wikia.nocookie.net/__cb20090402012158/yugioh/images/thumb/a/a6/HonestLODT-EN-ScR-1E.png/300px-HonestLODT-EN-ScR-1E.png
Since you can only have one element in any document with any given id, you only need the one getElementById. You can then use getElementsByTagName to find the image and then the src property to find the image's source:
var imgsrc = document.getElementById('obj2').getElementsByTagName('img')[0].src;
i have a form in which I want to display a loader image only if the file upload field has any path in it, for that i thought of creating the image element in java script along with attributes: src, id and alt..
i am not aware of how to create elements using javascript. please help me.
This page has a good tutorial on dynamically creating DOM elements using javascript.
The standard way to do it is with the document.createElement function.
Small example which adds html code to a placeholder.
<script>
function example()
{
placeholder.innerHTML = "<img src='imagehere'/>";
}
</script>
<input type="button" value="Click" onclick="example();"/>
<div id="placeholder"/>
Using Jquery makes this nice and easy:
Javascript:
$('#MyElementID').html('<img alt="" src="Images/myimage.jpg" />');
HTML:
<div id="MyElementID"></div>
Renders as:
<div id="MyElementID"><img alt="" src="Images/myimage.jpg" /></div>