Get src of image in button - javascript

I have a button with an image on it. How can I get the src of that image on the button in JavaScript?
This is the HTML:
<button id="A8" name="B_Rook" type="button" style="background-color:#FFE4C4" onClick="check(this.id)">
<img id="B_Rook" src="B_Rook.jpg" HEIGHT=80 width=80/>
</button>

I am really not sure what you are trying to do but...
To get the src of the image in the button tag do this
<button id="A8" name="B_Rook" type="button" style="background-color:#FFE4C4">
<img id="B_Rook" src="B_Rook.jpg" HEIGHT=80 width=80 onclick="getImgId(this.src)">
</button>
to get an id of that img element do this
<button id="A8" name="B_Rook" type="button" style="background-color:#FFE4C4">
<img id="B_Rook" src="B_Rook.jpg" HEIGHT=80 width=80 onclick="getImgId(this.id)">
</button>
and a basic click handler will look like this for both
<script>
function getImgId(id){
alert(id)
}
</script>

You're really close, just move the onclick from the a element to the img element.
You probably want to remove the a element entirely, as it's invalid HTML (button elements can't contain any interactive content elements).
Also, unless you're writing XHTML (and you almost certanly aren't), there shouldn't be a / before the > at the end of your img tag. (It's harmless and allowed, it's just pointless.)

Related

What is the best way to make an image appear in a specific div in response to a button click event?

It is pretty simple. I just want to have a clickable word/button that will activate an image to appear into a div. What is the cleanest way to do this? thanks
Quickest way would be to add a blank image tag where you want the image to appear, and then use jquery to add/change the source
$('#button').click(function(){
$('#imgonclick').attr('src', 'http://example.com/myimage.jpg');
});
whhere #button is a button with class button, and #imgonclick is an img tag with class of imgonclick
Jquery is super easy, but if you have to stick to JavaScript you can try something like this:
<div id="image"></div>
<button id="imgBtn" type="button" onclick="displayBtn()">Click Me</button>
function displayBtn() {
document.getElementById("image").src = "something.gif";
}
OR... if the div already has an image src property set, just show it.
<div id="image" src="something.gif" style="display: none;"></div>
<button id="imgBtn" type="button" onclick="displayBtn()">Click Me</button>
function displayBtn() {
document.getElementById("image").style.display = "block";
}

Repeated elements' onclick event only works for first row

Below you will find my code I am using to pull the data from the table along with the image I want to repeat with each table row listed in the last button tag Class=plusbtn
{
$event .= ' <div style="border-bottom:1px solid gray;padding:2px;width:100%;float:left;"><div id="eventslist" onclick="goevent('.$row['id'].');">
<div style="width:100%;float:left;">
<h4 style="margin:0;"><span id="eventuser" style="width:50%;float:left;text-align:left;font-size:14px;"><img src="https:///login/profile/'.$row['profile_img1'].'" style="width:35px;height:37px;border-radius:20px;margin-left:-4%;background:url(http:///img/person-placeholder.jpg) no-repeat center" class="img-rounded"> <b>'.$row['user'].'</b></span><span style="float:right;text-align:right;font-size:12px;margin-top:9px;margin-right:-25px;">Posted: '.$row['stdate'].' </span><br/><br/><b><span style="font-size:20px;float:left;">'.$row['fname'].' </span></b></h4>
</div>
<div style="width:109%;float:left;">
<img src="http:///login/image/'.$row['name'].'" style="width:100%;height:35%;border-radius:10px;margin-left:-4%;background:url(https:///img/load.gif) no-repeat white" class="img-rounded">
</div>
<div style="width:100%;float:left;">
<p style="margin-bottom:0;">'.substr($row['description'],0,110).'...</p>
</div>
</div><div><button class="plusbtn" onclick="plusrate(\''.$likecount.'\');"><a onclick="document.getElementById(`myImage`).src=`https:///img/fav4.png`"><img id="myImage" src="https:///img/fav3.png" style="opacity: 0.7;height:25px;max-width:100px"></a></button><span id="likeqnty" class="likeqnty">0</span> <b>Likes</b></div></div> ';
}
using this set up the button image appears for every entry but I can only click the button at the first entry on my page. When I type echo around the button (echo"button") appears on the page
How can I make the button repeat with every table entry and work correctly switching from fav4 to fav3.
You problem stands in the fact that IDs should be unique. But all your images have the same ID.
<a onclick="document.getElementById(`myImage`).src=`https:///img/fav4.png`">
<img id="myImage" src="https:///img/fav3.png" style="opacity:0.7;height:25px;max-width:100px">
</a>
Clicking on any of those links will always change the FIRST image with id myImage.
You'd like to change your onclick javascript to target the image respectively to the current click target.
<a onclick="this.getElementsByTagName(`img`)[0].src=`https:///img/fav4.png`">
<img id="myImage" src="https:///img/fav3.png" style="opacity:0.7;height:25px;max-width:100px">
</a>
In this code, we use this as it is the current DOM element that received the click. And retrieve the image inside it, and change its src value. This makes sure that the targeted image is relative to where the user clicked.

