Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 11 months ago.
Improve this question
I am making a photography website and I wanted to have a gallery of images and a list like
Wildlife
Landscape
Ocean
and when I click on them it opens a gallery of images.
I tried looking some tutorials up on youtube and google but couldn't find anything and since I'm not very experienced in HTML and CSS I don't know where to start
Currently I only have a gallery like this
<h1>### </h1>
<h1>###</h1>
<table align="center">
<tr>
<td>
<img src="Images/plant_with_web.png" height="150" width="200" alt="rocks" />
</td>
<td>
<img src="Images/rock_in_water.png" height="150" width="200" alt="rock_on_log" />
</td>
<td>
<img src="Images/rock_on_log.png" height="150" width="200" alt="sunset" />
</td>
</tr>
<tr>
<td>
<img src="Images/Rocks.png" height="150" width="200" alt="sun_on_beach" />
</td>
<td>
<img src="Images/sunset.png" height="150" width="200" alt="rock_in_water" />
</td>
<td>
<img src="Images/waves_crashing.png" height="150" width="200" alt="bird" />
</td>
</tr>
<tr>
<td>
<img src="Images/bird.png" height="150" width="200" />
</td>
<td>
<img src="Images/birdrock.png" height="150" width="200" />
</td>
<td>
<img src="Images/DSC04758.jpg" height="150" width="200" />
</td>
</tr>
You mean like this??
button {
background-color:white;
border:0px;
}
button:hover {
text-decoration:underline;
}
<button> Button 1 as a text
</button>
<button> Button 2 as a text
</button>
$(document).ready(function() {
$("button#wildlife").click(function() {
$(".wildlife> img").toggle();
$(".landscape> img").hide();
$(".ocean> img").hide();
});
$("button#landscape").click(function() {
$(".landscape> img").toggle();
$(".ocean> img").hide();
$(".wildlife> img").hide();
});
$("button#ocean").click(function() {
$(".ocean> img").toggle();
$(".wildlife> img").hide();
$(".landscape> img").hide();
});
});
button {
background-color: white;
border: 0px;
}
button:hover {
text-decoration: underline;
cursor: pointer;
}
.landscape>img {
display: none;
}
.ocean>img {
display: none;
}
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<body>
<button id="wildlife">Wildlife</button><br>
<button id="landscape">Landscape</button><br>
<button id="ocean">Ocean</button>
<div class="wildlife">
<img src=https://image.shutterstock.com/image-vector/squirrel-silhouette-hand-drawn-image-260nw-748191586.jpg eight="150" width="200" alt="rocks" />
<img src=https://image.shutterstock.com/image-vector/squirrel-silhouette-hand-drawn-image-260nw-748191586.jpg eight="150" width="200" alt="rocks" />
<img src=https://image.shutterstock.com/image-vector/squirrel-silhouette-hand-drawn-image-260nw-748191586.jpg eight="150" width="200" alt="rocks" />
<img src=https://image.shutterstock.com/image-vector/squirrel-silhouette-hand-drawn-image-260nw-748191586.jpg eight="150" width="200" alt="rocks" />
<img src=https://image.shutterstock.com/image-vector/squirrel-silhouette-hand-drawn-image-260nw-748191586.jpg eight="150" width="200" alt="rocks" />
<img src=https://image.shutterstock.com/image-vector/squirrel-silhouette-hand-drawn-image-260nw-748191586.jpg eight="150" width="200" alt="rocks" />
</div>
<div class="landscape">
<img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/54/cb/51/beautiful-morning-green.jpg" height="150" width="200" alt="rocks" />
<img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/54/cb/51/beautiful-morning-green.jpg" height="150" width="200" alt="rocks" />
<img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/54/cb/51/beautiful-morning-green.jpg" height="150" width="200" alt="rocks" />
<img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/54/cb/51/beautiful-morning-green.jpg" height="150" width="200" alt="rocks" />
<img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/54/cb/51/beautiful-morning-green.jpg" height="150" width="200" alt="rocks" />
<img src="https://media-cdn.tripadvisor.com/media/photo-s/0e/54/cb/51/beautiful-morning-green.jpg" height="150" width="200" alt="rocks" />
</div>
<div class="ocean">
<img src="https://image.shutterstock.com/image-photo/school-dolphins-underwater-photography-260nw-1582116775.jpg" height="150" width="200" alt="rocks" />
<img src="https://image.shutterstock.com/image-photo/school-dolphins-underwater-photography-260nw-1582116775.jpg" height="150" width="200" alt="rocks" />
<img src="https://image.shutterstock.com/image-photo/school-dolphins-underwater-photography-260nw-1582116775.jpg" height="150" width="200" alt="rocks" />
<img src="https://image.shutterstock.com/image-photo/school-dolphins-underwater-photography-260nw-1582116775.jpg" height="150" width="200" alt="rocks" />
<img src="https://image.shutterstock.com/image-photo/school-dolphins-underwater-photography-260nw-1582116775.jpg" height="150" width="200" alt="rocks" />
<img src="https://image.shutterstock.com/image-photo/school-dolphins-underwater-photography-260nw-1582116775.jpg" height="150" width="200" alt="rocks" />
</div>
</body>
</html>
I don't really understand your problem.
However, if you are trying to make a button then use the <input type='text'> button </input> or the button element.
Or if you want an image to be clickable then use <img href="image_URL>"
If galleries are on their separate page: use Wildlife
If galleries will open as a full screen pop-up: use <button id="wildlife">Wildlife</button>
You can also use <details><summary> element to get the same functionality without depending more on JavaScript
EDIT 1:
you can us a js library like PhotoSwipe,
it could fit perfectly in your use case
Use input type="submit" value="add"
Value mean Name
This button name is add
I don't recommend the use of a table for a gallery. You can maybe put each gallery in a different html page and use the tag to access them. like:
Wildelife
But if you want them to appear or slide dynamically on the same page you may need some javascript or jquery.
you should use <img src="" alt="" />
Hey your question is a bit unclear, but if you want a button that you click that opens up a wildlife gallery you can have something like this <button> <a href = www.wildlife-photos.com/gallery></a> Wildlife </button> or just make a page called wildlife.html and make the button direct to it <button> <a href = wildlife.html></a> Wildlife </button>
I hope this helps :D
Sorry if this isn't much of a direction.
Related
so i have a table and i want the buttons side by side instead of stacked
Css or HTML is fine but not js sorry if the question isnt very clear im still new to this :/
i tried
display: flex;
align-items: center;
justify-content: center;
but that just does this
ive included the CSS and html code snippett bellow thanks to everyone who can help i kept the alts instead of the actual image because this is for my photography website
#charset "UTF-8";
button{
display:inline-block;
padding:0.5em 3em;
border:0.16em solid #FFFFFF;
margin:0 0.3em 0.3em 0;
box-sizing: border-box;
text-decoration:none;
text-transform:uppercase;
font-family:'Roboto',sans-serif;
font-weight:400;
color:#FFFFFF;
text-align:center;
transition: all 0.15s;
}
button:hover{
color:#DDDDDD;
border-color:#DDDDDD;
}
button:active{
color:#BBBBBB;
border-color:#BBBBBB;
}
#media all and (max-width:30em){
button{
display:block;
margin:0.4em auto;
}
}
<div style="text-align:center">
<button id="wildlife">EG </button><br>
<button id="landscape">EG </button><br>
<button id="ocean">EG </button>
</div>
<div class="wildlife">
<img src="Images/animals/DSC04758.jpg" eight="150" width="200" alt="rocks" />
<img src="Images/animals/bird.png" eight="150" width="200" alt="rocks" />
<img src="Images/animals/birds1.png" eight="150" width="200" alt="rocks" />
<img src="Images/animals/birds2.png" eight="150" width="200" alt="rocks" />
<img src="Images/animals/birds3.png" eight="150" width="200" alt="rocks" />
<img src="Images/animals/birds4.png" eight="150" width="200" alt="rocks" />
</div>
<div class="landscape">
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
</div>
<div class="ocean">
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
<img src="" height="150" width="200" alt="rocks" />
</div>
<font face="sans-serif" color="#017bf5" size="5" align="center">
<h1>### </h1>
</font>
<font face="sans-serif" color="#444" size="3" align="center">
<h1>###</h1>
</font>
</body>
In Your HTML Code, you used <br> tag after each button. Which pushes your button to the next line.
Solution: Remove <br> tags after button elements.
A div box around the buttons with display: flex; and flex-direction: row; Should work
I'm trying to implement this code to preload images, but it isn't working.
Add CSS:
div#preload { display: none; }
In the footer within the </body> tag:
<div id="preload">
<img src="http://gearenergy.com/wp-content/uploads/2018/04/Home-Banner-final.jpg" width="1140px" height="500px" alt="Home-Banner_01" />
<img src="http://gearenergy.com/wp-content/uploads/2018/04/front-page-background.jpg" width="550px" height="400px" alt="PresentationBG_02" />
<img src="http://gearenergy.com/wp-content/uploads/2018/07/orange-color-overlay.png" width="600px" height="600px" alt="FinanceReportBG_03" />
<img src="http://gearenergy.com/wp-content/uploads/2018/04/front-page-background-blue.jpg" width="550" height="400" alt="LatestNewsBG_04" />
</div>
Obviously I've replaced the HTML and repointed to the images, but it's still not working.
Personally I would use JavaScript in this case. But if you want only CSS you can preload all images in a div tag which is positioned in hidden part of window like follows:
#preload
{
position:absolute;
top:-9999px;
left:-9999px;
}
<div id="preload">
<img src="http://gearenergy.com/wp-content/uploads/2018/04/Home-Banner-final.jpg" width="1140px" height="500px" alt="Home-Banner_01" />
<img src="http://gearenergy.com/wp-content/uploads/2018/04/front-page-background.jpg" width="550px" height="400px" alt="PresentationBG_02" />
<img src="http://gearenergy.com/wp-content/uploads/2018/07/orange-color-overlay.png" width="600px" height="600px" alt="FinanceReportBG_03" />
<img src="http://gearenergy.com/wp-content/uploads/2018/04/front-page-background-blue.jpg" width="550" height="400" alt="LatestNewsBG_04" />
</div>
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I'm trying to make a stack of images using HTML and CSS, that if I hover or click on any of them, it will be enlarged in the same page. This is what I've been able to do:
<img src ="mark1.jpg" height="150" width="300" />
<img src ="mark2.jpg" height="150" width="300" />
<img src ="mark3.jpg" height="150" width="300" />
<img src ="mark4.jpg" height="150" width="300" />
<img src ="watson1.jpg" height="150" width="300" />
<img src ="watson2.jpg" height="150" width="300" />
<img src ="watson3.jpg" height="150" width="300" />
<img src ="watson4.jpg" height="150" width="300" />
<img src ="watson5.jpg" height="150" width="300" />
<img src ="morgan1.jpg" height="150" width="300" />
<img src ="nyong1.jpg" height="150" width="300" />
<img src ="lion1.jpg" height="150" width="300" />
One possibililty using hover only is to use transform:scale
JSfiddle Demo
CSS
img {
transition:transform 0.25s ease;
}
img:hover {
-webkit-transform:scale(1.5); /* or some other value */
transform:scale(1.5);
}
Add all the images to a container, for example:
<div class="imageContainer">
<img src ="lion1.jpg" height="150" width="300" />
</div>
Then set some CSS that does something to all <img> tags in that container when hovered:
.imageContainer > img:hover {
width: 500px;
height: 200px;
}
I have not tried this but I think it might get you on the right track to experiment yourself.
Check this fiddle
HTML:
<body>
<div id="rightImage">
<img src="https://www.gravatar.com/avatar/703327d6394d273e741186dbc0109f4f?s=128&d=identicon&r=PG&f=1" alt="image"/>
</div>
</body>
CSS:
#rightImage
{
height:275px;
float:left;
position:relative;
}
#rightImage:hover img
{
height: 300px;
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I want to write three lines of text below every image in this marquee slide-show.
Fiddle
<marquee bgcolor="#FFFFFF" height="5%" width="600px" direction="left" scrolldelay="120" align="middle" >
<img src="http://static.ddmcdn.com/gif/storymaker-best-hubble-space-telescope-images-20092-514x268.jpg" width="120px" height="120px" border="5"/>
<img src="http://www.pictures-of-cats.org/images/Pixiebob-cat-list-of-cat-breeds-pictures-of-cats.jpg" width="120px" height="120px" border="5"/>
<img src="http://www.pictures-of-cats.org/images/ragdoll-cat-small-pictures-of-cats.jpg" height="120px" width="120px" border="5"/>
<img src="http://www.pictures-of-cats.org/images/ragdoll-cat-small-pictures-of-cats.jpg" height="120px" width="120px" border="5" />
<img src="http://www.pictures-of-cats.org/images/Pixiebob-cat-list-of-cat-breeds-pictures-of-cats.jpg" height="120px" width="120px" border="5" />
<img src="http://www.pictures-of-cats.org/images/Pixiebob-cat-list-of-cat-breeds-pictures-of-cats.jpg" height="120px" width="120px" border="5" />
<img src="http://static.ddmcdn.com/gif/storymaker-best-hubble-space-telescope-images-20092-514x268.jpg" height="120px" width="120px" border="5"/>
<img src="Animal68.gif" height="120px" width="120px" border="5" />
<img src="http://static.ddmcdn.com/gif/storymaker-best-hubble-space-telescope-images-20092-514x268.jpg" height="120px" width="120px" border="5" />
<img src="http://www.pictures-of-cats.org/images/Pixiebob-cat-list-of-cat-breeds-pictures-of-cats.jpg" height="120px" width="120px" border="5" />
</marquee>
Is this what you are looking for?:
JSFIDDLE
wrapping img tag with a div then style it like this: .item { float:left} (class item it is whatever you like, i just used here because that was the class used on the FIDDLE)
Avoid using <marquee> for images! But if you need to, then you can use it this way: Fiddle
<marquee bgcolor="#FFFFFF" height="5%" width="600px" direction="left" scrolldelay="120" align="middle" >
<div style="width:120px; display: inline-block">
<img src="http://static.ddmcdn.com/gif/storymaker-best-hubble-space-telescope-images-20092-514x268.jpg" width="120px" height="120px" border="5"/>
<div>Text</div>
</div>
<div style="width:120px; display: inline-block">
<img src="http://static.ddmcdn.com/gif/storymaker-best-hubble-space-telescope-images-20092-514x268.jpg" width="120px" height="120px" border="5"/>
<div>Text</div>
</div>
</marquee>
I want to make a navigation bar, with each item having its own image with the name of the item written on top of that. So there should be a few images in a row, and each one has some text written on it. This is the row of images I got:
<div class="navigation" align="center">
<img src="images/bn_blue.png" width="120" height="70" alt="" />
<img src="images/bn_blue.png" width="120" height="70" alt="" />
<img src="images/bn_blue.png" width="120" height="70" alt="" />
<img src="images/bn_blue.png" width="120" height="70" alt="" />
<img src="images/bn_blue.png" width="120" height="70" alt="" />
<img src="images/bn_blue.png" width="120" height="70" alt="" />
</div>
<div class="navigation" align="center">
<ul><li><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div></li>
<li><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div></li>
<li><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div></li>
<li><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div></li>
<li><div style="background-image:url(images/bn_blue.png);width:120px;height:70px">xyz</div><li>
</ul>
</div>
<style>
li
{
display:inline-block;
}
</style>
Give each a href a class ie .home_bg etc.
Then in css add a
.home_bg {
background-image: url(/example/example.png)
}
do this for each image if they are different. Then in the html remove img tags