When I mouse over the image, it displays the broken image symbol and doesn't revert when I move my mouse out. Here is my HTML:
<img src="images\News\btn_DownloadNow.png" onmouseover="this.src='over_DownloadNow.png'" onmouseout="this.src='btn_DownloadNow.png'">
Make sure your image is in the correct file path. Perhaps it's in images\News\? If it is, you would have to write it the way Flaudre recommended. Or it could be your slashes. Maybe use forward slashes instead? images/News/.
<img src="images\News\btn_DownloadNow.png" onmouseover="this.src='images\News\over_DownloadNow.png'" onmouseout="this.src='images\News\btn_DownloadNow.png'">
Try this one:
<img onmouseover="this.src='over_DownloadNow.png';" onmouseout="this.src='images\News\btn_DownloadNow.png';" src="images\News\btn_DownloadNow.png" alt="">
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
Ok. I can't figure this out. Here's the HTML:
<html>
<body>
<img source="sample.jpg" alt="Wheres my image" style="width:100;height:38">
</body>
</html>
Pretty simple. The picture is just a simple block with some text in it. It's 2k in size. And for some reason I can't attach it here.
Both the image and the HTML are in the same sub directory in my Documents folder (Win10 x64 pro).
When I load the HTML, I just get the text from the "alt" setting for the image.
Browsers I'm testing on:
Chrome: 60.0.3112.113 (Official Build) (64-bit);
IE: Version 11.540.15063.0;
Edge: 40.15063.0.0, EdgeHTML version: 15.15063
Any ideas?
Try using this
<img src="sample.jpg" alt="Wheres my image" style="width:100;height:38">
You are using source insted of src that is causing error so change that. I hope this will work.
Change "source=" to "src=" other than that it should work.
Look here for more...
https://www.w3schools.com/html/html_images.asp
In your style add a unit to the width and height like 'px'. Then replace attribute source to src :)
<html>
<body>
<img src="sample.jpg" alt="Wheres my image" style="width:100px;height:38px">
</body>
</html>
The problem is that you have used the attribute source instead of src for your <img> tag.
Rewrite your image tag as:
<img src="sample.jpg" alt="Wheres my image" style="width:100;height:38">
If the image still won't load for you, there are three possible reasons why this may be happening:
You have forgotten to upload the image to the server.Check it's actually accessible by manually navigating to it.
You have referenced the file incorrectly, either by name or by path.
You need to clear your cache.Hold CTRL and click the refresh icon to clear your image cache.
I'm sure this is super easy but I'm a beginner. I have my code to pull up my logo but my logo just pulls up a broken image icon. See screencast
See screencast: http://screencast.com/t/ar8cpTIbMs
Here is my HTML:
<div id="logo">
<img src="C:\Users\Brent\Documents\Website Development"/>
</div>
I really only need my HTML figured out and I assume the CSS will work pretty well after that. Thanks for the help!
You must enter the correct file name for src. Such as
<img src="C:\path\to\your\file.jpg" />
http://www.w3schools.com/tags/tag_img.asp
Please note that it is not a good practice to use absolute paths in your src attribute.
In the other hand, you can use base64 encoded image data as src of your img tag. Something like
<img src="data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD...//Z" />
https://www.base64-image.de/tutorial
If you use this method, you dont need to keep your logo.jpg file anywhere.
Hope this will help.
You are linking to a directory in your img tag, instead of an image file. Also, I would suggest either practicing online in a free webhost or downloading a stack package like WAMP/MAMP/LAMP. You'll start running into problems where you can use http protocols pretty quickly in your studies. Though, that can get technical, so I say stick to a free webhost for now. You will get weird hang ups trying to use the file system that will ultimately confuse you while you are trying to learn.
The problem lies in your src for your <img>. You're linking it to a directory /Users/Brent/Documents/Website Development right now, when you should be linking it to the image. If your image is called logo.png, then you should link it with C:\Users\Brent\Documents\Website Development\logo.png. Also, instead of linking it to C:\Users\Brent\Documents\Website Development\logo.png, link it to the image based on where the file is. For example, if your file is in \Website Development\index.html, then all you need to put for the src is "logo.png".
You should move your logo to the same path as your website. Ex:
Website: C:/site/index.html
Logo: C:/site/logo.jpg
Then include the logo as:
<div id="logo">
<img src="logo.jpg">
</div>
Hint: You don't have to have the div for the logo to show up.
please enter the complete path including your image.
for example if your file name is mypic.jpg .Then
<img src="C:\Users\Brent\Documents\Website Development\mypic.jpg" />
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
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'">