change text content on mouseover to img alt property

i have some img tag with class name box, and a p tag with class title, i need to change on mouseover and change text content of p tag to alt property of img that clicked, please help me.
<table style="width:100%;padding-top:200px;border-bottom:5px solid black;">
<tr style="text-align:right;width:100%;font-size:small;text-align:center;">
<td class="box" style="width:22%;">
<a href="http://xxxxxx.com">
<img src="Images/photo_2016-06-21_12-13-45.jpg" alt="link1" class="imgLogo" />
</a>
</td>
<td class="box" style="width:22%;">
<a href="http://xxxxxxxxx.com">
<img src="Images/photo_2016-06-21_12-13-18.jpg" alt="link2" class="imgLogo" data-tree="oak" onmouseover="reply_click(this);"/>
</a>
</td>
<td class="box" style="width:22%">
<a href="http://xxxxx.com/pwa">
<img src="Images/photo_2016-06-21_12-14-00.jpg" alt="link3" class="imgLogo" />
</a>
</td>
<td class="box" style="width:22%">
<a href="http://xxxx.com">
<img src="Images/photo_2016-06-21_12-13-51.jpg" alt="link4" class="imgLogo" />
</a>
</td>
</tr>
</table>
and my p tag:
<p style="text-align: center" id="title-links" class="title-links">content here</p>
i want to write it with javascript, i dont want to use jQuery.
I coded solution for this question using by javascript.
Add onmouseover and onmouseout event properties into the img tag. As below:
<img src="Images/photo_2016-06-21_12-13-45.jpg" alt="سیستم مدیریت جلسات" class="imgLogo" onmouseover="changeText(this)" onmouseout="changeTextToDefault()"/>
After this, add the following js functions linked to above mouse events.
This changeText() function going to execute when mouse pointer come over the displayed img tag. After, it changes text content of p tag to the value of alt property on img tag.
function changeText(xTag){ document.getElementById("title-links").innerHTML =xTag.getAttribute("alt");}
Also, changeTextToDefault() function going to execute when mouse pointer leaves over the displayed img tag. And, it changes text content of p tag to the default text.
function changeTextToDefault(){ document.getElementById("title-links").innerHTML = "سیستم مدیریت جلسات";}
Here is demo
$(".imgLogo").on("mouseenter", function() {
$("#title-links").text($(this).attr("alt"));
});
Also, please note that the class names you gave in your are different to the ones your supplied in your code...
This code also doesn't require a onmouseover HTML attribute on the img
Put this script in you page.
function reply_click(e) {
$('.title').text(e.alt);
}
Use onmouseover and onmouseout
Script
function showalt(elem){ $('#title-links').text(elem.alt); }
function showdefault(elem){$('#title-links').text('سیستم مدیریت جلسات');}
Here is a demo
On removing mouse default <p> tag content will display

Removing an image and showing this removed image in the deleted section

