replace onclick button with image javascript [duplicate] - javascript

This question already has answers here:
Adding background image to button using CSS
(2 answers)
Closed 7 years ago.
im currently trying to style my javascript quiz by replacing the "submit answer" button with a image so instead of clicking the button to submit user can click the image. The button once clicked executes a function which checks the answer.
Here is the original button code ive used, any ideas how to replace with image>
"<button onclick='checkAnswer()'>Submit Answer</button>";
many thanks

You can just add your img as an <img> tag, and an an onClick to that object:
img = document.createElement("img");
img.src = "https://www.google.com/images/srpr/logo11w.png";
img.onclick = function (){
alert("clicked!");
};
document.body.appendChild(img);

Hi in your Html you can just place the image and in your script you can place the function that you want to execute.An example from your code.
<img id="myimagebutton" src="image.png" alt="Submit Answer" onclick="checkAnswer()" />
inside your javascript:
function checkAnswer(){
var mybutton = document.getElementById("myimagebutton");
var answer = document.getElementById("answerbox").value or .innerHTML;
// the element that contains the answer ex answerbox depending on the type
//execute somelogic
}
If you want some label under the image "button" search for this html5 future <figcaption>

Related

Onclick Image button - Logic not making sense [duplicate]

This question already has answers here:
Difference between object.src and object.getAttribute('src')
(3 answers)
Closed 2 years ago.
I'm having a very confusing time with this very simple onClick function in Javascript/html. I know there are many questions on this but couldn't quite find an answer given what my script does (Or doesn't in this case). It should be simple but for some reason the logic is just not working as I expect it too.
<h1>The onclick Event</h1>
<img id="onoff" onclick="changeImage();" src="images/Off Button.jpg" width="245" height="238">
<p>Click on button to turn "on"</p>
<script>
function changeImage() {
var image = document.getElementById("onoff");
if (image.src.match("Off Button.jpg")){
image.src = "images/On Button.jpg";
}
else{
image.src="images/Off Button.jpg";
}
}
</script>
So as you can see this should take the original "off button" image and swap it to "on button" when it is clicked provided it is showing the "Off Button.jpg".
However, it does nothing, using the Chrome developer tools I can see the script doesn't even fire. But when I make these changes:
if (image.src.match("Off Button.jpg")){
image.src = "images/Off Button.jpg";
}
else{
image.src="images/On Button.jpg";
It now fires and changes the Button to "On Button" but does not fire again to change it back. For me, this makes no sense logically but I might just be missing something really obvious. I know this is pretty basic but any help or explanation would be appreciated.
I did some changes to the code and now it's working.
I used the relative path with ./ to img src and mostly you should avoid use spaces to name images or anything else - spaces always cause problems ;)
<h1>The onclick Event</h1>
<!-- relative path and no space in name on src -->
<img
id="onoff"
onclick="changeImage();"
src="./images/off-button.jpg"
width="245"
height="238"
/>
<p>Click on button to turn "on"</p>
<script>
function changeImage() {
var image = document.getElementById('onoff');
if (image.src.match('off-button.jpg')) { /* no space in name */
image.src = './images/on-button.jpg'; /* relative path and no space
in name */
} else {
image.src = './images/off-button.jpg'; /* relative path and no space
in name */
}
}
</script>
Note - Remember to rename the images inside the images folder as well

changing img while clicking button

I have a jsp page that has buttons, and when i click the button a modal will open, and whatever happens inside that modal is linked with a js file (no more jsp). So here is my table inside modal (js file) :
html = '<table style="width:400px;height:250px;">'
+ '<tr><td title="grp"><img id="groupBtn" src="group.png"></td>'
+'<td title="1st"><img id="1stBtn" src="1st.png""></td>'
as you can see, it's html code in js file and not normal code from jsp. (I don't know the exact term.)
Therefor I can't write the <style></style> tag for that table made in js file.
What I want to do:
change the image while I'm clicking the button; not mouse enter, not image change, but a:active.
My problem:
it's in img tag and not a tag
so i tried
+ '<tr><td title="그룹"><a id="test1><img id="groupBtn" src="group.png"></a></td>'
this but the problem is i don't know where to put
#test1:active{
background-image : url('clicked.png');
}
while googling i found out this won't work because this is not how you change the src in img tag.
html = '<table style="width:400px;height:250px;">'
+ '<tr><td title="grp"><img id="groupBtn" src="group.png"></td>'
+'<td title="1st"><img id="1stBtn" src="1st.png""></td>'
^ How should I reform this <img id=> to something that could work with a:active tag? Or, should i never even use a tag and just change the whole tag into something else? plus, if i want to give style to elements that were created in js file by html, where should i add the style tag?
To save your precious time helping me, i want to summarize a bit,
I want the image on my button to change only when my mouse is clicked (pressed more precisely) and then my mouse is no more pressed, i want my button image to return to original image. Thats why I said i want something that works like a:active tag cause it only changes your css when the mouse is pressed and changes back when mouse isnt pressed anymore !
If you just want to change on click,you could add a onClick handler in a script tag instead of changing it via css.
<a id="test1" onclick="changeImgSrc()"><img id="groupBtn" src="group.png"></a>
Somewhere in your js file,have this function.
function changeImgSrc(){
var groupImg = document.getElementById('groupBtn');
groupImg.src = "clicked.png"; // path of the img
return false // required to prevent default browser behaviour.
}
This might help you.
function imgToNew(){
var image= document.getElementById('groupBtn');
image.src = "newImage.png";
}
function imgToOrig(){
var image= document.getElementById('groupBtn');
image.src = "group.png";
}
<a id="test1" onmousedown="imgToNew()" onmouseup="imgToOrig()"><img id="groupBtn" src="group.png"></a>
Another option using css classes.
.image{
height:400px;
width:600px;
background: url('https://picsum.photos/200/300') no-repeat;
}
.image:hover{
background: url('https://picsum.photos/250/450?grayscale') no-repeat;
}
<div class="image"></div>

