Sorry if it's a noob question !
I'm using a script to translate my page with this code:
<script>
var translations= { 'en' :
{'title' : 'Title', 'textimg' : 'English text'},
'fr' :
{'title' : 'Titre', 'textimg' : 'Texte français'}
};
function doTranslate(language) {
for(id in translations[language]) {
document.getElementById(id).innerHTML = translations[language][id];
}
}
</script>
And this html:
<img src="img/Fr-Flag.png">
<img src="img/UK-Flag.png">
<h2 id="title">Title</h2>
The problem comes when I use an image (little icon): the text changes, but src seems to disapear, so when the text change, the image is not displayed:
<img id="textimg" src="img/fav-rond.png">English text</img>
How to solve this ?
Please see this answer about content inside the img tags: Div tag within img tag
But a possible solution is to remove the id from img and create a new element around the text with that id. For example:
<img src="img/fav-rond.png" />
<span id="textimg">English text</span>
And a demo: https://jsfiddle.net/7j2ckw0r/1/
This should solve your issue.
document.getElementById(id).setAttribute("id", translations[language][id])
You shouldn't be using innerHTML to solve this issue.
The <img> tag does not allow any information within, it is a "Empty element"
If you add any text inside, that becomes an invalid HTML text.
What you can do is adding an alt attribute:
<img id="textimg" src="img/fav-rond.png" alt="English text"/>
I strongly recommend you to visit this link, you will find the optimal way to translate your html page in pure JavaScript code.
JQuery search dom elements just after rendering and replace keys by its corresponding values
It isn't possible to add text to an image tag, instead place a span element directly after the image and access that instead.
<img src="img/fav-rond.png" /><span id="textimg">English text</span>
Related
There is an img tag being placed on a hidden portion of my wordpress site through some java script. Everytime I run a scan on my site looking for accessibility errors, this pulls up on every page of every site. I was wondering if there is a way to add an alt tag to it saying "this is empty" or anything really, since it's impossible to reach or see anyway.
I have tried looking at other alternatives, but I haven't had any luck so far, so any help would be greatly appreciated. The good thing is it seems to have a class name attached so hopefully that helps.
<div class="className">
<img>
<div>
</div>
</div
This is all you need:
$('img').attr('alt', 'Whatever you want');
or if you need it based on the class name in your example:
$('.className > img').attr('alt', 'Whatever you want');
Yes, you can always add attribute to an image using jquery, do it like this
$('img').attr('alt', 'This is very nice image');
If your image have a class than you can use
$('.class_name').attr('alt', 'This is very nice image');
If your image have a ID than you can use
$('#id_name').attr('alt', 'This is very nice image');
With this script you can set a default alt tag for all images that have a falsy alt tag (no alt tag, empty string, etc).
Important to note is that alt tags have a reason. People who use a text oriented browser (like blind people) use those alt tag so they at least know what kind of image there is. It is also used by some browsers when an image can't be loaded. So make sure all images without an alt tag (in your jQuery selection) are always hidden if you want a default alt tag otherwise it could be annoying.
$('img').filter(function() {
return !this.alt;
}).attr('alt', 'this is empty');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="className">
<img src="https://dummyimage.com/50x50/000/fff.png&text=test">
<img alt="" src="https://dummyimage.com/50x50/000/fff.png&text=test2">
<img alt="has alt" src="https://dummyimage.com/50x50/000/fff.png&text=test3">
</div>
I want to change the image src on hover with javascript, but here is the twist
Here is my HTML
<div class="foo">
<div class="foo-2">
<form>
<input type="image" src="I want to change this on hover">
</form>
</div>
</div>
I reviewed the ansewr of this question CSS: Change image src on img:hover
here is a quote of the answer:
"
And if you think you can use some javascript code then you should be able to change the src of the img tag as below
function hover(element) {
element.setAttribute('src', 'http://dummyimage.com/100x100/eb00eb/fff');
}
function unhover(element) {
element.setAttribute('src', 'http://dummyimage.com/100x100/000/fff');
}
and the html be
img id="my-img" src="http://dummyimage.com/100x100/000/fff" onmouseover="hover(this);" onmouseout="unhover(this);" />
It is helpful, but I'm really having trouble targeting the type image in my code, so that I can change it with javascrit.
I don't think changing source on hover is such a great idea. why? the images need to load and they can take relative long time to load and confuse the user if nothing happens within the 1. second.
it'd be better if you pre-load both images and then use css to hide/show the correct image on hover. this way it will show instantly.
I'm a newbie to AngularJS. I am creating an example program.
In that I have an HTML tag which has to be used based on a condition.
If i apply "ng-if" to the tag the content under the tag is hidden.
In my scenario the content has to be displayed but, if only the condition satisfies tag has to be applied.
<a href="someurl" ng-if="a != 3>
<div> Text and image goes here </div>
</a>
If "a" is not equal to "3" then the content has to be displayed without href.
I would need some help to achieve this.
Thanks in advance...
JSBIN DEMO
You can use ng-attr-href to achieve that functionality:
<a ng-attr-href="{{(a==3) ? 'someurl' : undefined}}">
<div> Text and image goes here </div>
</a>
In this condition:
{{(a==3) ? 'someurl' : undefined}}
undefined will completely remove the href attribte.
I know this is super simple, but I can't work it out (I'm a designer).
I want to simply populate the href attribute value of the <a> tag, with the value of the src attribute of the <img> tag. So the image links to itself basically.
the image src will be updated through a super simple CMS and I want the link to dynamically update, instead of the user having to update the URL also.
I tried something like this, but it didn't work.
<a rel="lightbox[job1]" href="()document.getElementById("gal1_img1").src">
<img id="gal1_img1" src="images/gallery/job1/image-1.jpg">`enter code here`
</a>
You cannot inline JavaScript inside attributes the way you have currently. You can add a script to the page to do this:
<a id="link" rel="lightbox[job1]" href="#">
<img id="gal1_img1" src="images/gallery/job1/image-1.jpg">`enter code here`
</a>
<script>
document.getElementById("link").href = document.getElementById("gal1_img1").src;
</script>
try this as your <a>'s href:
href="javascript:window.location=this.getElementsByTagName('img')[0].src;"
Assuming there's only ever one image inside these <a> tags, this should work for anyone who's NOT running with javascript disabled.
try this.
var att = $('#gal1_img1').attr('src');
$("a[rel*='lightbox[job1]']").attr('href',att);
I am using Galleria and I need to wrap my images that Galleria puts into a slide with a link.
I was going to use this methodology: Give the <img> a bogus title= value and then append a <a> tag around the <img>, drawing the link I need from the title= tag.
This is the code I've got so far.
$("img#gallery").this.title.appendTo("img#gallery") { });
I'm trying to get the script to loop through all of the images and append the html.
I also don't know if I should be using .appendTo or .before and .after
That approach will work. You're looking for the wrap function:
var title = $('#test').attr('title');
$('#test').wrap('<a href="'+title+'" />');
This $.each will let you iterate through a series:
<img src="" class="test" alt="test" title="http://www.google.com" />
<img src="" class="test" alt="test" title="http://www.yahoo.com" />
$.each($(".test"), function() {
var title = $(this).attr('title');
$(this).wrap('<a href="'+title+'" />');
});
You could just listen for a click on the entire thing and then figure out if an image was clicked and if so which image and then change the location object.
Use $.each to iterate through all the images you want to wrap and then use
$('img#gallery').wrap('<a href='whatever'>)
to wrap it. It will automatically close the A tag.