I am Building a Javascript app
Now I want to have a image button that I have given already now I want to change the image to another image on clicking current image.
When i click again I want to get back the old image please any one help me by giving a coding example pls..
Try this:
function diffImage(img)
{
if(img.src.match(/blank/)) img.src = "black.jpg";
else img.src = "blank.jpg";
}
HTML
<img src="black.jpg" id="image1" onclick=diffImage(this) />
Just try to change image path as per your requirements or you can add multiple images.
DEMO.
Hope this work.
You could also do it with only using CSS if you wanted to.
Just make a checkbox so you can click it without having to trigger an event and put the image in there and then have a different image for when it has been clicked.
<input type="checkbox"/>
And your CSS:
input[type="checkbox"] {
content: url(image url here);
}
input[type="checkbox"]:checked {
content: url(different image here);
}
I don't remember where I learned this trick, but it's worked for me in the past.
Related
I am quite new to Angular. My exact problem statement is -
I want to show a default image. If i click on the image, File selector window should open. When i select an image, i should be able to see and edit the image and finally this image should override the default image and also send this image to an API and display existing profile image if any. I want to do all this using HTML and Angular 4.
Please point me to any link if a solution to this problem already exists.
I have just been able to open the file selector till now by doing this -
<div>
<ion-input type="file" style="display: none" ngModel (change)="getFiles($event)"></ion-input>
<img src="assets/imgs/uploadImage.png" class="form-control" style="width : 20% ; height : 15%" (click)="selectFile()">
</div>
and
selectFile(): void {
let element: HTMLElement = document.querySelector('input[type="file"]') as HTMLElement;
element.click();
}
public async getFiles(event) {
console.log(event.target.files);
}
To show the profile image again, it's depend on how is the api server store your image? what is the format in that api server send an image to you, binary, cloud url...?
But for choose file and send it to server you can take a look this post...
https://www.academind.com/learn/angular/snippets/angular-image-upload-made-easy/
I've got a relatively complex svg depicting a cell embedded into my html page via an tag. If you hover over certain paths of the svg (e.g. the nucleus), I've already managed to get them to change colour, and I've added a tooltip which shows a tiny window with a bit of text. So far so good.
I've also got a bunch of simple html checkboxes which are related to the svg (i.e. they are labelled 'nucleus' etc). All clicking on these checkboxes does is to set their value to 1.
Now, what I really want to achieve is to be able to click on a svg path (e.g. nucleus) which then
changes the color of the path - this I've managed to do with a simple function:
function buttonClick(evt){
document.getElementById("nucleus").style["fill"] = "yellow";
}
and then a
onmouseup="buttonClick(evt)"
in the corresponding path.
selects the corresponding checkbox. (My supervisor likes to be on the safe side and is all about browser compatibility so he wants the plain checkboxes as a backup, so unfortunately I can't just hide them behind the svg or something like that...)
On second click, everything needs to be reversed/unselected
Now, is that possible?
All I could find was:
- how to replace a checkbox by an entire image (not what I need, just a svg path) OR
- how to make style checkboxes in svg/css. (Nice, but also not what I need) OR
- how to select a checkbox in jquery. I've tried this
$('.comp_nuc')[0].checked = true;
but it doesn't seem to do anything.
Give this a try:
<!DOCTYPE HTML>
<html>
<head></head>
<body>
myCheckbox:<input onClick=myCheckChecked() id=myCheckbox type="checkbox" />
<svg width=400 height=400>
<circle id="myCircle" onClick=circleClicked() cx=200 cy=200 fill=red r=100 />
</svg>
<script>
function circleClicked()
{
if( myCircle.getAttribute("fill")=="red")
{
myCircle.setAttribute("fill","yellow")
myCheckbox.checked=true
}
else
{
myCircle.setAttribute("fill","red")
myCheckbox.checked=false
}
}
function myCheckChecked()
{
if(myCheckbox.checked==true)
myCircle.setAttribute("fill","yellow")
else
myCircle.setAttribute("fill","red")
}
</script>
</body>
</html>
How can I create a link that doesn't show its information at the bottom left or right (this depends on the link's position) when you hovering a hyperlink?
Lets say that we have a link like this:
Users
and we want to hide its information or more precisely its hyperlink information that's displayed at the bottom left corner of the browser, like the example on the image below:
Now, I know this is possible because Stack Exchange network sites itself uses this for the "Welcome Banner" displayed on the front page for the very first time you visit each site.
If you hover any of the links:
Anybody can ask a question
Anybody can answer
The best answers are voted up and rise to the top
You'll see that no hyperlink information is displayed. Check out image below to see "Welcome Banner"
It cannot be done with pure html and css. You would have to use javascript for this. Showing the link of an anchor tag is just how most browsers work. Also the user expects to be able to see where he will be redirected.
But it can be done: you can avoid using an anchor tag. Then have another attribute hold the href - like "data-href". Then bind a click event on the a tag that redirects based on this attribute.
I would however, not do this - as I am uncertain if crawlers would see the link.
This is how it can be done, but note that snippets cannot redirect outside SO :)
var aTags = document.querySelectorAll('span[data-href]');
for(var i = 0; i < aTags.length; i++){
var aTag = aTags[i];
aTag.addEventListener('click', function(e){
var ele = e.target;
window.location.replace(ele.getAttribute('data-href'));
});
}
span[data-href]{
cursor:pointer;
}
<span data-href="http://www.google.com">test</span>
After digging even more deeper, I've found a more simpler and easier solution for it on this w3schools article and also with the help of this question in SO I could manage it to open on a new window:
<button id="anchorID" >Go to page</button>
$("#anchorID").click(function() {
window.open(
'http://www.w3schools.com',
'_blank' // <- This makes it open in a new window.
);
});
Jsfiddle live example: http://jsfiddle.net/6sLzghhm/
Remove the href="whatever" from the link and open link by calling a function. This completely removes the link preview on the bottom left of the page.
HTML-
<a (click)="openUrl('https://google.com')">
JS-
openUrl(url: string): void {
window.open(url, '_blank');
}
The stackoverflows Anybody can ask a question-Link is not a hyperlink. Its a HTML Element (in this case a li-Element):
<li id="q">Anybody can ask a question
</li>
with the CSS cursor: pointer; and a click-Eventlistener.
The easiest answer is just use-
<p onclick="window.open('Your Link')">Blah Blah Blah</p>
Easy!
You can also open more links at a time-
HTML:
<p onclick="OpenTwoLinks()">Google And StackOverFlow</p>
Javascript:
function OpenTwoLinks() {
window.open('https://google.com');
window.open('https://stackoverflow.com');
}
I have a little css snippet here: http://jsfiddle.net/cr6Hm/ (Similar example can be found on http://9gag.com/)
Basically, it shows a small div on the Notifications link with New text written on it.
Right now, New text is writtenon the div using pseudo:after and it works.
// This one works
.text-new:after {
content: 'New';
}
However, I want to change New text dynamically. (e.g I want to display amount of notifications instead of new)
I don't know how can I do it since I don't exactly know how pseudo:after works.
Basically, it should be something like this:
<span class="popup popup-greenish">
<i class="text>{{ $amount_notifications }}</i>
Notifications
</span>
Can anybody help?
This requires an attribute such as this:
<span class="test" data-count="123">...</span>
And CSS:
.test:after {
content: attr(data-count);
}
Note that the attribute MUST be on the element that the psuedo-element belongs to.
I wonder if someone can guide me on how to remove the url label that appears at the bottom of the page when you hover over an anchor (I wonder if it's even posible). I've googled a lot and didn't find any answers.
Suppose I have
<a href="www.somepage.com" title="The Page">Link< /a>
in the bottom of the page there will appear a tooltip/label showing "www.somepage.com".
Please see here for an example
Thanks in advance!
You can use either Javascript or JQuery.
For example, you can set to A attribute "href=#" and add an attribute url=www.somepage.com something like this:
Link
If you click over this nothing happen.
Now, you need to apply with javascript or JQuery click event. The next example is using JQuery and Javascript:
At the bottom of page's body:
<script>
$('#link').click(function() {
var url = $(this).attr('url');
window.location.href=url;
});
</script>