Create an img element into <a> tag using javascript

I want to embed an image inside an tag after the image on tag loaded.
So the sequence goes like this...
<a id="anchorID">
<img onload="MyFunc(anchorID)>IMAGE1</img>
//..After image 1 loaded add
<img>IMAGE2</img>
</a>
<script>
function MyFunc(anchorID)
{
var anchorElement = document.getElementById(anchorID);
//I want to create an image tag inside the anchorElement
}
</script>
Thanks for the help.. T_T
Here's a solution, just add onload="addNextImage('#id_in_which_to_add_new_image', 'second_image_url')" to the image you want to load first. In the next example, ignore the width and style (I put them there to be able to test the functionality, making the image smaller so I don't need to scroll to see the behavior - I chose a huge image to make sure everything works as it should, and the border makes it appear sort of like a progress bar =)
<script>
function addNextImage(selector, url) {
var where = document.querySelector(selector);
if (where) {
var newImage = document.createElement('img');
newImage.src = url;
where.appendChild(newImage);
}
}
</script>
<a id="anchorID">
<img onload="addNextImage('#anchorID', 'http://animalia-life.com/data_images/wallpaper/tiger-wallpaper/tiger-wallpaper-01.jpg')" src="http://hubblesource.stsci.edu/events/iyafinale/support/documents/gal_cen-composite-9725x4862.png" width="400px" style="border: 1px solid black" />
</a>
This should work on most browsers today: IE8+ (as long as you use basic CSS2.1 selectors as the first argument), and pretty much everything else in use. (IE8+ because it depends on querySelector)
I think what you are looking for is
Javascript appendChild()
var node = document.createElement("img");//Create a <img> node
node.src="SomeImageURL";
firstImage.appendChild(node);
JQuery append()
$("#firstImageID").append("<img src="SomeImageURL"/>");
see links for more info
Javascript
jQuery
You can use the following to add an image to the anchor tag
function MyFunc(anchorID) {
var anchorElement = document.getElementById(anchorID);
if (anchorElement) {
//I want to create an image tag inside the anchorElement
var img = document.createElement("img");
img.setAttribute("src", "yourImagePath");
anchorElement.appendChild(img);
}
}
Hope that helps.

Activate Pre-load onclick from a different page

I have some links at the bottom of my webpage:
http://puu.sh/aQHbz/911cfd78b8.png
I want each one of the floor links to display the corresponding floor on a separate page:
http://puu.sh/aQHpR/dd5625150e.jpg
Basically, I want each link to preload the picture so that when you click on the floor 2 link for example, the 2nd floor map is already loaded on the next screen.
I don't know if I can do this only using JavaScript and HTML. Any help is appreciated. Thank you. Here is my code:
JavaScript:
function showstuff(boxid){
document.getElementById(boxid).style.display='';
}
function hidestuff(boxid){
document.getElementById(boxid).style.display='none';
}
function pic(DivID,ImageName)
{
document.getElementById(DivID).innerHTML="<img src=/studentcenter/images /"+ImageName+">";
}
You can show the images in new window. Then If the window already opened you can access it and change its href.
Here is the html part
<img src="http://puu.sh/aQHbz/911cfd78b8.png" onclick = "newImage(this.src)"/>
<img src="http://puu.sh/aQHpR/dd5625150e.jpg" onclick = "newImage(this.src)"/>
Here is the javascript part.
var win = false; //window exist variable
function newImage(e){
if(win.open){
win.focus() //Focus to map window
win.location.href=e; //Change to new image
}else{
win = open(e, 'example', 'width=300,height=300'); //Open a new window with the image url
}
}
You can see the solution on fiddle.
You must put javascript part to head or before your images.

Way to detect broken images in javascript? [duplicate]

This question already has answers here:
jQuery/JavaScript to replace broken images
(32 answers)
Closed 6 years ago.
I need to be able to detect if an image is broken and replace with a default image if the image link is broken. I know i could do this with an image proxy, but was hoping to do it on the fly with javascript.
I believe it's the onerror event of the img element. onerror=function(){} though i've never used it.
As any event the onerror will propagate upwards on the DOM, so you could make a generic handler for this type of errors.
<script type="text/javascript">
jQuery(document).bind('error', function(event) {
console.log(event.target.src);
});
</script>
You can use <img onerror='doWhateverFunction()' etc etc
http://msdn.microsoft.com/en-us/library/cc197053(v=VS.85).aspx
Example of code:
<script language='javascript'>
function defaultImage(img)
{
img.onerror = "";
img.src = 'default.gif';
}
</script>
<img alt="My Image" src="someimage.gif" onerror="defaultImage(this);" />

Categories

Resources