CODEWITHSUNDEEP
htmlcss
Jack
Jack

Reputation: 245

Button placed inside a img title field, possible?

Working with a project and I am trying to place a button inside a img title field. I am using boxslider and I am trying to place a href link to the button, but can't get it to work.

img src="images/1.jpg" title="asdad asd adad < button >Test< /button >" alt=""

As soon as I type in href="#" to the < button href="#" > , it wont work.

Anyone know another solution for this problem?

See live exampel: https://adamskymotorkylare.se/beta/ProjectX/

Upvotes: 1

Views: 351

Answers (1)

tao
tao

Reputation: 90003

No, it's not possible. Declaring a tag inside the attribute of another tag is illegal. It will never be parsed as tag, but as string.

I assume you want your <img> to function as a button. That can easily be achieved using an anchor (<a>) or button (<button>) tag as a wrapper for the <img> tag:

<a href="#">
   <img src="...">
</a>

If you want to place a link inside the title attribute of an <img> simply put, it's not possible. In order to achieve something that resembles this, you need to wrap the image inside a positioned parent and add a tooltip that looks like a title but, in fact, is a proper DOM element displayed when you hover the parent, containing whatever other DOM elements you want, including links.

Basic example (proof of concept):

.parent {
  position: relative;
}
.tooltip {
  display: inline-block;
  max-width: 300px;
  border-radius: 6px;
  background-color: rgba(255,255,255,.85);
  padding: 1rem;
  box-sizing: border-box;
  position: absolute;
  top: 3rem;
  left: 50%;
  transform: translateX(-50%);
  box-shadow: 0 5px 6px -3px rgba(0,0,0,.2), 0 9px 12px 1px rgba(0,0,0,.14), 0 3px 16px 2px rgba(0,0,0,.12);
  opacity: 0;
  transition: opacity .3s cubic-bezier(.4,0,.2,1), top .3s cubic-bezier(.4,0,.2,1);
}
.tooltip:before {
  content: '';
  position: absolute;
  left: calc(50% - 12px);
  bottom: -25px;
  width: 1px;
  height: 1px;
  border: 12px solid transparent;
  border-top-color: white;
  opacity: .85;
}
.parent > img {
  width: 100%;
  height: auto;
}
.parent:hover .tooltip {
  top: 2rem;
  opacity: 1;
}
<div class="parent">
  <div class="tooltip"><a href="#">This</a> is a tooltip wannabe with a link.<br />You can go ahead and style it up so it looks more like a tooltip, or you could look into existing tooltip or popover plugins/libaries and use something that's tested cross-browser/cross-device. <br />
Intended as proof of concept.
  </div>
  <img src="https://source.unsplash.com/random/800x500">
</div>

Upvotes: 1

Related Questions