I am having a problem referencing an image I have on a server in my temp folder. I have the following:
<a href="#" title="Hello">
<img width="220" height="255" src="file://myServerName/c$/temp/myImage.jpeg" class="attachment-hp-thumb wp-post-image" alt="Hello" />
</a>
This is currently giving me a blank screen, no errors. Can someone please give me some pointers on what I am doing wrong?
Related
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
<p style="text-align: center">
<img class="alignnone size-full wp-image-759 aligncenter" /><img
src="https://steamboateramuseum.org/wp-content/uploads/2021/01/ViFLverttransparent.gif"
/>
</p>
This is what I have now, I have been asked to link it but every time I add my <a tag and url to hyperlink it just doesn't work! Where would I fit a hyperlink into this? I am sorry for the stupid question in advance.
Okay so based on your comments I think I have understood your problem. Do following ->
<p style="text-align: center;">
<a href="here goes your link e.g. https://google.com">
<img src="i.imgur.com/I5DFV.jpg" />
</a>
</p>
Depending on your usecase you might have to update style to show it in better way, but this will work functionally
Although you question wasn't clear, but what i understood is your hyperlink containing an image is not working. Maybe you're missing Something in your quotes? anyway here is an example of a working hyperlink with an image.
<img src="images/someimage.jpg" title="Image hyper link" width="300" height="200" />
How can I make h:graphicImage a link to http://www.google.com?
<h:graphicImage value="/imagenes/Powertrain_GM.gif" width="50" />
I tried to put it like this:
<a href="http://www.google.com">
<h:graphicImage value="/imagenes/Powertrain_GM.gif" width="50" />
</a>
But does not work...
Also tried:
<a href="http://www.google.com">
<img src="/imagenes/Powertrain_GM.gif">
</a>
But nothing... Everything is inside <h:form>...</h:form>
Help please.
I have no idea why it works know. I used the second code. Any ideas of this strange problem? I did not changed anything and know works...
I located social icons in my text widget located in the header. It works in IE but not in Chrome or Firefox?? I am wondering if it has to do with my Artisteer 4 theme I am using, but I have looked at all the CSS and code and don't see what is interfering. My site is http://www.visualtechnologyconsulting.com
and the code in the text widget is:
<a href="http://www.facebook.com/visualtechnologyconsulting/">
<img class="alignnone size-full wp-image-372" alt="Visual Technology Consulting
Facebook" src="http://www.visualtechnologyconsulting.com/wp-
content/uploads/2013/01/facebook-logo-webtreats.png" width="75" height="75" />
</a>
<a href="http://www.linkedin.com/company/visual-technology-consulting/">
<img src="http://www.visualtechnologyconsulting.com/
wp-content/uploads/2013/01/linkedin-logo-webtreats.png"
alt="Visual Technology Consulting Linkedin" width="75" height="75"
class="alignnone size-full wp-image-373" />
</a>
I can see them in Chrome. Everything looks fine.
But maybe you post the CSS Part?
Nate, its working for me in Chrome and firefox. See here. Have you refreshed your browsers cache?
I found it!! it was a CSS issue I was covering the icons with the header div, needed to reduce it to 40%!!!
Thanks everyone!
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