html not loading multiple images - html

I am trying to make an image page for a website and only one of the images loads. Anybody have advice?
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="main2.css">
</head>
<body bgcolor="black">
<h1 style="color:white"> Images </h1>
<div class="row">
<div class="column">
<img src="C:\Users\Scott Jackson\Downloads\boat.jpg" alt="C:\Users\Scott Jackson\Downloads\boat.jpg" class="image1" height="250">
</div>
<div class="column">
<img src="‪‪‪C:\Users\Scott Jackson\Downloads\boat.jpg" alt="C:\Users\Scott Jackson\Downloads\boat.jpg" class="image2" height="250">
</div>
</div>```
[1]: https://i.stack.imgur.com/YYky7.png

move your images to the same directory as your HTML files and change your img tag's src to a relative path, i.e. something like <img src="‪‪‪boat.jpg">

Related

Why my image don't appear as a cursor ? I tried everything but it dont appear

I'm trying to put my mouse with an image as cursor, to do that I try to "cursor:url" with * elements, it just don't work with this image.
`<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Pourquoi ça marche pas ?!</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<img src="image/arc-en-ciel.jpg" alt="">
<img src="image/grenouille.png" alt="">
<img src="image/grenouillerougelogo.png" alt="">
<img src="image/grenouillette.jpg" alt="">
<img src="image/homard.jpg" alt="">
<img src="image/jaune.jpg" alt="">
<img src="image/linPailleté.png" alt="">
<img src="image/Multi Homards.jpg" alt="">
<img src="image/NewYork.png" alt="">
<img src="image/pain.jpg" alt="">
<img src="image/pasDeCourse.jpg" alt="">
<img src="image/sac bleu.png" alt="">
</body>
</html>
img {
width: 100px;
height: 100px;
object-fit: cover;
}
*{
cursor: url("image/grenouillerougelogo.png");
}`
enter image description here
firstly, you need to provide a fallback cursor after your URL.
secondly, make sure you're using a small image, i believe the size limit is 128x128.
see below snippet using a fallback and a small enough image:
html, body {
cursor: url(https://icons.iconarchive.com/icons/roundicons/100-free-solid/16/target-icon.png), pointer;
}

Failed to render the images from Flicker

Trying out the image blog application to understand floatprpertiy of CSS. As the link is accurate from Flickr Photo Website, the webpage is unable to render the images.
Tried to look up w3schools for syntax of img tag of HTML.
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="photos.css">
<meta charset="utf-8">
</head>
<body>
<img src="https://flic.kr/p/qh8u7t">
<img src="https://flic.kr/p/nZybCW">
<img src="https://flic.kr/p/odUZLT">
<img src="https://flic.kr/p/pnzXJv">
<img src="https://flic.kr/p/qyz47B">
<img src="https://flic.kr/p/q2PmdR">
<img src="https://flic.kr/p/nM4vbe">
<img src="https://flic.kr/p/fvVSdn">
<img src="https://flic.kr/p/drtH69">
</body>
</html>

HTML id attribute doesn't work in Google Chrome

So.
First I used this <img onmouseover="preview.src=img1.src" id="img1" src="pic01.jpg" alt="Image Not Loaded"/> but it didn't work. I changed 'id' to 'name' and it worked. But name attribute is obsolete and not recommended to use. So what should I use? I'm trying to make a image gallery for my school project. And because it's a school project it must be "perfect" html. No any errors.
And btw. 'id' worked in Internet Explorer and Mozilla Firefox. But not in Google Chrome.
My whole code is this:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="thumbnails">
<img onmouseover="preview.src=img1.src" name="img1" src="image001.jpg" alt="Image Not Loaded"/>
<img onmouseover="preview.src=img2.src" name="img2" src="image002.jpg" alt="Image Not Loaded"/>
</div>
<br>
<div class="preview" style="text-align: center;">
<img name="preview" src="image001.jpg" alt="No Image Loaded"/>
</div>
</body>
</html>
And this works in Google Chrome when I change id to name.
Likely the variables preview and/or img1 are undefined. I assume you're trying:
<img onmouseover="document.getElementById('preview').src=document.getElementById('img1').src" id="img1" src="pic01.jpg" alt="Image Not Loaded"/>

Cannot link image to url (<img> tag inside of <a> tag not working for slideshow)

I have a slideshow and I want to link each slide to some url, which should be easy, but it's not working.
I'm using the slider from here: http://dev7studios.com/lean-slider/
If you don't want to download the code, I guess you can just use inspect element and edit it to test it yourself.
...
<div class="slide1 lean-slider-slide">
<img src="images/1.jpg" alt="" />
</div>
...
I also tried using onclick with javascript with no luck.
<script>
function test(){
document.location.href = 'http://www.google.com';
}
</script>
<img src="images/1.jpg" alt="" onclick="test()" />
I uploaded the default demo version to my website, linking all images to google.com. I have not made any changes to the original code other than adding the links. I assume that you've already tried that but I cannot see what the issue could be. Usually problems like these have to do with paths to scripts and stylesheets but these seem pretty straightforward. At least there's a working example to go by. The code I'm using is below.
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="utf-8" />
<title>Lean Slider Demo</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
<script src="scripts/modernizr-2.6.1.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="../lean-slider.js"></script>
<link rel="stylesheet" href="../lean-slider.css" type="text/css" />
<link rel="stylesheet" href="sample-styles.css" type="text/css" />
</head>
<body>
<div class="slider-wrapper">
<div id="slider">
<div class="slide1">
</><img src="images/1.jpg" alt="" />
</div>
<div class="slide2">
<img src="images/2.jpg" alt="" />
</div>
<div class="slide3">
<img src="images/3.jpg" alt="" />
</div>
<div class="slide4">
<img src="images/4.jpg" alt="" />
</div>
</div>
<div id="slider-direction-nav"></div>
<div id="slider-control-nav"></div>
</div>
<script type="text/javascript">
$(document).ready(function() {
var slider = $('#slider').leanSlider({
directionNav: '#slider-direction-nav',
controlNav: '#slider-control-nav'
});
});
</script>
</body>
</html>
Its not working correctly.
Expected is each image can have their own hyperlinks, but with lean-slider, only last hyperlink is applicable with all images.
In you case you have given google.com with each image so it seems it is working fine, but once you change each URL then you will notice that it is not going to last hyperlink.
Thanks,
Krishan
but the solution i cant have diferent URL´s, always take the last link; play with the css you can force the position of elements and enable yhe link for each image:
/*lean slider overwrite*/
#slider-control-nav, #slider-direction-nav
{
z-index:3;
}
.lean-slider-slide.current
{
z-index:2;
}
.lean-slider-slide.current a
{
float:left;
}

Change image on hover

How can I change this exact code to do the hovering effect on mouseover?
I tried following some of the other questions and answers, but I could not really follow them.
So the HTML is:
<img src="R3.jpg" width=700 height=300 />
<div>
<img src="SSX.jpg" height=100 width=120 />
<img src="MaxPayne3Cover.jpg" height=100 width=120 />
<img src="NC.jpg" height=100 width=120 />
</br>
</div>
Now what I want to do is change the big size image when the mouse hovers over the small images.
Try this it`s so easy and the shortest one, just change the Image's URL:
<a href="TARGET URL GOES HERE">
<img src="URL OF FIRST IMAGE GOES HERE"
onmouseover="this.src='URL OF SECOND IMAGE GOES HERE';"
onmouseout="this.src='URL OF FIRST IMAGE GOES HERE';">
</a>
Try the following code. It's working
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title><br />
</head>
<body>
<p>
<script type="text/javascript" language="javascript">
function changeImage(img){
document.getElementById('bigImage').src=img;
}
</script>
<img src="../Pictures/lightcircle.png" alt="" width="284" height="156" id="bigImage" />
<p> </p>
<div>
<p>
<img src="../Pictures/lightcircle2.png" height=79 width=78 onmouseover="changeImage('../Pictures/lightcircle2.png')"/>
</p>
<p><img src="../Pictures/lightcircle.png" alt="" width="120" height="100" onmouseover="changeImage('../Pictures/lightcircle.png')"/></p>
<p><img src="../Pictures/lightcircle2.png" alt="" width="78" height="79" onmouseover="changeImage('../Pictures/lightcircle2.png')"/></p>
<p> </p>
</br>
</div>
</body>
</html>
I modified the code, like it will work with some delay in it.. But still, it is not animating..
function changeImage(img){
// document.getElementById('bigImage').src=img;
setTimeout(function() {document.getElementById('bigImage').src=img;},1250);
}
Or do like this:
<a href="SSX.html">
<img src="SSX.jpg"
onmouseover="this.src='SSX2.jpg';"
onmouseout="this.src='SSX.jpg';"
height=100
width=120 />
</a>
I think this is the easiest way.
No JavaScript needed if you are using this technique
<div class="effect">
<img class="image" src="image.jpg" />
<img class="image hover" src="image-hover.jpg" />
</div>
the you will need css to control it
.effect img.image{
/*type your css here which you want to use for both*/
}
.effect:hover img.image{
display:none;
}
.effect img.hover{
display:none;
}
.effect:hover img.hover{
display:block;
}
remember to give some class to div and mention it in your css name to avoid trouble :)
The easiest way for Roll Over image or Mouse Over image for web pages menus
<a href="#" onmouseover="document.myimage1.src='images/ipt_home2.png';"
onmouseout="document.myimage1.src='images/ipt_home1.png';">
<img src="images/ipt_home1.png" name="myimage1" />
</a>
<script type="text/javascript">
function changeImage(img){
img.src=URL_TO_NEW_IMAGE;
}
</script>
<a href="RR.html"><img id="bigImage"
onmouseover="changeImage(document.getElementById('bigImage'));"
src="R3.jpg"
width=700
height=300/></a>
<div>
<a href="SSX.html" ><img src="SSX.jpg" height=100 width=120/></a>
<img src="MaxPayne3Cover.jpg" height=100 width=120/>
<a href="NC.html" ><img src="NC.jpg" height=100 width=120/></a>
</br>
</div>
If you don't want to do Javascript you can use CSS and :hover selector to get the same effect.
Here's how:
index.html:
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<title>Image hover example</title>
</head>
<body>
<div class="change_img"></div>
</body>
</html>
stylesheet.css
.change_img { background-image:url('img.png'); }/*Normal Image*/
.change_img:hover { background-image:url('img_hover.png'); }/*On MouseOver*/
Just Use this:
Example:
<img src="http://nineplanets.org/planets.jpg"
onmouseover="this.src='http://nineplanets.org/planetorder.JPG';"
onmouseout="this.src='http://nineplanets.org/planets.jpg';">
</img>
Works best with the Pictures being the same size.
Copy This
<img src="IMG-1"
onmouseover="this.src='IMG-2';"
onmouseout="this.src='IMG-1';">
</img>
Here is a simplified code sample:
.change_img {
background-image: url(image1.jpg);
}
.change_img:hover {
background-image: url(image2.jpg);
}