What should I do in this case:
<figure>
<a href="#" class="portfolio-item">
<div class="picture"><img src="images/portfolio/recent-01.jpg" alt=""/><div class="image-overlay-link"></div></div>
<figcaption class="item-description">
<h5>Mountain Landscapes</h5>
<span>Photography</span>
</figcaption>
</a>
</figure>
I can't use "figcaption" outside "a" element, but I want to make hover both on text area and image. Maybe "article" would be better?
Why not using a outside figure, as suggested by Alohchi? This is valid:
<a href="#" class="portfolio-item">
<figure>
<div class="picture">
<img src="images/portfolio/recent-01.jpg" alt=""/>
<div class="image-overlay-link"></div>
</div>
<figcaption class="item-description">
<h5>Mountain Landscapes</h5>
<span>Photography</span>
</figcaption>
</figure>
</a>
Depending on how your CSS looks, you could contain each of the image and the caption in separate anchor tags, like the following:
<figure>
<div class="picture">
<a href="#" class="portfolio-item">
<img src="images/portfolio/recent-01.jpg" alt=""/>
<div class="image-overlay-link"></div>
</a>
</div>
<figcaption class="item-description">
<a href="#" class="portfolio-item">
<h5>Mountain Landscapes</h5><span>Photography</span>
</a>
</figcaption>
</figure>
Or you could put the picture div container class in the anchor or image tag, that way you wouldn't need the encompassing div.
If you only wanted some hover effect to take place, you could also just use CSS, and target the .picture:hover selector and keep the anchor tag on the figcaption. Depending on what you need.
And to answer your article suggestion, that's for what the W3C calls syndicated content. You might try section, instead, which offers an element that designates a piece of a document you would include in an outline or that are thematically similar––if you are to go that route.
Related
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).
Putting block elements inside an anchor is now "possible" or allowed in HTML5, but it does not work for some reason.
Here's the code:
<a href="#"><div>
<figure>
<img src="prodimg/senseo-m.jpg"/>
</figure>
<div class="proddetail">
<header>
<hgroup>
<h2>Koffiepadsysteem</h2>
<h1>Senseo</h1>
</hgroup>
<div class="clear"></div>
</header>
<span class="price">€ 79,99</span>
<span class="elders">elders € 89,99</span>
<span class="bespaart">u bespaart € 15%</span>
<span class="meerinfo">Meer info</span>
</div>
</div></a>
When I inspect the code in firefox or chrome, I get this result:
<div><a href="#">
<figure>
<img src="prodimg/senseo-m.jpg">
</figure>
</a><div class="proddetail"><a href="#">
<header>
<hgroup>
<h2>Koffiepadsysteem</h2>
<h1>Senseo</h1>
</hgroup>
<div class="clear"></div>
</header>
<span class="price">€ 79,99</span>
<span class="elders">elders € 89,99</span>
<span class="bespaart">u bespaart € 15%</span>
</a><span class="meerinfo">Meer info</span>
</div>
</div>
That's almost good, but certain spots still aren't clickable. Any idea when can be done here?
Problem found!
Wrapping a block element in an anchor IS possible, but you can't put another anchor in there, too. Then it breaks.
So the parent anchor can't contain a child anchor.