On click my icon and go to my Line profile.
http://www.test12345679/lineicon.jpg
Give the url in href attribute like
href="http://google.com"
I think what you want is to have an image or icon that links to your profile.
<a href="URL Line profile">
<img alt="icon" src="http://www.test12345679/lineicon.jpg">
</a>
Related
This is my code
<a :href="page_4_state.data.dealerUrl" class="f-green" target="_blank">
<u>Searching for number</u>
Normally, It will link to another page.
But I want to link to the bottom of the another page.
I see your url dealer in the comment use a "href anchor", like this:
<a :href="page_4_state.data.dealerUrl+'#footer'" class="f-green" target="_blank">
<u>Searching for number</u>
https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_a_href_anchor
I am making a portfolio page, which is going fine, except the uploading project link. This is the code I am working on (it's a free online template so cannot change much of the code)
<article class="from-left">
<a href="images/fulls/01.jpg" class="image fit">
<img src="images/thumbs/01.jpg" title="Superstore project" alt="" />
</a>
</article>
The issue is that when I replace the image with a link to a github page, nothing happens and the webpage goes into a loop type waiting image.
<article class="from-left">
<a href="www.google.com" class="image fit">
<img src="images/thumbs/01.jpg" title="Superstore project" alt="" />
</a>
</article>
My HTML and CSS skills are very basic level, not sure what is the issue. What I want is that when I click a picture it opens up the link provided. Below is the free html template I am using
https://html5up.net/big-picture
I've read your template readme file and understood what is happening. The problem is that the template uses a component called "jquery.poptrox". This component makes the gallery links to open a popup with that picture.
To do what you want, find the file "main.js". Then look for $gallery.poptrox
You have to comment this entire block. It will be like this:
//$gallery.poptrox({
// baseZIndex: 10001,
// useBodyOverflow: false,
// usePopupEasyClose: false,
// overlayColor: '#1f2328',
// overlayOpacity: 0.65,
// usePopupDefaultStyling: false,
// usePopupCaption: true,
// popupLoaderText: '',
// windowMargin: 50,
// usePopupNav: true
//});
Notice that I put a double slash to comment each line. This should disable that component and your links now will open what you want instead of opening a popup. You can also delete this block of code, but I don't know if you would like the original behaviour back in the future. So, it's up to you.
Important:
Your links should start with "https://". So, it'll be like this:
<article class="from-left">
<a href="https://www.google.com" class="image fit">
<img src="images/thumbs/01.jpg" title="The Anonymous Red" alt="" />
</a>
</article>
If you want your link to open in a new tab of the browser, add the target="_blank" attribute.
<article class="from-left">
<a href="https://www.google.com" target="_blank" class="image fit">
<img src="images/thumbs/01.jpg" title="The Anonymous Red" alt="" />
</a>
</article>
Try changing "www.google.com" to "https://www.google.com", right now the link may be sending you to [your website]/www.google.com
You can add https:// in URL and target="_blank" so that the link will open in a new tab.
<article class="from-left">
<a href="https://www.google.com" target="_blank" class="image fit">
<img src="images/thumbs/01.jpg" title="Superstore project" alt="Sample Image" />
</a>
</article>
Here is link of JSBin
below are two links with download attribute.
clicking on both gives different result, why?
<a href="https://www.w3schools.com/images/myw3schoolsimage.jpg" download>
dnld
</a>
<br>
<a href="https://scontent.xx.fbcdn.net/v/t45.1600-4/28204217_6081249221877_6688541583534456832_n.png?oh=9262305ce4d55f669767f01c1be364b1&oe=5B06C1A9" download >Download</a>
w3schools link downloads the image where as the other one simply opens the image.
because the extension should be displayed at end of url
<a href="https://www.w3schools.com/images/myw3schoolsimage.jpg" download>
dnld
</a>
<br>
<a href="https://scontent.xx.fbcdn.net/v/t45.1600-4/28204217_6081249221877_6688541583534456832_n.png" download >Download</a>
I've added a page link to a picture for my website, but it does not load the website because the link goes the directory therefore the webpages do not appear. My code is below:
<a href="www.w3schools.com">
<img src="Images/insta.png" alt="" style="width:7%; height:7%;">
</a>
When I click on the image it says file not found.
If you're linking to a page on an external site, you will need to provide the entire URL of the page in question, which includes the protocol. In this instance, that would be http://www.w3schools.com/.
By linking to www.w3schools.com, you are telling the browser to load that URL relative to the page you're linking from so, if this link were on a page located at http://domain.tld/page.html, clicking on it would attempt to load http://domain.tld/www.w3schools.com.
Add http:// OR https:// for your website link:
<a href="http://www.w3schools.com/">
<img src="Images/insta.png" alt="" style="width:7%; height:7%;">
</a>
<a href="http://www.w3schools.com" target="_blank">
<img src="Images/insta.png" alt="" style="width:7%; height:7%;">
</a>
Without the http:// your link will be something like: youraddress/www.w3schools.com
And pay attention if you image is in the correct folder called Images
I have a picture, if I click onto that picture, how can I build an image reference so another page opens in a new tab or a new window of my browser displaying the picture?
<a href="http://www.google.com" target="_blank">
<img width="220" height="250" border="0" align="center" src=""/>
</a>
If you use script to navigate to the page, use the open method with the target _blank to open a new window / tab:
<img src="..." alt="..." onclick="window.open('anotherpage.html', '_blank');" />
However, if you want search engines to find the page, you should just wrap the image in a regular link instead.
<a href="http://www.google.com" target="_blank"> //gives blank window
<img width="220" height="250" border="0" align="center" src=""/> // show image into new window
</a>
See the code
Assuming you want to show an Image thumbnail which is 50x50 pixels and link to the the actual image you can do
Of course it's best to give that link a class or id and put it in your css
you can do like this
W3C Home Page
find this page
http://www.corelangs.com/html/links/new-window.html
goreb
To open in a new tab use:
target = "_blank"
To open in the same tab use:
target = "_self"
Try this simple solution
<a href="path/of/your/image/image.png" target="_blank">
<img src="path/of/your/image/image.png" alt=""
style="width: 37rem;max-width: 100%;height: auto;vertical-align:
middle;border-style: none;">
</a>
See live https://codepen.io/awaisaslampro/pen/abwOPrP
If the question is about to click on Image and open in New Tab like this
Here is the code:
<a href="assets/images/android-chrome-512x512.png" target="_blank">
<img width="220" height="250" border="0" align="center" src="assets/images/android-chrome-512x512.png" alt=""/>
</a>
Both the href and and src attributes values/URL's can be local for testing and incase of live site.. it should be live link to access