Member Avatar for Vanquish39

Hi guys I'm new to html and css and would like to know how to create something like the picture. Basically I need to create any image and add a number to the top right corner via a function. If there are examples please do share.

Note: this is not for iPhone.
Thanks

http://i.stack.imgur.com/RAi44.png

  • 5 Contributors
  • 4 Replies
  • 120 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by Commando112

Dani AI

Generated

For : the simplest, robust patterns are (A) a CSS-only badge for static counts, or (B) a small JS helper when the number must change dynamically. was right that CSS and JavaScript pair well here. and are also on the right track with list-based numbering when the number is an ordered step rather than a count. ’s prompt about meaning matters: if the number is a “step”, consider semantic markup (an ordered list or an ARIA state); if it’s a “count”, treat it as a decorative badge with an accessible label.

CSS-only (uses a data attribute + pseudo-element):

<div class="icon" data-count="7" aria-label="7 new items">
  <img src="icon.png" alt="">
</div>

.icon { position: relative; display: inline-block; }
.icon img { display: block; }
.icon::after {
  content: attr(data-count);
  position: absolute;
  top: 6px;
  right: 6px;
  background: #e33;
  color: #fff;
  border-radius: 999px;
  min-width: 20px;
  height: 20px;
  line-height: 20px;
  padding: 0 6px;
  text-align: center;
  font-size: 12px;
}

JS approach for changing counts and accessibility:

function setBadge(el, n) {
  var b = el.querySelector('.badge');
  var text = n > 99 ? '99+' : String(n);
  if (n <= 0) { b.style.display = 'none'; el.removeAttribute('aria-label'); }
  else { b.style.display = 'inline-block'; b.textContent = text; el.setAttribute('aria-label', text + ' new items'); }
}

Troubleshooting tips: clamp large numbers (show 99+), use min-width so two digits don’t overflow, adjust top/right offsets for different image sizes, add z-index if the badge is hidden behind the image, and keep the badge aria-hidden if the parent already has an aria-label describing the count. For reference on the pseudo-element and attr(), see the MDN docs for ::after pseudo-element and attr().

Recommended Answers

All 4 Replies

Member Avatar for hericles

Hello,
You will need a combination of CSS and javascript to do. CSS to display the base image in the right location (i.e. top right but with no text included) and the javascript to accept the number and place it over the image.
The easiest solution is probably a single div with the image of the bubble set as the background image. Inside that you can write your number using a basic javascript function.

Edited by hericles because: n/a
Member Avatar for lps

How about trying to do it by using ordered list(<ol></ol>)?

Member Avatar for drjohn

What does the number represent?
Is it a count of something the user is doing? Or is it the step in a process that the user has reached?

Member Avatar for Commando112

Hi guys I'm new to html and css and would like to know how to create something like the picture. Basically I need to create any image and add a number to the top right corner via a function. If there are examples please do share.

Note: this is not for iPhone.
Thanks

http://i.stack.imgur.com/RAi44.png

okay i will only tell you what i know. If is a count then Your CSS must have this

<ol>
<li>item 1</li>
<li>item 2</li>
</ol?
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.