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>
Related
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.
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 have a trouble making website. I can't make 3 photos align in one line.
<div>
<img src="Images/mcdonalds.jpg" width="300px" height="180px">
</div>
<div>
<img src="Images/cilipica.jpg" width="300px" height="180px">
</div>
<div>
<img src="Images/mythay.jpg" width="300px" height="180px" >
</div>
float: left is used
div is inherently display:block
you need to use something like a span which has display:inline-block
https://jsfiddle.net/7daffjh8/2/
See this fiddle
Change the display property of div to inline-block instead of block
Add the below given to your CSS
div{
display:inline-block;
}
Try this
add float:left on div
div {
float:left
}
<div>
<img src="Images/mcdonalds.jpg" width="300px" height="180px">
</div>
<div>
<img src="Images/cilipica.jpg" width="300px" height="180px">
</div>
<div>
<img src="Images/mythay.jpg" width="300px" height="180px" >
</div>
I hope this would help.
See the Example on Fiddle
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title></title>
<style>
div.container {
display:inline-block;
}
</style>
</head>
<body>
<div class="container">
<img src="http://placehold.it/300x180" height="300" width="180" />
</div>
<div class="container">
<img src="http://placehold.it/300x180"/ height="300" width="180" />
</div>
<div class="container">
<img src="http://placehold.it/300x180" height="300" width="180" />
</div>
</div>
</body>
</html>
Try this:
You had used multiple . After closing of next tag content always displayed in next line.
<div>
<img src="Images/mcdonalds.jpg" width="300px" height="180px">
<img src="Images/cilipica.jpg" width="300px" height="180px">
<img src="Images/mythay.jpg" width="300px" height="180px" >
</div>
you have to make the divs display inline. under CSS
div{
display:inline;
}
or
<div style="display:inline;">
<img src="Images/mcdonalds.jpg" width="300px" height="180px">
</div>
<div style="display:inline;">
<img src="Images/cilipica.jpg" width="300px" height="180px">
</div>
<div style="display:inline;">
<img src="Images/mythay.jpg" width="300px" height="180px" >
</div>
div.minihalf-width{
width:30%;
float:left
}
div.minihalf-width img{
width: 100%;
}
<section>
<div class="minihalf-width">
<img src="latest-work/work-1.png" alt="">
</div>
<div class="minihalf-width">
<img src="latest-work/work-2.jpg" alt="">
</div>
<div class="minihalf-width">
<img src="latest-work/work-3.jpg" alt="">
</div>
</section>
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;
}
I'm trying to get a link to a page working correctly when an image is clicked. On this jsFiddle you'll see three circular images. When the mouse is hovered over any of them, a background shadow image is rendered. When you click on the 'law firms' image, a short HTML page with some text should be displayed. What happens is that the link to the law firm text is rendered not as the image itself, but as a '>' character - see screenshot below.
Can anyone guide me how to make the image act as the link, please? Also ensuring that the background image continues to be centred over the law firms image when the mouse is hovered over it.
CSS:
.center {text-align: center;}
#sfimages {padding:15px;}
#sfimages:hover {
background-image: url(http://ubuntuone.com/1SRrDB8i8cBtpm3Smxaz5r);
background-repeat: no-repeat;
background-position:center;
}
HTML:
<body>
<table style="width: 100%">
<tr>
<td class="center">
<div id="sfimages">
<a href="http://ubuntuone.com/3JHwAhFuNUCVfq1QOOjBGG"> >
<object type="image/svg+xml"
data="http://ubuntuone.com/5b5ZUS86nHAffWiOirDwFr">
<img src="http://ubuntuone.com/12qOaTGCZYzQtqFJpaGbPV" alt="" />
</object>
</a>
</div>
</td>
<td class="center">
<div id="sfimages">
<object type="image/svg+xml"
data="http://ubuntuone.com/6tkHm9c2r1eH9PMB9Nr3Ux">
<img src="http://ubuntuone.com/54AaqhQUU8npACF2vXzKFp" alt="" />
</object>
</div>
</td>
<td class="center">
<div id="sfimages">
<object type="image/svg+xml"
data="http://ubuntuone.com/7Ur09JXlGVvF2GhXFbLXlx">
<img src="http://ubuntuone.com/4CXw05d1dsSf9VhAIPNZf6" alt="" />
</object>
</div>
</td>
</tr>
</table>
Sorry for taking a while, its been a busy day for me and I just had enough time to come back around to your question. Here is what I recommend. It looks like the code you are working with is produced from inkscape? When it runs the source code is a nuts, especially inside the object area. But have no fear if you want links. Simply make the following slight adjustments, and you should be on your way with links!
The CSS:
.center {
text-align: center;
}
#sfimages {
padding:15px;
position:relative;
width:380px;
height:273px;
}
#sfimages:hover {
background-image: url(http://ubuntuone.com/1SRrDB8i8cBtpm3Smxaz5r);
background-repeat: no-repeat;
background-position:center;
}
#ext-site {
display:block;
width:380px;
height:273px;
position:absolute;
z-index:9999;
}
The HTML:
<table style="width: 100%">
<tr>
<td class="center">
<div id="sfimages">
<a id="ext-site" href="http://ubuntuone.com/3JHwAhFuNUCVfq1QOOjBGG"></a>
<object type="image/svg+xml"
data="http://ubuntuone.com/5b5ZUS86nHAffWiOirDwFr">
<img src="http://ubuntuone.com/12qOaTGCZYzQtqFJpaGbPV" alt="" />
</object>
</div>
</td>
<td class="center">
<div id="sfimages">
<object type="image/svg+xml"
data="http://ubuntuone.com/6tkHm9c2r1eH9PMB9Nr3Ux">
<img src="http://ubuntuone.com/54AaqhQUU8npACF2vXzKFp" alt="" />
</object>
</div>
</td>
<td class="center">
<div id="sfimages">
<object type="image/svg+xml"
data="http://ubuntuone.com/7Ur09JXlGVvF2GhXFbLXlx">
<img src="http://ubuntuone.com/4CXw05d1dsSf9VhAIPNZf6" alt="" />
</object>
</div>
</td>
</tr>
</table>
This is classic trick, involving an asbolute positioned anchor link, inside of a relative display block element. As long as the anchor stretches to the size of it's parent's size, it acts as an invisible button on top of the entire section.
Check out my new Fiddle
There was spare character:
please check following code (in a comment there is a link to the full code):
<table style="width: 100%">
<tr>
<td class="center">
<div id="sfimages">
<a href="http://ubuntuone.com/3JHwAhFuNUCVfq1QOOjBGG">
<object type="image/svg+xml"
data="http://ubuntuone.com/5b5ZUS86nHAffWiOirDwFr">
<img src="http://ubuntuone.com/12qOaTGCZYzQtqFJpaGbPV" alt="" />
</object>
</a>
</div>
</td>
<td class="center">
<div id="sfimages">
<object type="image/svg+xml"
data="http://ubuntuone.com/6tkHm9c2r1eH9PMB9Nr3Ux">
<img src="http://ubuntuone.com/54AaqhQUU8npACF2vXzKFp" alt="" />
</object>
</div>
</td>
<td class="center">
<div id="sfimages">
<object type="image/svg+xml"
data="http://ubuntuone.com/7Ur09JXlGVvF2GhXFbLXlx">
<img src="http://ubuntuone.com/4CXw05d1dsSf9VhAIPNZf6" alt="" />
</object>
</div>
</td>
</tr>
</table>
Line 6:
<a href="http://ubuntuone.com/3JHwAhFuNUCVfq1QOOjBGG"> >
Remove the extra closing bracket.