I have a working button for changing the style of text in a text area. The button makes the text bold and unbold on second click and this works efficiently.
However what I want is for the image to change, each time that the button is pressed so that it is indicated that the text has had that formatting applied.
The HTML for the button is as follows
<a href="#" class="ButtonStyling" type="button" onclick="boldTextArea()" value="Bold"}><img alt='Bold Button' src='BButton.gif'></a>
I would be interested in any responses using Javascript or JQuery.
Without seeing your HTML, I have to guess how your image is displayed.
If it is an image, change the source via src.
var image = document.getElementById("yourImage");
image.src = "newImage.png";
If it is a background image, change the style
image.style.backgroundImage = "url(newImage.png)";
Related
I want to edit my Website and if i click on the image 01 shown text 1 and if i click on image 2 another text displayed. i want that the text is change by clicking on the images to make the useability more smooth anyone an idea ? i use wordpress and elementor pro. thank yu
i try to use the code :
var $ = jQuery $(document).ready(function(){
$('[data-showme]').on('click', function(){
var showme = $(this).attr('data-showme')
$('.all-images').hide()
$('#' + showme).show()
})
})
If you are using JavaScript then it is an easy way just put the onClick() event on the image - (onClick is an event that makes anything happen by clicking that desired button or image or anything).
If You want to Show some text with respect to the image then just use the text content inside of OnClick() then only it will be executed.
It will be an easy way👍
Hello Im new web developer. i get empty button error from wave.webaim.org - WCAG 2.0 Level AA Accessibility.
Thats the code.
<button type="button" role="presentation" class="owl-prev disabled h-hidden" title="none">
any help on that?
Thanks in advance.
"An Empty Button error means that one of the buttons present on the web page is empty or contains no text describing the function of the button. Or, if it’s an image button, the image contained in the button is missing alternative text."
Source: https://equalizedigital.com/accessibility-checker/empty-button/
It could be that there's no text on the button. If you don't want to put a visible text on the button, you could put a visually hidden text that is read by screen readers, sometimes called the sr-only class in css.
More info: How to hide a text and make it accessible by screen reader?
You need to have actual text inside the button. If you don't want to have a visible text because you style the button in a certain way, using PisteVW solution from above works just fine.
Alternatively, you can use the attribute aria-label="button text here" to give the button a label.
Also, you need to remove role=presentation as the button performs a clear action, it's not there to simply indicate presentational images, for example: https://www.w3.org/TR/wai-aria-1.1/#presentation
Hello I have added a name(text) input and a button that add to a label text from the input and I putted the label: on this image
I did this with javascript dom and css conatiner for the image and label.
How can I make a download button or save this image with the label inside of it?
I mean with the content that I added to the image?
So this is the code!
<a class="gray" onclick="javascript:window.open('https://forms.zohopublic.com/cpmovers/form/Locationupdates/formperma/0e5D2g0E23J372HC4Dek22J43');">Customer Form</a>
What I want to be done is so instead of the submit button. I want it to be the logo, so it can be clickable. I hope I explained myself well. An image turned into a clickable that leads to this whole code.
I don't see the image tag... but you need to set an onclick attribute for the image tag
example:
<img src='img/name.jpg' onclick='myFunction()'/>
and inside javascript you will have:
function myfunction(){
document.getElementById('formId').submit();
}
As i see that link re-directs you to a form, what you will need to do is to position the image where the submit button was and then add the script so when you click the image it will submit the form you have on your page
I was wondering if it's possible to have an HTML form with a text field and a button, wherein you enter a string (say 5) and on pressing the button, the image "image5.jpg", stored on the server, is rendered on the webpage.
I believe it boils down to coding a button "on-click method":
Read a text field and form a filename string for the image
Updating the image, preferably (OR redirecting the user to "http://.../image5.jpg" would do as well)
I'm not terribly familiar with much more than basic HTML, but I can hack it together if I know what will get the job done.
Thanks.
// DOM ready handler
$(function(){
// Click on change image button handler
$('#select').click(function(){
// Get the value entered in the number input
var image = $('#number').val();
// Change the source of the image
$('#image').attr('src', "http://somewebsite.com/image" + image +".jpg");
});
});
JSFiddle: https://jsfiddle.net/0rn00L4a/
There are no real images to show, but if you inspect the DOM you will see it changes the image to things like
<img id="image" src="http://somewebsite.com/image2.jpg">
So if you put in your correct image path, it will just show them immediately when you press the button.
You could just do it on the change event of the input, but that is a little jarring.