I'm coding html and putting in images but they wont load.
How can I fix this?
<img src="file:///D:/Minecraft.png">
<img src="file:///D:/Minecraft.png">
<img src="file:///D:/MinecraftDungeons.png">
<img src="file:///D:/MyFirendPedro.png">
<br>
<img src="file:///D:/Roblox.png">
<img src="file:///D:/Roblox_Vesteria.png">
<img src="file:///D:/Retro.jpg">
<br>
change your src path to src="D:/Minecraft.png"
Related
I have automatically generated HTML (almost impossible to change it because it is generated by a third party library) that can generate this kind of HTML
<p>
<img src="...">
<img src="...">
</p>
It produces something like this screenshot:
I would like to be able to center the 2 image horizontally (here there are 2 but we can I have 1 or more).
Added: Full html
<div class="innercontent" data-slide-fit="fit" style="font-size: 32px;"><h1>Images</h1>
<ul>
<li>Images can be local or from Internet. It is recommended to use local images for better performances.</li>
</ul>
<p><img src="img/photos-background.jpg" alt="" style="max-height: 267.9692951849267px;">
<img src="img/photos-background.jpg" alt="" style="max-height: 267.9692951849267px;"></p>
<ul>
<li>They are streched or resized in order to occupy available space while giving room for other elements.</li>
</ul>
</div>
If we consisder the fact that the images will have the same width, you can approximate this using translate and margin. It's an approximation because there is the tiny space between the images
<p>
<img src="https://picsum.photos/id/1/150/100" style="margin-left:50%;transform:translateX(-50%)">
</p>
<p>
<img src="https://picsum.photos/id/1/150/100" style="margin-left:50%;transform:translateX(-100%)">
<img src="https://picsum.photos/id/3/150/100" style="transform:translateX(-100%)" >
</p>
<p>
<img src="https://picsum.photos/id/1/150/100" style="margin-left:50%;transform:translateX(-150%)">
<img src="https://picsum.photos/id/3/150/100" style="transform:translateX(-150%)" >
<img src="https://picsum.photos/id/4/150/100" style="transform:translateX(-150%)" >
</p>
Or like below to avoid the wrapping.
<p>
<img src="https://picsum.photos/id/1/150/100" style="margin-left:50%;transform:translateX(-50%);">
</p>
<p>
<img src="https://picsum.photos/id/1/150/100" style="margin-left:50%;transform:translateX(-100%);margin-right:-150px;">
<img src="https://picsum.photos/id/3/150/100" >
</p>
<p>
<img src="https://picsum.photos/id/1/150/100" style="margin-left:50%;transform:translateX(-150%);margin-right:-225px;">
<img src="https://picsum.photos/id/3/150/100" >
<img src="https://picsum.photos/id/4/150/100" >
</p>
You can add one class to p tag parent:
p.image-center{display: flex;align-items: center;justify-content: center;}
I need to add a link to images in my slideshow(cycle2) which is also setup with a pager. How do I do that without knocking the image down of the slider??
<div
id="slideshow" class="cycle-slideshow"
data-cycle-manual-fx="scrollHorz"
data-cycle-pager-fx="fade"
data-cycle-manual-speed="400"
data-cycle-prev="#prev"
data-cycle-next="#next"
data-cycle-speed="600"
data-cycle-timeout="3000"
data-cycle-pager = "#pager"
data-cycle-pager-template="<a href='#'><img src='{{src}}' width=150 height=100></a>">
<img src="bear scene.jpg" alt=""/>
<img src="someimage.jpg" alt=""/>
<img src="otherimage.jpg" alt=""/>
<img src="picute.jpg" alt=""/>
<img src="somethingelse.jpg" alt=""/>
<img src="anotherpic_.jpg" alt=""/>
<img src="lastpic.jpg" alt=""/>
</div>
If you do not want to mess up with the css (which you need to do if you wrap the images in <a> tags) you can just use javascript onclick event for the images to open a link from the images like this:
<img onclick="window.open('http://www.google.com', '_blank')" src="bear scene.jpg" alt=""/>
Here are some examples: https://jsfiddle.net/2jjomuge/
I have a rollover effect over an image which can be seen here: http://www.sdimmigrationlawyers.com/ (bottom of page - deportation image)
I want to add a link to it, but my tag isn't working. How should I implement it to (1) have the rollover effect, and (2) have the link?
CSS:
<div class="view view-sixth">
<img class="alignleft wp-image-335 size-full" alt="" src="http://www.sdimmigrationlawyers.com/wp-content/uploads/2015/06/deportation.jpg">
<a href="http://www.sdimmigrationlawyers.com/immigration-services/deportation-defense">
<div class="mask"></div>
</a>
<p>
</p>
<div class="content">
<h2>Deportation Defense</h2>
</div>
</div>
HTML:
<div class="paragraph_dui_crime_box2">
<h2>San Diego Deportation Lawyer</h2>
<div class="view view-sixth">
<img class="alignleft wp-image-335 size-full" src="http://www.sdimmigrationlawyers.com/wp-content/uploads/2015/06/deportation.jpg" alt="" />
<a href="http://www.sdimmigrationlawyers.com/immigration-services/deportation-defense">
<div class="mask"></div>
</a>
<div class="content">
<h2>Deportation Defense</h2>
</div>
</div>
You could try wrapping the <a> tag around the whole section like so :
<a href="http://www.sdimmigrationlawyers.com/immigration-services/deportation-defense">
<img class="alignleft wp-image-335 size-full" alt="" src="http://www.sdimmigrationlawyers.com/wp-content/uploads/2015/06/deportation.jpg">
<div class="mask"></div>
<p>
</p>
<div class="content">
<h2>Deportation Defense</h2>
</div>
</a>
Your code with the headline "CSS" is HTML, so I assume it's what's the HTML-code of your page.
If you haven't any restrictions in HTML-markup, do the following and make sure that the DIV with the h2 is wrapped in an anchor leading somewhere:
<a href="...">
<div class="content"><h2>Deportation Defense</h2></div>
</a>
Currently, your anchor surrounds something with no content (that is not clickable), the content on the other side is not properly wrapped in an anchor (so it's neither clickable).
I am facing an amazing problem that my html program loads images from web but not from local hard drive. I tried alot by changing path and folder but still the issue is same.
<div class="row">
<div class="col-md-4">
<div class="thumbnail">
<figure>
<img src="/images/img.jpg"
alt="Ghoomo Phiro Pakistan Adventure Club">
</figure>
<div class="caption">
EveryThing goes there
</div>
</div>
</div>
<div class="col-md-4">
<div class="thumbnail">
<a href="#" class="thumbnail">
<img src="https://www.google.com/images/srpr/logo3w.png"
alt="Ghoomo Phiro Pakistan Adventure Club">
</a>
<div class="caption">
EveryThing goes there
</div>
</div>
</div>
Why does this work:
<img class="img-thumbnail img-responsive"
src="http://upload.wikimedia.org/wikipedia/sr/0/0c/Firefox-logo.png"
alt="" />
But not local images:
<img class="img-thumbnail img-responsive"
src="http://localhost/live/images/logo.png"
alt="" />
If you use src="/images/fileName" then the browser looks for images folder in the root directory. If images folder is in the same working directory then it won't work. You must have to replace it with either ./images/fileName or images/fileName
Check to see if your image is in one directory, and your css file in another. If this is the case, your css file will not be able to access the image without first going up the in the directory like so:
<img src="../images/img.jpg"
I did it when my image moved from assets/images to views/* or public. Also you can use image_tag Rails helper.
I have a simple div with three images in it and Im trying to make all three images separate html links
Am I missing something? This seems too easy, but it surely doesn't work:
<div><img src="img/dboarddown.png"><img src="img/ranking.png"><img src="img/analytics.png"></div>
span doesnt work either....I dont get the pointer and nothing is click-able.
this should work just fine
<div>
<a href="#link1">
<img src="img/dboarddown.png"/>
</a>
<a href="#link2">
<img src="img/ranking.png"/>
</a>
<a href="#link3">
<img src="img/analytics.png"/>
</a>
</div>
you only got one link:
<div>
<img src="img/dboarddown.png">
<img src="img/ranking.png">
<img src="img/analytics.png">
</div>
replace to:
<div>
<img src="img/dboarddown.png" alt="" />
<img src="img/ranking.png" alt="" />
<img src="img/analytics.png" alt="" />
</div>
<div><img src="img/dboarddown.png"/>
<img src="img/ranking.png"/>
<img src="img/analytics.png"/></div>
Last two images are not wrapped in to tag and don't forget to close img tag.