I want to insert a clickable image, that is, if any part of the image is clicked, it will either act like a button element, or more preferably, run a Javascript script.
I was thinking of inserting an image into a button element, but as far as I can tell, that would NOT just make the whole image into a button, but rather insert it into a button box.
How do I make a clickable image, that pulls up a script?
There are lots of ways to do this.
<img id="Img" src="img.jpg" />
Adding an onclick attribute:
<img id="Img" src="img.jpg" onclick="myFunction()" />
Adding onclick event listener from script:
document.getElementById( "Img" ).onclick = function() {
// img clicked
};
Put image as button background
<input type="button" style="background: url( img.jpg )" />
Related
When the user clicks a "Vacation" image on the left, a larger copy
of it will appear to the right of the images in the image with
an id of "currentimage" inside the "bigimage" div. (See the HTML file)
At the same time one of the following should appear below
the "currentimage": "Mountain Vacation", "Ocean Vacation", or "Desert Vacation"
depending on which image was selected.
this is part of the HTML code
<div id="bigimage">
<img id="currentimage" src="http://profperry.com/Classes20/JQuery/ocean.jpg" alt="ocean vacation" width="300" height="225" border="0">
<p id="imagedesc"></p>
</div>
This is part of the JS code
$("img").click(function ()
{
var mySrc = $(this).attr("src");
$("#currentimage").attr("src", mySrc);
$("#imagedesc").html(this.alt);
});
I also tried
$("img").click(function ()
{
$("#currentimage").attr("src", this.src);
$("#imagedesc").html(this.alt);
});
but when i click the image a larger copy of it is not appearing on the right
Browsers not reload image after change src. Try remove old element with old image and paste new element with new image src.
Or: How to reload/refresh an element(image) in jQuery
Your click handler is on any img this means that the #currentimage element is the only element which this handler is added. You are then setting the src to the src that it already is.
you instead want to change the src to something else. Here I set an initial smaller placeholder which is replaced with a larger one on click.
$("img").click(function() {
this.src = 'https://placeimg.com/500/500';
$("#imagedesc").html(this.alt);
});
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<img id="currentimage" src="https://placeimg.com/200/200" alt="ocean vacation" />
<p id="imagedesc"></p>
I am new to programming and it should be easy, however I can't understand how to do it. I need create 2 images on one button click, one image is main, another is like close X button. They must be connected and draggable.
This is my function: Js Fiddle link
<input type="button" id="truck" class="truckbtn" value="ADD Truck" onclick="addtruck()">
<div id="masina">
<div id="closebutton"></div>
<div id="truckshow"></div>
</div>
<Script>
$(document).ready(function() {
$(".truckbtn").click(function() {
var truckshow = $('<img height="200" width="100" src="images/Truck1.png">');
var closebutton = $('<img height="50" width="50" src="images/closeimage2.png">');
$('div').prepend(truckshow + closebutton);
truckshow.draggable();
closebutton.draggable();
});
});
</Script>
Here I have a sample code (JS Fiddle) using draggable() of Jquery UI for dragging components inside DOM.
My buttons style are from Bootstrap, you can also write custom CSS although I used a framework for saving time.
EDITS
Image is dynamically added on button click.
You can change image dynamically by changing src of <img/> tag using jquery.
let <img id="myImage"/> then you can set src by $("#myImage").attr("src","your link here");.
FIDDLE
I am trying to change the img src, and the text of an heading 1 (H1) and via a jquery click event.
Here is the HTML
<a href="#AF">
<img id="AF1" src="image_url">
<span class="text-center">Dude 1 AF</span>
</a>
So basically when someone clicks on the IMG with the ID AF1, then these HTML properties get changed
<img id="AF2_IMG" class="a-profiles-img" src="url_old" />
<h1 id="AF2_H1" class="text-center blue a-profiles-name">old_header</h1>
<p id="AF2_P" class="a-profiles-body">new_body</p>
And here is the Jquery that I created:
$('#AF1').on({
'click': function(){
$('#AF2_IMG').attr('src','new_image');
$('#AF2_H1').text('new_image_title')
$('#AF2_P').text('new_body_text')
}
});
Now this works as intended, but it's a little slow (loading the different image) and I have to repeat this 12 times. I'm asking if there is a more efficient way to do this? Thanks.
I got a page. Its a key shop website.
I want to make that when the customer clicks on the icon, for example windows7, it removes the other products beside it, and write its description and payment button.
I already succeeded in not allowing the page to refresh, and only view the content.
But the problem is the tab; I want to change it in the end of the page, and whenever I click on the icon for windows7 it opens to me the page I want, but from the top.
I'am using the following code:
<script>
$("div.haha").tabs("img.one > div", {effect: 'ajax'});
</script>
i just want it to change content and not to start from top
<div id="haha">
<img class="one" src="imgs/product1.png">
<img class="two" src="imgs/product2.png">
<img class="three" src="imgs/product 3.png">
<img class="four" src="imgs/product4.png">
</div>
Actually to access div with "haha" id you should use
$("div#haha")
selector.
I am changing the code, because I had this code on hand and it works pretty well from what I've seen and appears to fit all your needs.
Javascript: (tested with jquery 1.9.1)
<script type="text/javascript">
$(function(){
$("a[rel='haha']").click(function(e){
e.preventDefault();
/*
if uncomment the above line, html5 nonsupported browers won't change the url but will display the ajax content;
if commented, html5 nonsupported browers will reload the page to the specified link.
*/
//get the link location that was clicked
pageurl = $(this).attr('href');
//to get the ajax content and display in div with id 'haha'
$.ajax({url:pageurl+'?rel=haha',success: function(data){
$('#haha').html(data);
}});
//stop refreshing to the page given in
return false;
});
});
</script>
html example:
This is the code outside the div. This shouldnt be effected.
<br /><br />
Here are the links outside the div to show you how it works. IMG 2 will refresh page and change url because rel="haha" is missing from the url<br />
IMG 1
IMG2 - NO REL
IMG3
RESET
<br />
<br />
<br />
<div id="haha" style="border: 1px solid #ccc;">
IMG1
IMG2
IMG3 - NO REL
</div>
Just know, any link you want to load into the div needs a rel="haha" (which can be changed to whatever you want to call it). If you want the page to load completely (like changing pages), just leave out the rel="haha" from the url.
Demo of how the code works: http://kygar.com/code/haha.php
I am trying to open another image when I press the image button - I am completely new to html. I heard that you need to use the onclick to get that. Here it is what I am trying:
input type="image" src="img/gallery/5.jpg" onclick="img/floor.jpg"
Where 5.jpg is the thumbnail view and floor.jpg is the target image (present in another directory).
But the above piece of code is not working for me.
What is the correct approach?
Why this is failing ??
i used the solution to open a number of images
<img src="img/gallery/5.jpg"/>
<img src="img/gallery/6.jpg"/>
<img src="img/gallery/7.jpg"/>
<img src="img/gallery/8.jpg"/>
<img src="img/gallery/9.jpg"/>
<img src="img/gallery/10.jpg"/>
but every time it opens only the 10.jpg
Help
thanks
Why use an input and javascript in the first place ?
Just use a link
<img src="img/gallery/5.jpg">
Just use a an onclick javascript event to toggle the visiblity of the second image.
something like below.
<input type="image" onclick="image.style.display=inline;">
<img src="../5.jpg" id="image" style="display:none;"