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.
Related
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"
I need to link this image in my website to another url but I cannot figure it out. I tried to use an <a> tag but when it deployed, I would click on the link and it still wouldn't redirect me. I'll attach the code below:
<div class="portfolio-item padd-15">
<div class="portfolio-item-inner shadow-dark">
<div class="portfolio-img">
<img src="images/CGS Official Logo 500 × 360 px.png" alt="">
</div>
</div>
</div>
putting the img inside an anchor tag<a> <img> </a>
img {
width: 150px
}
<div class="portfolio-item padd-15">
<div class="portfolio-item-inner shadow-dark">
<div class="portfolio-img">
<a href="https://stackoverflow.com/">
<img src="https://images.unsplash.com/photo-1663668244836-68998f4e9151?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyfHx8ZW58MHx8fHw%3D&auto=format&fit=crop&w=500&q=60" alt="">
</a>
</div>
</div>
</div>
To add a link to your img tag surround it with your anchor tags.
See this snippet:
<div class="portfolio-item padd-15">
<div class="portfolio-item-inner shadow-dark">
<div class="portfolio-img">
<a href="https://google.com">
<img src="images/CGS Official Logo 500 × 360 px.png" alt="image">
</a>
</div>
</div>
</div>
I've added alt text so you can see the URL functioning as intended.
W3schools tag
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/
Code like this:
<div>Overall Advance Rating(1 foodees rated)</div>
<a href="#">
<img src="#"/>
<img src="#"/>
<img src="#"/>
<img src="#"/>
<img src="#"/>
</a>
Here am getting cursor after rating images also. How can i handle cursor until images only. I had tried with width and max width but not able to get solution.
You are trying to only have the pointer cursor over the images and not in between if I understand your question correctly. If so, try this:
a { cursor: default; }
a img { cursor: pointer; }
<div>Overall Advance Rating(1 foodees rated)</div>
<a href="#">
<img src="#"/>
<img src="#"/>
<img src="#"/>
<img src="#"/>
<img src="#"/>
</a>
Otherwise I believe you might have to try harder to get your question across.
See comments please, we need to get a better explanation of what you need. If I understand you, you need to individualize img with anchor? Maybe this?
<a href="#">
<img src="#"/>
</a>
<a href="#">
<img src="#"/>
</a>
etc etc
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).