I have one div "upload" where various images are displayed and each image has an remove option which if clicked on hides the image.
I need to show the particular hidden images in below deleted section.
HTML
<div id="upload">
<a href="javascript:void(0);" onclick= remove()> Remove </a>
<img src="pic1.jpg">
</div>
<div id="deleted">
</div>
JS
function remove(){
$("upload").hide();
}
If I click on remove option in div "upload" then I need to hide that image and simultaneously show that image in div "deleted".
I've done some changes your original code.
HTML
<div id="upload">
<a>Remove</a> <img src="pic1.jpg" />
<a>Remove</a> <img src="pic2.jpg" />
<!-- etc. -->
</div>
<div id="deleted"></div>
JS (with jQuery)
$(function() {
$("#upload a").click(function(e) {
$(this).next("img").appendTo($("#deleted"));
$(this).remove();
});
});
By using jQuery, you can dynamically bind the click event to every a inside #upload. Then, relatively to the clicked a, find the next img, append it to #deleted (with appendTo), and finally delete the clicked a.
Here I have a sample JSFiddle http://jsfiddle.net/x3f6L9re/ with a demonstration how the problem can be solved.
Since you're intending to use jQuery, please don't add the function call in the HTML.
This line:
<a href="javascript:void(0);" onclick= remove()> Remove </a>
is thus obsolete. I used the tag button instead of a, which fits better here.
My code would be:
HTML
<div id="upload">
<figure>
<button type="button" role="button">Remove</button>
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/9/9e/JQuery_logo.svg/524px-JQuery_logo.svg.png" alt="Image">
</figure>
<figure>
<button type="button" role="button">Remove</button>
<img src="https://upload.wikimedia.org/wikipedia/commons/d/d3/Crystal_source.png" alt="Image">
</figure>
<figure>
<button type="button" role="button">Remove</button>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/ca/AngularJS_logo.svg/695px-AngularJS_logo.svg.png" alt="Image">
</figure>
</div>
<div id="deleted">
</div>
I enclosed every image in a tag figure for better demarcation.
CSS
#upload, #deleted, figure {
border: thin solid black;
}
Adding border for visualisation of the effects.
And here is the jQuery:
JavaScript
$('button').click(function () {
$('#deleted').append($(this).next());
$(this).next().hide();
$(this).hide();
$(this).parent().css('border', 'none');
});
When a button is clicked its next sibling, which is the image, is appended to the div with id="deleted". Then the next sibling of the button, the image, is hidden, together with the button itself. For cosmetical purposes the border of the parent element - figure - is removed.
You can further enhance the code.
follow the below steps
<div id="upload">
Remove
<img src="pic1.png"/>
</div>
<div id="deleted">
</div>
Javascript part
$(document).ready(function() {
$("#removebutton").click(function() {
$("#deleted").html($("#upload").find("img"));
});
});
Check this working fiddle http://jsfiddle.net/zzpgn6zr/
Let me know if it is helpful

In an HTML page I need to anchor to a tag on mouseover

<a href="#anchor1">
<img src="http://www.test.com/images/test/test.png" width="80" height="150" />
</a>
<div id="anchor1">...</div>
When I mouse over test.png I need it to scroll the page to #anchor1 ..help_me
Use Javascript inside the onmouseover event:
<img onmouseover="window.location.hash = 'anchor1'" />
Note that you don't use the '#' character.
Also, you are not naming the anchor correctly. It should be:
<a name="anchor1" .... instead of href.
I'm not sure you're using "anchor" in the generally accepted sense.
the tag is a "anchor" tag that is used to wrap around an image or text link, or now virtually any DOM object it consists of either a href tag, which is it's target, or a name tag in which case it IS a target. so a page with
<a id="part1"/><h3>part 1</h3></a>
and
<img src="..." onMouseover="$.scrollTo('#part1');">
clicking on the image would make the page scroll so that the h3 containing "part1" would be at the top of the page.
to do it with jQuery and mouseOver you'll need to use jQuery scrollTo() then you can define your speed and easing.

Categories