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.
Related
I'm a beginner, alright?
I'm trying to build an HTML page that needs social media logos. I have all the ones I need except for good reads.
https://www.goodreads.com/
I can't find how to build one in CSS. I've tried to copy the image, that doesn't work. Does anyone else know how to build a goodreads tag?
you can download a goodreads svg at Goodreads, open the file in your editor, copy the content and put it where you need it in your HTML file.
On goodreads.com, copy the image address and paste in into a new tab. If the new tab contains only the image, copy the image address again and paste it between the src tabs. Otherwise, keep copying the image address from the new pages.
Depends if you want to just put in the logo or make the logo a link to your goodreads account
For just the image you could use
<html>
<head>
<!--Put your metadata and link css here-->
</head>
<body>
<img src="https://i.stack.imgur.com/g0KBL.png" alt="Goodreads">
</body>
</html>
And for a social media link I recomend using a icons library like FontAwesome
<html>
<head>
<script src="https://kit.fontawesome.com/393a279287.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="fa fa-goodreads"></div>
</body>
</html>
Anyways good luck!
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 do to a simple HTML page but for some reason some images didn't appear although the src was correct. In order to discover the origin of the problem I tried to insert the images on the body of the HTML document (outside of divs and without the javascript functions I was using to manipulate the images). They also didn't appear! The src is correct and the images are displayed if I open them in the browser (if I type the address of the image in the url bar).
Here is the code:
<!DOCTYPE html>
<html>
<head>
<title>Site2</title>
<meta charset="UTF-8">
</head>
<body>
<!-- This image appears -->
<img src="images/header.jpg" style="width:100%">
<!-- This image don't -->
<img src="images/img_1.jpg" alt="tigre" style="width:100%">
</body>
</html>
I can't understand the origin of the problem. I tryed to open the images in a editor and save both of them to see if was a problem of encoding or something like that but the problem persisted, the imagens that appeared before continued to appear and the others continued to not show up.
EDIT: If i resized the second image to the same size of the first and save it on a new file it starts to appear although blurry (due to the resizing):
image 1: 1024 x 300
image 2: 850 x 315
The page is just local (I'm not using server programs) and I am using Edge.
Thank you in advance:
works and looks ok,
https://jsfiddle.net/hts3wdjx/
<!-- This image appears -->
<img src="http://placehold.it/350x150" style="width:100%;" />
<!-- This image don't -->
<img src="http://placehold.it/350x150" alt="tigre" style="width:100%;"/>
you problem is images/
<body>
<!-- This image appears -->
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQBLVUTEfwcBSoQz_SNLw41VH_B76zVbXMgw1FPlQ26cYgC61MyPA" style="width:100%;" />
<!-- This image don't -->
<img src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQBLVUTEfwcBSoQz_SNLw41VH_B76zVbXMgw1FPlQ26cYgC61MyPA" alt="tigre" style="width:100%;" />
</body>
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 have 1 JSP page and 1 HTML page. I am including that HTML page in JSP dynamically like below.
<jsp:include page="<%=htmlPageURL%>" flush="true" />
The htmpPageUrl value is /temp/1232334333.html
In 1232334333.html, I have an image tag:
<img width=135 height=48
src="1232334333_files/image003.jpg"> </img>
Here is the folder structure:
MyWebApp/temp/1232334333.html
MyWebApp/temp/1232334333_files/image003.jpg
The problem is when I include the HTML page in JSP, it displays all the text fine, but could not load the image.
My understanding:
As I include HTML in JSP, all image paths should be relative to my JSP and not my HTML. But I really can't change HTML source. Is there any way to handle this scenario?
img tag is in correct.
Wrong: <img width=135 height=48 src="1232334333_files/image003.jpg" </img>
Correct
<img width=135 height=48 src="1232334333_files/image003.jpg"/>
If you don't have access to your .html page to modify the source, then you can try to modify it using jQuery in your .jsp file. If you know the position of the <src /> tag (i supposed it's in the first position after the page is included), when you can do as follows:
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("img:first").attr("src","/temp/1232334333_files/image003.jpg");
var src = $("img:first").attr("src");
alert(src);
});
</script>
</head>
<body>
<!-- The following image is inserted after the <jsp:include /> function is processed -->
<img width=135 height=48 src="1232334333_files/image003.jpg" />
</body>
</html>
The alert function will display /temp/1232334333_files/image003.jpg.
I'm not sure if it will work, but it's worth a try.
<base> tag does the trick for me.
e.g. <base href="http://localhost:8080/MyWebApp/temp"></base>