I need to create a button with this image https://www.thebankofmaine.com/images/android-app-on-google-play.png and I need to reference it to a file on my server.
How can I do that ?
I've tried this and the image appears, but dont know how to go to a webpage after clicking.
<button type="button" onClick="location.href='index.html'">GO TO URL</button>
How can I change it to go to google.com for example and how can I add a img to the button?
<img src=" https://www.thebankofmaine.com/images/android-app-on-google-play.png" />
I dont exactly get what you are trying to do, but it seems to me that you are just simply trying to make an image a link to click on to lead you somewhere else. This can be done with:
<a href="yourlinktogoto">
<img src="yourpicture.gif" alt="Picture Description" style="border:0">
</a>
You have to change the src, href, and alt.
You dont have to add the border thing but i put it in almost all my images.
Hopefully it will help. tnx
Related
Good morning,
In HTML, I am trying to insert an image which should be clickable to open a link. Unfortunately, when I click on the image, nothing really happens. I am doing that in a 'div' tab, hoping that it is the correct way to achieve this.
<div id="nav">
<a href="http://www.20minutes.ch">
<img src="assets/icons/icon_weather_forecast.png" alt ="" style="width:60px;height:60px;">
</a>
<img src="assets/icons/icon_worldwide_weather.png" alt ="" style="width:60px;height:60px;">
<img src="assets/icons/icon_train_schedule.png" alt ="" style="width:60px;height:60px;">
<img src="assets/icons/icon_useful_numbers.png" alt ="" style="width:60px;height:60px;">
</div>
Any idea why it does not work?
Many thanks for your hints and best wishes,
Laurent
If you use JSBin, or any similar tool, you'll see how your code works perfectly. Have you tried to use different browsers? Also you could try removing the id from the div to see if you have any CSS rule or JS that interrupts the anchor action.
Thanks a lot for your help. I found the problem which was in my css.
My tag did not mention :
position: relative;
Adding this line solved the problem. Again, many thanks for your efforts.
I wrote this code
here
How I can make icon as picture instead of here .
I want when I run this code appears as icon when I click on this icon direct me to trans.php .
enclose an image tag within the <a> tag.
like,
<a href='trans.php'><img src='pic.jpg'/></a>
Use image <img src="" alt="" /> as icon
or
try to implement and use Font Awesome Icons https://fortawesome.github.io/Font-Awesome/icons/
There is another way if you don't want to use image tag is glyphicons`
for example
this example is taken from bootstrap there is a file which contain icons u just need to add this in your file
</i>
Is there any way to make a button linked to a document (PDF) on HTML?
As additional data, this button would be an image.
PS: I am using Notepad++.
Thank you.
Yes. Simply use a regular link:
<a href="http://example.com/myPDF.pdf">
<img src="http://example.com/myImage.jpg">
</a>
And if you want it to open in a new window as to not divert traffic...
<a href="http://example.com/myPDF.pdf" target="_blank">
<img src="http://example.com/myImage.jpg">
</a>
Also, I should mention that the text editor you use is irrelevant in this question, because Notepad++ is just want you use to write the HTML. It's not specific to any one editor.
Something like this
<img src="yourImage.jpg"></img>
And yes this also works with Notepad++ ;-)
If you have a button-looking image foo.png and the PDF document has the URL hyps.pdf and the title “Hypsology”, you can use a link like the following:
<img alt="Hypsology (PDF)" src="foo.png">
What happens when a user clicks on the image depends on his browser and its settings.
I basically want an image as a button, for example, see the 'recent inbox messages' thing at the top next to stack Exchange? I want to recreate that moreorless but with my own image.. How would I go about doing this, I've tried:
<button type="button" name="test">
<img src="C:/Trey/rs-logo.jpeg">
</form>
but that didn't work, could anyone help (sorry if I worded all of this badly, English [though my native language] isn't a strong point!
-Trey
You can make an image button with something like this:
<a href="#">
<img src="yourImage.png">
</a>
This creates an image element with an anchor surrounding it, so for all intents and purposes, it's an "image button." You will have to style it to your liking.
UPDATE
Your code will also work if you change it to
<button>
<img src="yourImage.png">
</button>
You have to close the button tag. This will create an ugly-looking button with an image in it, but you can use CSS to style it to your liking.
you are opening a button and closing a form which is not even opend yet
you should use in first place. how ever using an image as a button is not the best idea i guess
<button type="button" name="test">
<img src="C:/Trey/rs-logo.jpeg"/>
</button>
made you a quick fiddle to check it out: http://jsfiddle.net/T2JRt/1/
I have a website set up at http://jamesfrewin.co and I have tried to make the small envelope icon have the link for mailto work just on the envelope image but it seems to be overflowing to the whole box.
Any help to sort this out would be greatly appreciated.
http://jsfiddle.net/JzEnm/
Code
The code for my page is on the link above.
Thanks!
This is happening because your anchor tag includes the envelope image, profile image and the text. Close the tag after the envelope image. Change this and you should be good to go.
<a href="mailto:jfrewin#me.com"><img class="image image-5" src="images/Envelope1.png" onmouseover="this.src='images/Envelope2.png'" onmouseout="this.src='images/Envelope1.png'">
<img class="image image-6" src="images/Profile Card.svg">
</a>
The answer you're looking for has been provided by #James. Just missing an ending anchor tag.
From someone who appreciates good, clean code and following best practices, I challenge you to strip your hover events and replace them with sprites and css :hover effects.
Add </a> after <img alt="" class="image image-5" src="images/Envelope1.png" onmouseover="this.src='images/Envelope2.png'" onmouseout="this.src='images/Envelope1.png'">