I'm trying to show an SVG, which, when clicked, links to another page. Here is what I tried:
<a href="foo.html">
<embed src="something.svg" />
</a>
What is the preferred method for doing this?
Don't use the embed tag. Instead use an <img> tag and the anchor should work just fine.
Related
So I'm working on a website
<img src="Images/PaintEverythingPreview.png" herf="Pages/PaintEverything.html">
<p> - <a herf="Pages/PaintEverything.html">
Paint Everything
</a> - </p>
and the code here isn't working, none of the links work! I've coded a little program on my website, and this is supposed to take you to it, but it's not working, please help!
Use href instead of herf.
Paint Everything
HTML Tags
The correct way to include a link in your HTML is to use the href element (you mis-spelt it as herf.
Secondly, you cannot use href inside an img tag as it's not valid HTML. Instead, you should nest the img tag inside the link.
Update your code to this:
<a href="Pages/PaintEverything.html">
<img src="Images/PaintEverythingPreview.png">
</a>
<p>
Paint Everything
</p>
To validate (check) your HTML in the future, try the W3C Validator
error writing the attribute href.
Paint Everything
error in attribute href in img tag (not exists):
<img src="Images/PaintEverythingPreview.png" herf="Pages/PaintEverything.html">
html tag reference: HTML tags list
Change herf to href and enclose the img in <a> tags to make the image a clickable link.
<img src="Images/PaintEverythingPreview.png">
Firstly you need to remove href from the image tag, since you cannot put a href in an <img> tag.
Secondly you need to check if the path/link to which you want to redirect to, is correct or not.
I have updated your code and let me know if this is what you are looking for.
<img src="Images/PaintEverythingPreview.png"><p> - Paint Everything - </p>
Im trying to set up a hyperlink from my current page to another page via my files, however it doesn't work...
My code:
<ahref="file:///C:/Users/ashsa_000/Desktop/Html/6weeksproject/Index/Languages.html"><input type="image" id="Languages" position:absolute style="height:px; width:px;" src="./CSImages/About.PNG">
<!-- Thats in context, the HREF is following-->
<ahref="file:///C:/Users/ashsa_000/Desktop/Html/6weeksproject/Index/Languages.html">
Once i click the hyperlink it comes up with an error that repeats the directory:
file:///C:/Users/ashsa_000/Desktop/Html/6%20weeks%20project/file///C:/Users/ashsa_000/Desktop/Html/6%20weeks%20project/Index/Languages.html
How can i fix this?
First of all, the tag in conjunction with the href attribute work as follows <a href="path/to/file.html">. Noticed the difference (space)?
Secondly, if the file is in the same folder, all you need to do is reference the file that you want to link starting from that path and upwards.
You were on the right track, your href would become: {}
Consider naming files with lowercase letters only. Its not necessary, but a well accepted practice!
The <a> must have a space between the a and href: <a href="">
When you use the href attribute, the path will be based on which file you put the <a> in, e.g. if you put the <a> in the index.html, and you want to reference to languages.html, first make sure that the languages.html is in the same folder as index.html (easier) and then just reference to it with:
<a href="languages.html">
Also, why are you using an input tag? Just use an img tag. I'll fix your code:
<a href="languages.html">
<img id="Languages" style="position: absolute; height:_px; width:_px;" src="CSImages/About.PNG">
</a>
This only works if the folder CSImages is in the same directory as index.html If not, just change the path accordingly.
Hope this helps!
<a href="file:///C:/Users/ashsa_000/Desktop/Html/6weeksproject/Index/Languages.html">
<input type="image" id="Languages" position:absolute style="height:px; width:px;" src="./CSImages/About.PNG">
</a>
As mentioned in comments, you should put a space between a and href. Additionally, you should close the a tag.
Why are you using an input element for showing an image? Maybe you are better off with an actual image tag:
<a href="file:///C:/Users/ashsa_000/Desktop/Html/6weeksproject/Index/Languages.html">
<img id="Languages" style="position:absolute; height:[insert missing value]px; width:[insert missing value]px;" src="./CSImages/About.PNG">
</a>
You may also have a look at this SO question for more reference on links to local files: How can I create a link to a local file on a locally-run web page?
Add the space in the a href, put the image in an img tag, and don't include height and width unless you are going to include a value. Also position:absolute has to go in a style tag. Finally, close your a tag.
<a href="file:///C:/Users/ashsa_000/Desktop/Html/6weeksproject/Index/Languages.html">
<img src="./CSImages/About.PNG" style="position:absolute">
</a>
I´m trying to add an anchor to this div:
<div class="mosaic-block bar">
<a href="javascript:loadintoIframe('myframe', 'portfolio/optica.html')" class="mosaic-overlay">
My goal is to click this button, load the iframe and then go to the anchor.
Is it possible?
Have you tried loadintoIframe('myframe','portfolio/optica.html#anchor');? Without seeing how your loadintoIframe function works, it's hard to tell.
If the iframe is already on the page, then you don't need JavaScript, just this:
<a href="portfolio/optica.html#anchor" target="myframe" ...>...</a>
With an iFrame and a html link, I can use the TARGET property of html links and setting a name for the iframe to change the src of the iframe. This works well...
How can I do this same thing with an embed instead of an iframe?
So i am starting with
<embed name="test1" src="http://www.example.com"></embed>
The embed is inside an object class if that helps.
Any ideas?
Javascript :)
<a onclick="document.getElementById('emb').src='whatever'">Whatever</a>
<a onclick="document.getElementById('emb').src='whatever2'">Whatever2</a>
<embed id="emb" src="default"></embed>
No, you can't. Just use an iframe.
I have added an img tag inside title attribute,but the img tag shows as text when hover over link(using hovertip js),and does not display an image.What needs to be done?
<a title="4r23r 2342.00 <img src=/m/productsmedia/IHALE.GIF>" class="product_detail " href="/?product=6" id="0">4r23r</a>
You cannot! You need to use custom tooltip look-a-like effect with IMG insdie DIV and on mouseHover event.
Here is an example.
This is not possible in HTML, at least not what you appear to be attempting.
If you want a clickable image, you put the img tag inside the a tag, not inside an attribute:
<a title="4r23r 2342.00" class="product_detail " href="/?product=6" id="0">
<img src="/m/productsmedia/IHALE.GIF" />
</a>
If you want a tooltip that contains an image, you need to code it using javascript and css. There are plenty of articles describing how to achieve this.