I'm using a combination of html and very basic jQuery in order to make an img that functions like a button so that when the img is clicked, the src of the image (src1) changes to another src (src2, that being the image of the button having been pushed down).
I'm trying to make it so that if that same image (now src2) is clicked, then it changes back to the original src (src1).
I hope that wasn't a headache to understand, and I can clarify if needed.
Here's what I have for code:
<!--Html-->
<body>
<img id="pixelbutton" src="images/pixelbutton.png" onClick="pixelbuttonclick()" />
</body>
/* jQuery */
function pixelbuttonclick() {
var pixelbutton = document.getElementById("pixelbutton");
if (pixelbutton.style.src=="images/pixelbutton.png") {
document.getElementById("pixelbutton").src="images/pixelbutton_press.png";
}
else if (pixelbutton.style.src=="images/pixelbutton_press.png") {
document.getElementById("pixelbutton").src="images/pixelbutton.png";
}
}
I'm a huge noob, so less complicated answers, if possible, are appreciated.
I recommend to place your function in head section for consistency if you haven't.
Your "pixelbutton.style.src" was wrong since the src is an attribute and not in css, but manipulating URL is rather difficult. I agree with Amareswar's answer to use background image in css.
Another way I did this is using the jQuery code:
<script type="text/javascript">
$(document).ready(function(){
$("#pixelbutton").click(function(){
$("#pixelbutton").css({'display':'none'})
$("#pixelbutton2").css({'display':'block'});
})
$("#pixelbutton2").click(function(){
$("#pixelbutton2").css({'display':'none'})
$("#pixelbutton").css({'display':'block'});
})
})
</script>
and modifying your body code:
<img id="pixelbutton" src="images/pixelbutton.png" />
<img id="pixelbutton2" src="images/pixelbutton_press.png" style="display: none;" />
Instead of repalcing URL can use a div with background-image css property and set another class on click of the div with another image as background image
Related
So this:
<html>
<head>
<style>
img{href:self}
</style>
</head>
<img src="./Sampleimage"/>
</html>
would basically be the code I need, but since I don't know how or even if there is an option to do this, I figured, I have to ask someone more intelligent than me.
I kinda have to do this because I have about 200 images in this html Document, and every single one of them has to link to itself. So a seperate <a> tag for every image wouldn't be very stylish.
Expanding off of WillardSolutions' comment...
document.getElementById("myImg").addEventListener("click", function() {
window.open(this.getAttribute("src"));
});
.clickable {
cursor: pointer;
}
<img id="myImg" class="clickable" src="https://www.w3schools.com/images/compatible_chrome.gif"/>
Open your browser console to see the opening of the URL being blocked...
If you want it to open in a new window/tab use:
window.open(this.getAttribute("src"), '_blank');
Nice idea, but no, as the commenters above have explained.
What you can do is get the source URL of each image using jQuery and append it to the parent <a> element. I would do this on page load rather than on clicking the image, as then the images are ready to click.
I would also suggest using a thumbnail version of the image, otherwise it will take ages for the page to load. (If you do that, you will need to put all the thumbnails in a subdirectory and then remove that subdirectory from the link URL using a replace function).
$( document ).ready(function() {
$("img").each(function(){
var imgUrl = $(this).attr('src');
$(this).parent().attr('href', imgUrl);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a><img src="https://cdn.pixabay.com/photo/2018/12/15/02/53/flower-3876195_960_720.jpg" width="200"/></a>
Don't use JS for this simple solution...
<a href="image-src.ext">
<img src="image-src.ext"/>
</a>
if you want the image to be downloadable add the download attribute to <a>. It is really no problem and the faster performance solution. And about 'stylish'... forget about stylish in coding :D
This might be the solution you are looking for.
Here is the fiddle. https://jsfiddle.net/RadekD/bgfpedxv/1/
HTML
<img class="image" src="https://placeimg.com/100/200/nature" />
<img class="image" src="https://placeimg.com/200/200/nature" />
<img class="image" src="https://placeimg.com/300/200/nature" />
JS
var images = document.querySelectorAll('.image');
images.forEach(function(element) {
element.addEventListener("click",function(){
window.location.assign(element.src);
});
});
I want to open an Image on click over another Image and so on.So It's a chain upto 6-7 images. Can somone suggest me how can I implement it.
<html>
<head></head>
<body style="background:color:red">
<a href="images/Delivery/2.png">
<img src="images/Delivery/1.png">
</a>
</body>
</html>
With above mentioned code I am able to open only 2 images. How can I able to access another image on click over "2.png" and so on.
You can use jquery to achive this
//Initial image element
<img src="images/Delivery/1.png" />
var imagesToShow=["1.png","2.png","3.png","4.png","5.png","6.png","7.png"];
var cnt=1;
$("img").click(function{
//If last image then reset to first image
if(cnt==imagesToShow.length){
cnt=0;
}
var nextimage="images/Delivery/"+imagesToShow[cnt];
$(this).attr("src",nextimage);
cnt++;
});
You can make it simply by passing class in for loop...No need to write big js
I have a website that is primarily used in K-12 schools. I have some social media buttons on it like Facebook 'like' and Pinterest 'pin it'. However, I'd like to have these buttons be hidden....where you have to click once on something (like an image that is covering them up but disappears when clicked....or a tab that just sort of scrolls away to reveal the buttons behind it).
The reason for this is because these sites are usually blocked in schools (I realize there's probably nothing I can do about this) and these buttons look kind of ugly when they're blocked (it'll show a question mark or or something in place of the button in these cases). However, I do want the people who do not have them blocked to be able to access and see them easily.
I am in search of a simple solution to this where the buttons wouldn't be immediately visible until you click on something.
If you're using JQuery or any other support library, you would have plenty of way to achieve your goal, even with a lot of visual effects.
Anyway, the simplest way to achieve it is by playing with the "display" attribute of the element.
Add this in your html head tag:
<script type="text/javascript>
function showElement(){
// get a reference to your element, or it's container
var myElement = document.getElementById('elementId');
myElement.style.display = '';
hideImage();
}
function hideImage(){
var myElement = document.getElementById('imageId');
myElement.style.display = 'none';
}
</script>
Now add a click event on the element you want to use to show your hidden content:
<img id="imageId" onclick="showElement()" src="..."/>
If you want to hide your "hidden" element by default, add a inline style:
<div id="elementId" style="display:none">...your buttons here...</div>
Obviously, there are a lot of better ways to achieve it (eg. changing css classes), but I think you would be able to work with the above instructions.
Edited to improve the answer:
Create an HTML structure like the following:
<div>
<img id="imageId" alt="" src="..." onclick="showElement()">
<div id="elementId" style="display:none">
<!-- your buttons, anchors or anything else you want to be hidden by default-->
</div>
</div>
So, when you click the image, the buttons appear and the image disappear.
Thanks for your help! I tried this and it works well. I think it was a pretty simple solution (even though I don't know javascript) and accomplished just what I wanted to do, which was to basically hide those buttons until an image that is covering them is clicked. Just for the record, here's the exact code I used:
<script type="text/javascript">
function showElement(){
var myElement = document.getElementById('elementId');
myElement.style.display = '';
hideImage();
}
function hideImage(){
var myElement = document.getElementById('imageId');
myElement.style.display = 'none';
}
</script>
(All I changed was adding the missing quotation mark on the first line and took out that one line about referencing to the element since I assume that is something optional.) For the html part, here's exactly what I did:
<div>
<img id="imageId" src="/images/cover.jpg" alt="cover" onclick="showElement()" width="185" height="124" />
<div id="elementId" style="display:none">
(hidden content went here)
</div>
</div>
(I didn't change much on this part either other than closing the image tag, putting in the dimensions for the image, etc.) Hopefully, I didn't do any of this wrong, but it seems to work as intended. The only other thing that would be a nice touch would be if there was a way to make it have the 'hand with pointing finger' symbol appear when you hover over it....in order to make it clear that it is a clickable image, but if not, it's not essential.
I am wondering if there is a way to give the HTML button tag, <button> an image so the image is click-able on my webpage. That way when users click on the image I can have other things happen
This doesn't seem to be working, and was wondering if it is even possible
HTML code -
<button>
<img src="images/dagger.png" width="10%" height="10%" id="dagger" />
</button>
Not quite sure what you are trying to achieve but maybe this example helps.
HTML
<button>
<img src="http://www.w3.org/html/logo/downloads/HTML5_Logo_32.png" id="dagger" />
</button>
JavaScript
$(function(){
$("#dagger").click(function(){
alert("click");
});
});
You could set the image as button background
button {
background-image:url('images/dagger.png');
}
I was having similar issues, and thought I would drop this post for anyone in the future that sees this thread.
From my understanding, you're not wanting a BUTTON, but a clickable image that acts as a button. Here is what I did:
HTML:
<img src="images/dagger.png" width="10%" height="10%" id="dagger" />
JavaScript/jQuery:
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>
$("#dagger").click(function(){
// what you wanted your button to do when user clicks it
});
</script>
By doing it this way, you get rid of the normal "button" image, and you can use whatever image you want as your clickable button. As well, you get the same functionality that you're wanting from the button, and it opens up many other paths to achieving your purposes.
Hope it helps!
Another method I use is simply putting the onclick event on the img itself to call a function.
html:
<img src="images/dagger.png" width="10%" height="10%" id="dagger" onclick="myFunction()" />
JS:
<script>
myFunction() {
// what I want to happen if user clicks image
}
</script>
Depending upon what you're doing, and what you're trying to manipulate, all of the examples on this page will provide you with better/worse ways of doing it. Using the onclick event within the img tag, you can pass variables/information to the function to utilize, and then have the function relay it to your PHP/ASP/etc.. As well, if you were dealing with a form, you can have your function handle information/submission, rather than the default submission that forms use. Use your imagination with the problems you come across, and decide which method works out better. Never settle for learning just one way of doing something.
Normally you wouldn't use a button you can just bind the click event to the image with JavaScript.
But if you must have a button you can style the button using CSS and the background-image property.
I have a web-page that contains a hidden <div> using display: none; and I have a button on the page, that when clicked will change the visibility of the <div>, and overlay it on top of everything else (because it has a z-index set).
Within this <div>, I have a Google Map embedded using an iFrame with the Google Map pin dropped on the location I am trying to show to my users.
The problem
Because the Google Maps iFrame is loading on the page load and while the <div> is hidden, it means that when the <div> is shown the Google Map is not aligned properly (the pin and central location are now in the top left hand corner)
The solution I am looking for
I know that some people are probably going to tell me ways in which I "should" recode my entire page. What I am actually looking for is some sort of onClick function I can set that will reload the iFrame so that the map is properly centered.
Things to know
This iframe has a Google Maps page as its src. i.e. a URL rather than a link to a file in my site.
Any help would be greatly appreciated! A lot of code I have looked at searching the net seems to work at refreshing a specific file that is referenced rather than an external URL.
Would it work if I embedded the map in another HTML file, and then placed that HTML file as the frame source?
I had this similar issue and solved it by changing the css style of the div through jquery, and changing the place where I put the iframe of google map.
The problem
The jquery code:
<script type="text/javascript">
$(function(){
$("#map_link").click(function(event) {
event.preventDefault();
$("#map").slideToggle();
});
});
</script>
The HTML:
I had the link and the google map iframe loaded inline into a div with a display:none css style. Because a display:none style makes the div width:0 and height:0, the address requested in google map doesn't display properly.
<a id="map_link" href="#">See map.</a>
<div id="map" style="display:none">google_map_iframe_here</div>
The solution
The jquery code
<script type="text/javascript">
$(function() {
$("#map_link").click(function(event) {
event.preventDefault();
$("#map").slideToggle();
$("#map").html('google_map_iframe_here').css('display','block');
});
});
</script>
The HTML: The div where I used to put the map now is empty, because I load the map only when clicking on the link, and at that moment I change the css style from display:none to display:block, so the map shows well.
<a id="map_link" href="#">See map.</a>
<div id="map" style="display:none"></div>
Hope this helps!
Have a good coding day!
I'm no pro, but I removed the onload="initialize()" from the body tag and changed it to onclick="initialize()" in the button that unhides the div. This seems to work now.
I'm not using an iframe (I'm using version 3 of the Google Maps API), but just had the same "not aligned properly" issue due to a 'hidden' div. My fix, instead of using display: none, which removed it from the DOM entirely, I used visibility, and height like so:
.myMapDiv {
visibility: hidden;
height: 0px;
}
I believe what's happening is that because 'visibility: hidden' actually keeps the element in the DOM still, the map is able to render as intended. I've tested it out in FF/Chrome/IE 7-9 and seems to be working so far without issue.
After hours of searching on the Internet and getting no results I decided to try what I put in as my final side note on my question and it worked!
I simply made a second file called map.html and inside the code was literally:
<html>
<iframe> </iframe>
</html>
with obviously the Google Maps source and then in my main page I had the src for the iframe linked to pages/map.html instead of the Google Map link.
instead of hiding the div with display:none, use something like position: absolute; top: -9999px; left: -9999px
then, when you want to show the content for that div, set those properties to position: static; top: auto; left: auto or something like that
You can simply refresh the iframe like this:
var myIframe = jQuery('#myIframe');
myIframe.attr('src',myIframe.attr('src')+'');
I had the same problem, my solution was to set both the div & the iframe to 0px height and then have it changed to the desired height when toggled.
<script language="javascript">
function toggle() {
var ele = document.getElementById("toggleText");
var ifr = document.getElementById("iframe");
var text = document.getElementById("displayText");
if(ele.style.visibility == "visible") {
ele.style.visibility = "hidden";
ele.style.height = "0px";
ifr.style.height = "0px";
text.innerHTML = "<img src='#' border='0' width='180' height='65'>";
}
else {
ele.style.visibility = "visible";
ele.style.height = "420px";
ifr.style.height = "420px";
text.innerHTML = "<img src='#' border='0' width='180' height='65'>";
}
}
</script>
<div id="mb">
<a id="displayText" href="javascript:toggle();"><img src="#" border="0" width='180' height='65'></a>
</div>
<div id="toggleText" style="visibility: hidden; height: 0px;">
<p><iframe id="iframe" style="height: 0px;" src=#" width="650">
</iframe></div>
<script type="text/javascript">
$(document).ready(function (){$("#showMap").slideUp();})
</script>
<script type="text/javascript">
function showMap()
{
$("#showMap").slideToggle();
}
</script>
Show / Hide Map
<div id="showMap" style="margin-left:15px; width:615px; height:400px;">
<?php require_once "map.php";?>
</div>
There is a solution using both css and jQuery.
First you need a wrapper div without height which will include the iframe.
In this way the iframe will load normally without be visible at all.
Next using jQuery you can display/hide the iframe.
HTML
<div id="map-show">Show Map</div>
<div id="map-hide">Hide Map</div>
<div id="map-wrapper" style="height:0; overflow:hidden;">
<div id="gmap">
<iframe width="850" height="650" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="xxx"></iframe>
</div>
</div>
CSS
.hidden {
display: none;
}
jQuery
$(document).ready(function() {
$('#map-show').on('click',function(){
// Remove class hidden from map - Display map
$('#gmap').removeClass('hidden');
// Set height to map container div - ONLY one time needed
$('#map-wrapper').css('height', 'auto');
});
$('#map-hide').on('click',function(){
// Add class hidden to map - Hide map
$('#gmap').addClass('hidden');
});
});
I have been struggling with something like this as well. Where I initially add a class .hidden which is display: none;. But when I toggle .hidden, the map is not centered. I found that waiting until the map is fully loaded, using the idle event listener before adding the class .hidden solved all my display issues.
google.maps.event.addListenerOnce(map, 'idle', function(){
// do something only the first time the map is loaded
$mapContainer.addClass('hidden');
});
reference:
How can I check whether Google Maps is fully loaded?
You could use visibility hidden and use jQuery to show and hide it.
$('click-button').click(function(){
var visibility = $("hidden-div").css("visibility");
if (visibility == "hidden")
$("hidden-div").css("visibility","visible");
else
$("hidden-div").css("visibility","hidden");
});
Here is a solution that does not require any programming at all!
When getting the embed code, click "customize and preview embedded map", and then just drag the map down and to the right so that the push pin is in the lower right corner and then grab the new embed code.
When the map centers in hidden mode, it will still come up correctly when expanded. (not perfect I know, but if all you really want is for the push pin to show on the map, totally works)
Same issue, easy solution.
css hidden leave a space in html flow. I don't know if a css position outside the screen is well accepted on every device and get a block perfectly hidden.
jquery is nice working with block width and height.
css:
#map {overflow:hidden; float:left;}
html:
show
hide
<div id="map">
<iframe width="100%" src="http://maps.google.com/maps f=q&source=s_q&hl=en&geocode=&ie=UTF8&iwloc=A&output=embed ...>
</div>
javascript:
var w=sames as gmap width;
var h=sames as gmap height;
$(document).ready(function(){
$("#map").width(0);
$("#map").height(0);
$("#btn_show").click(function(){
$("#map").show();
$("#map").width(w);
$("#map").height(h);
});
$("#btn_hide").click(function(){
$("#map").hide();
});
})
I encounted the same problem.
Solution
Using iframe as an external source works.
online demo
http://jsbin.com/nogomi/1
Make sure that iframe element's name attribute is the same as a element's target attribute
Inspired from https://developers.google.com/maps/documentation/javascript/
in CSS:
#googleMap { visibility: hidden; }
Original
beim Klick der die Karte öffnen soll jQuery:
EDIT
jQuery when you click to open the map:
$('#googleMap')
.css('display','none')
.css('visibility','visible')
.fadeIn(500);
});