<!DOCTYPE html>
<html>
<body>
<p>Click on the w3schools logo to download the image:<p>
<a href="/images/myw3schoolsimage.jpg" download>
<img src="/images/myw3schoolsimage.jpg" alt="W3Schools" width="104" height="142">
</a>
</body>
</html>
ok i gonna try to explain you this with a example, try to the following:
first create a folder in your desktop with the name "TestFolder" then create one folder with the name "images" and create a html file:(if you are in the good way you will have something like this)
then in your html file write the following code:
<!DOCTYPE html>
<html>
<body>
<p>Click on the w3schools logo to download the image:<p>
<a href="../TestFolder/images/soundfile.mp3" download>
<img src="../TestFolder/images/imagefile.jpg" alt="W3Schools" width="104" height="142">
</a>
</body>
</html>
then in your images folder put a image and replace the word imagefile of the html with the name of your image and do the same for the mp3 file(put a mp3 file in the image folder and then copy the name of the file in the word soundfile of the html file)
then open the html file with your browser (second click on the html file "open with" example: firefox) and you will have what you wanted
(even after all this I'm still unsure if this is what you wanted to do )
Related
I'm learning HTML and I'm just starting to learn about an image manipulation. The image I want to use is in different directory of the document and I've tried to load it in my document. The directory of Html document is MY/COMPUTER/PATH/Desktop/Code/Images.html and the directory of an image is MY/COMPUTER/PATH/Downloads/Image.jpg and the code is that follows:
<!DOCTYPE html>
<html>
<body>
<img src="../../Downloads/Image.jpg" alt ="This is an image that should
work">
</body>
</html>
I would like to get some help from other people. Thanks.
It's a best practice to maintain the proper directory structure.
Here is the basic directory structure which you should follow, it will help you to gather all assets in the same place
>projectName
>assets
>images
>css
>js
>index.html
<!DOCTYPE html>
<html>
<body>
<img src="assets/images/image.jpg"
alt = "This is an image that should work"
>
</body>
</html>
>projectName
>assets
>images
>css
>js
>index.html
>about.html
>contact.html
I am trying to make a webpage using HTML, JavaScript and CSS but my image files wont display. I have my img folder in the same folder that the html file is in.
I want to display the undecorated tree and then when the user clicks the button to display the other image but it is only displaying the images alt message.
<!DOCTYPE html>
<html>
<title>
Christmas
</title>
<body>
<h1>Lets decorate this chritmas tree!</h1>
<button onclick="document.getElementById('xmasTreeImage').src='decoratedtree.jpg'">Decorate the tree</button>
<img id="xmasTreeImage" alt="Can't display" src="undecoratedtree.jpg" style="width:100px">
<button onclick="document.getElementById('xmasTreeImage').src='undecoratedtree.jpg'">Take away the decorations</button>
</body>
</html>
update:
<!DOCTYPE html>
<html>
<title>
Christmas
</title>
<body>
<h1>Lets decorate this chritmas tree!</h1>
<button onclick="document.getElementById('xmasTreeImage').src='C:\Users\Me\Documents\ChristmasWebProject/decoratedtree.jpg'">Decorate the tree</button>
<img id="xmasTreeImage" alt="Can't display" src="C:\Users\Me\Documents\ChristmasWebProject/undecoratedtree.jpg" style="width:100px">
<button onclick="document.getElementById('xmasTreeImage').src='C:\Users\Me\Documents\ChristmasWebProject/undecoratedtree.jpg'">Take away the decorations</button>
</body>
</html>
If i add in the exact directory it displays the images but surely there is a more efficient way to do this? Also it is not displaying anything when I click the buttons it only shows the image before I click buttons.
I was able to display an image by typing in the specific directory. See my question edit for code.
I'm having trouble uploading an image (google logo) I have saved onto my mac using html/css. Can someone tell me what I'm doing wrong? My html file is saved in a folder titled google-homepage, within that page is a folder called CSS, within there is a folder named images, and in that folder is my image.
<!DOCTYPE html>
<html>
<title> "Google" </title>
<body>
<img src="css/images/google.png" />
</body>
</html>
1- create folder name: google-homepage
2- inside google-homepage create file name index.html , past the code bellow:
<!DOCTYPE html>
<html>
<title> "Google" </title>
<body>
<center>
<img src="CSS/images/google.png"/>
</center>
</body>
</html>
3- create folder inside google-homepage name CSS
4- create folder name images inside folder CSS and copy your image with name 'google.png'
5- now run on IE the file name index.html
good luck
try this:
<img src="../css/images/google.png" />
First check if your image is not corrupted. Also check where is your HTML file located?
If everything is fine check with the following code.
<img src = "./CSS/images/google.png">
Also check for directory name. Don't mix uppercase with lowercase. Hope that solves!
You can try:
<img src="file:///css/images/google.png" />
<!DOCTYPE html>
<html>
<title>Google</title>
<body>
<img src="C:\Users\Server\Desktop\CSS\images\a.jpg" />
</body>
</html>
Try to give the full path using directory path.
Hope it will help you
This should be so easy, but I'm missing something? somewhere?
I create an html script (test.html) located on a remote server.
<!DOCTYPE html>
<html>
<head>
<title>Testing IMG</title>
</head>
<body>
<img src="img/ErrorTracking.png" alt="Error Tracking" height="180" width="860">
</body>
</html>
File Structure
I've double checked and ErrorTracking.png is in fact the name of the image.
When I'm in my local browser and try to view the image it doesn't appear.
What am I missing? I've spent way to long on this simple task.
Try adding / or ~/ in your image source.
<img src="/img/ErrorTracking.png" alt="Error Tracking" height="180" width="860">
Check out this link for more details on urls in html.
On the server, relative to your test.html, is the image in a folder called img? Also, check the case, make sure you capitalized the file name and directory correctly.
If the html file is there, you should be able to take your html url:
http://www.yoursite.com/somewhere/test.html
and swap out the file name with img/ErrorTracking.png like this:
http://www.yoursite.com/somewhere/img/ErrorTracking.png
If that URL doesn't show the image when visiting it in your browser, the image is in the wrong location.
try this instead
<img src="/img/ErrorTracking.png" alt="Error Tracking" height="180" width="860">
try this
<img src="~/img/ErrorTracking.png" alt="Error Tracking" height="180" width="860">
if that doesnt helps
<img src="/img/ErrorTracking.png" alt="Error Tracking" height="180" width="860">
How can I create a clickable link that opens multiple images in one page only? I host all my images in photobucket. I was able to create a link to open one image only but not multiple images simultaneously.
Keep all 6 files in same directory
Image1(Name:html1.html)
<html><body>
<img src="/image1.jpg"><br>
</body></html>
Image2(Name:html2.html)
<html><body>
<img src="/image2.jpg"><br>
</body></html>
Image3(Name:html3.html)
<html><body>
<img src="/image3.jpg"><br>
</body></html>
Image4(Name:html4.html)
<html><body>
<img src="/image4.jpg"><br>
</body></html>
Image5(Name:html5.html)
<html><body>
<img src="image5.jpg"><br>
</body></html>
Main html
<html><body>
image1
image2
image3
image4
image5
</body></html>
I am a newbie and just a 12-year old boy.
Apologies for any mistakes
put your images inside a sperated html file like "images.html"
and link the hyperlink to that page
click me
this is HTML sample page: put all images in images folder in the same HTML page root directory
<html>
<head></head>
<body>
<img src="/images/01.jpg"/> <br>
<img src="/images/01.jpg"/> <br>
<img src="/images/01.jpg"/> <br>
<img src="/images/01.jpg"/> <br>
</body>
</html>
Working Example : http://jsbin.com/eluqod/4/
You don't need to be an expert. If you have the basic knowledge of HTML and JavaScript you can do it on your own. The easiest option is to use jQuery framework, it's a less write, do more JavaScript library that makes interactive web design easy.
What you have to do is create a <div> container and put all your images using HTML's <img> now you have to include the jQuery library in your document
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
Now use the hide and show or any other effects like FadeToggle, SlideToggle etc. effects (http://api.jquery.com/category/effects/) to toggle hide and show for the image container div. Setup your complete page with the image container and the link, first hide the image container using display:none; and now use the jQuery function to trigger a function on click of that anchor element.
This is the jQuery
$(document).ready(function(){
$('#showimg').on('click',function(){
//Trigger FadeToggle function on click
$('.image-container').fadeToggle();
});
});
And the HTML
<a id='showimg'>Hide/Show Images</a>
<div class='image-container' style='display:none;'>
<img src='images/sample.png'/>
<img src='images/sample.png'/>
<img src='images/sample.png'/>
<img src='images/sample.png'/>
<img src='images/sample.png'/>
</div>
Do remember to add the JavaScript library in your page.
check the code to learn about it: http://jsbin.com/eluqod/4/edit
You have to create different HTML files for all your image sets. You don't only have create the HTML files, you also have to upload those HTML documents online on a server so people can access it from anywhere.
1. Create an HTML file
Open notepad or any plain text editor and paste this in your file
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Your page title</title>
<style type='text/css'>
.image-container {text-align:center;}
img {width:80%;height:auto;display:block;margin:10px auto;border:2px solid black;padding:5px;}
</style>
</head>
<body>
<h2> The first 50 pictures (or whatever title you want)</h2>
<!-- Images below -->
<div class='image-container'>
<!-- Each images are in img tag, put the photobucket images link into the src attribute. Repeat the img tags if you want more images -->
<img src='http://i923.photobucket.com/albums/ad77/kihani_1996/Troll_Face_.png'/>
<img src='http://i923.photobucket.com/albums/ad77/kihani_1996/Troll_Face_.png'/>
<img src='http://i923.photobucket.com/albums/ad77/kihani_1996/Troll_Face_.png'/>
</div>
</body>
</html>
And save it with an understandable name ending with .html [name].html and save type as All Files - Make sure to save the file with encoding UTF-8. Just make the necessary changes and upload it to a server and link it.
Repeat the steps for more other HTML files with different images in it.