having trouble with a CSS problem, but I can't figure it out. none of my images are displaying, yet they have working urls and the HTML is correct.
there's no image styling, and the image class's only styling is: .postimg { width: 100%; }
problem here:
http://jsfiddle.net/4pmUu/5/
this probably has a really simple solution, but i can't figure out what's wrong..
You do not have the correct image tag. To show an image in HTML use the <img> tag.
see http://jsfiddle.net/4pmUu/7/
As far as I can tell, you just have the image tag wrong. <i> is italic text; you want <img> instead. That is, <img src="http://ruby.colorado.edu/~smyth/Research/Images/Volcanix/MtFuji02.jpg" class="postimg" />
If you substitute <i ...></i> and use it (below) it should work.
<img src="http://ruby.colorado.edu/~smyth/Research/Images/Volcanix/MtFuji02.jpg" class="postimg"/>
You are using the image tag as:
<i src="http://ruby.colorado.edu/~smyth/Research/Images/Volcanix/MtFuji02.jpg" class="postimg"> this is where the actual error it.
The correct way to do is to write <img... use this:
<img src="http://ruby.colorado.edu/~smyth/Research/Images/Volcanix/MtFuji02.jpg" class="postimg" alt="photo" />
Also please note that, using alt="" is necessary in images, as if the image is not loaded because of some issue, the user will be shown a text about that image.
Related
<img src='stackoverflow.png'>
<img src='stackoverflow.png'></img> -- is it right? or can I use it?
<img src='stackoverflow.png' />
in these three code
is the second code is right?
or can I use it to show images on a website?
and it will show if it will show why I can't use it?
all of the above is right
Syntax of img tag in HTML is
**<img src="URL/PATH">**
as per above syntax <img src='stackoverflow.png'> is right so it will work.
tag is not necessary but you can put it so it will also work.
and third one means you are closing the image tag and as i said to close image tag is not necessary
No, the second one is wrong, the first and third are fine. I personally recomend the third because it makes your code more redable. You can find out more at https://www.w3schools.com/tags/tag_img.asp
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.
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>
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'">
so I have a strange request. I've been working on some security project for school, and I've been able to successfully inject some html code using a form on our test site. What's interesting is that it only accepts the html code as one line and with no spaces. This brings me to my question, so far I've only been able to get text and font color changes to work. But I want to see if someone could inject images/audio/video.
I'm trying to figure out how to turn this:
<img src="http://www.rtur.net/blog/image.axd?picture=2011%2F12%2Fcss.png"/>
Into this:
<imgsrc="http://www.rtur.net/blog/image.axd?picture=2011%2F12%2Fcss.png"/>
but add a space with code.
I've tried adding the but that only works with actualy text and not the tag itself. Any help is appreciated.
Interesting note: I was able to inject <font size="50" color="red"></font>
But I have no idea why that works but the image doesn't.
Have you tried the following?
A slash:
<img\ src="http://www.rtur.net/blog/image.axd?picture=2011%2F12%2Fcss.png"/>
Using a non-traditional closing tag:
<img src="http://www.rtur.net/blog/image.axd?picture=2011%2F12%2Fcss.png"></img>
Injecting a blank <img> tag:
<img src=""/>
Here's another solution: Try inline CSS:
<div style="background:url(http://www.rtur.net/blog/image.axd?picture=2011%2F12%2Fcss.png);height:400px;width:400px"></div>
See this fiddle: http://jsfiddle.net/9MYrM/