Member Avatar for hno

Hi
is there any way to put a test on the image ? for example , this code

<table width="80%"> <tr> <td  align="center" ><img src="10000000.png"  width="100%" height="60px"/> ><span style="overflow:hidden"> test </span></td></tr></table>

i want to put the test ( here is test ) on the image .

how can do it so ?

thanks

Edited by Ezzaral because: Added code tags. Please use them to format any code that you post.
  • 6 Contributors
  • 6 Replies
  • 107 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by millermccullum

Dani AI

Generated

Briefly: wrap the image and its caption in a semantic container and use CSS to layer the text on top. That avoids table layout, keeps the markup accessible, and works responsively as the image scales. Building on ’s background idea and ’s tooltip remark, the approach below gives a persistent, readable overlay (tooltip is fine for hover-only hints, but not for always-visible labels).

<figure class="overlay">
  <img src="10000000.png" alt="short description">
  <figcaption>Test</figcaption>
</figure>
.overlay { position: relative; width: 80%; max-width: 800px; }
.overlay img { display: block; width: 100%; height: 60px; object-fit: cover; }
.overlay figcaption {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff; background: rgba(0,0,0,0.3); font-weight: 600;
  pointer-events: none; /* remove if caption must be interactive */
}

Notes and quick tips:

  • Keep the text in the DOM (not purely CSS) if it conveys meaning; use ARIA only when appropriate. See the MDN guidance on ARIA basics.
  • Avoid fixed image dimensions that distort content; object-fit: cover preserves aspect ratio while filling the box (details at MDN: object-fit).
  • If the image is decorative, mark it appropriately; if the overlay can make text hard to read, add a semi-opaque layer (as above) and test color contrast (use a contrast checker such as https://webaim.org/resources/contrastchecker/).
  • Replace table-based layout with this semantic pattern; read more about <figure>/<figcaption> on MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure

This pattern is robust for responsive UIs, keeps the HTML meaningful, and avoids brittle inline hacks.

Recommended Answers

All 6 Replies

Member Avatar for almostbob

try

<span style="overflow:hidden; background:url('10000000.png'); text-align:center; width:80%; height:60px;">test</span>
Edited by almostbob because: n/a
Member Avatar for urtrivedi

I guess you want to show some message or tool tip when someone moves mouse over your image. add highligted text in your code

<table width="80%"> <tr> <td align="center" ><img src="10000000.png" width="100%" height="60px"   [b]  title ='this is test' [/b]/> ><span style="overflow:hidden"> test </span></td></tr></table>
Member Avatar for almostbob

bummer,
that makes more sense than my thought

for an image it should be alt='this is a test' just to make the validators happy

Edited by almostbob because: n/a
Member Avatar for huliaa

Yeah, "alt" is always needed.

Member Avatar for philippebodart

Moves mouse over your image add highlighted text in your code.

Member Avatar for millermccullum

Wordpress Theme tools:
I used the following free tools to develop my theme.

* GIMP – Free image editing software
* Cooltext online tool to create buttons and logo
* Notepad to edit css, php files
* W3C validator for XHTML and CSS validator
* Firebug add-on to inspect and modify stylesheets
* Browsershots – online service to check older browser compatibility
* YSlow addon for Firebug to test the page download speed
* SubmitExpress metatag analyzer to check the meta tags

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.