there is html structure:
<a onclick="setString()">
<img alt="no" />
</a>
I need to get attribute of a,that had been clicked,e.g. alt.
How to know with setString() js function ,
image with what alt attribute is clicked?
I assume,that somehow with this,but don't know how.
onclick="setString(this)
///Javascript Code:
function setString(element){
var value = element.children[0].alt;
}
I would change my HTML to remove the bits that aren't needed...
<img alt="no" onclick="setString(this.alt);" />
Rather than wrapping the image in an anchor tag, style it with CSS if you want...
cursor: pointer;
Related
How can i replace image? Tag don't have id.
<img src="URL_1" />
I want replace URL_1 to URL_2
Some solution?
If you know the URL you can use
document.querySelector('img[src="URL_1"]').src = "URL_2";
If you don't know the URL and can use an id this would be it:
<img id="id" src="URL_1" />
document.getElementById("id").src = "URL_2";
Assuming that's the only image in the page you can use the Element.getElementsByTagName() to reference the element, and edit its src property:
document.getElementsByTagName('img')[0].src = 'URL_2'
The Selectors API is more appropriate as you can target the element with more details, using a CSS selector:
document.querySelectorAll('img')[0].src = 'URL_2'
If you can't add an id or a class maybe you can wrap your img tag with a div and use more specificity div .myclass img, last solution I see is if you know URL_1 you can select this img tag by the selector: img[src="URL_1"]
Give it an ID
<img id="img1" src="URL_1" />
Then
document.getElementById('img1').setAttribute('src', 'URL_2');
First of all, give an ID to your image
Html code
<img id="my_image" src="URL_1"/>
Jquery code
$("#my_image").attr("src","URL_2");
Or without using Jquery
document.getElementById("my_image").src="URL_2";
whats the proper way to fetch the value of img src trough the following structure. The code below is returning empty.
JS bin (click on smiley): https://jsbin.com/lelaxam/edit?html,js,output
NOTICE: When i remove the A HREF tag around the image i receive the image src, if i place the A HREF tags around IMG i dont receive the IMG SRC
HTML:
<td class="sim-row-edit" data-type="testtest" style="padding-right:10px">
<a href="http://crezzur.com" target="_blank">
<img src="https://img.smileys.nl/152/winky.png" alt="" border="0" width="42" height="42" />
</a>
</td>
JQUERY:
if (big_parent.attr("data-type") == 'testtest') {
$("#sim-edit-testtest .image").val(big_parent.children('img').attr("src"));
$("#sim-edit-testtest .url").val(big_parent.children('a').attr("href"));
You should use jQuery.data to fetch values of data- attributes, not jQuery.attr.
Once you have successfully selected your image, you can then just use .attr('src') as you have above.
You have a problem in your code though, you are trying to get the image incorrectly. Your HTML code shows:
<img id="sim-edit-testtest .image" src="https://img.smileys.nl/152/winky.png" alt="" border="0" width="42" height="42" />
So $('#sim-edit-testtest .image').find('img') is well off the mark. There should be no space between #sim-edit-testtest and .image in the selector, as it's not a child, it's one element with both the class and id, and there's no child img element, it already is the img element. Try the code below instead.
if ( big_parent.data('type') == 'testtest' ) {
$('#sim-edit-testtest.image').attr('src');
}
Truth be told, having .image in the selector is also a bit moot as IDs should already be unique within a page, so it can be simplified further to:
if ( big_parent.data('type') == 'testtest' ) {
$('#sim-edit-testtest').attr('src');
}
You have to use it like this:
$('#sim-edit-testtest img').attr('src');
This code grabs and display IMG SRC & A HREF like you can see in this example:
https://jsbin.com/lelaxam/edit?html,js,output
Only issue here is it grabs the FIRST img src if finds, how do i select the img src which i pressed on ?
$("#sim-edit-testtest .image").val($('img', 'a').attr("src"));
$("#sim-edit-testtest .url").val(big_parent.children('a').attr("href"));
My generated portion of page source is
<a target="_blank" href="/img/image001.png">
<img width="286" height="171" alt="" src="/img/image001.png">
</a>
and I need on page load to replace this a target with a rel so above link should be
<a rel="lightbox" href="/img/image001.png">
<img width="286" height="171" alt="" src="/img/image001.png">
</a>
I trid with after </body>
<script>
$(function() {
$('a[_blank]').removeAttr('_blank').attr("rel=","lightbox");
});
</script>
You need to use the attribute equals selector - you need to use the attribute name along with attribute value, also to remove you need to use the attribute name not value.
$('a[target="_blank"]').removeAttr('target').attr("rel","lightbox");
Your code looks for an anchor element with attribute _blank and then removes it, a anchor element like <a _blank href="/img/image001.png">
Also as #PaulDraper suggested move the script inside the body element
$(document).ready({
$('a[target=_blank]').attr('rel', 'lightbox');
})
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.