Member Avatar for prachipote

how to give rollover image to a particular td?
i want that rollover image to full td i was tried but it takes only that txt?

  • 3 Contributors
  • 5 Replies
  • 100 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by prachipote

Dani AI

Generated

raised a common issue: the rollover image only shows where the text sits instead of filling the whole TD. suggested swapping innerHTML and suggested a CSS background hover. Both ideas are usable, but the missing piece is usually how the element is laid out and where the style is applied.

Quick checklist to diagnose:

  • Confirm which element actually has the background applied (the TD itself vs an inline child such as an A). Inline elements only cover their text box.
  • Ensure the element that should show the image can expand (use a block-level element that fills the cell or give the cell explicit dimensions/padding).
  • Use non-repeating, centered, and scaled backgrounds (older browsers differ on scaling support).
  • If using JavaScript to inject HTML (innerHTML), be aware that it can remove event handlers and is brittle; toggling classes is safer.

Practical options (concise examples):

  • Make the clickable area a block-level child that fills the TD, then apply the hover background to that child. This avoids the common pitfall of the background appearing only behind inline text.

  • If a real image must be used, place it absolutely inside the cell (TD set to position:relative) and size it to cover the cell, keeping text above it.

If the CSS hover route still "only sits behind text," check that the child element is not inline, that the cell has enough computed height/width, and that no competing styles (like a parent background or collapsing table layout) are preventing expansion. If JavaScript is chosen, prefer toggling a CSS class rather than rebuilding markup on every mouse event.

Recommended Answers

All 5 Replies

Member Avatar for Thirusha

u have to change the innerhtml of td tag.
so the onmousover event will look something like this:

onmouseover = "document.getElementById('tdId').innerhtml='<img src='imgname.jpg'>' "
Member Avatar for aDevS

how to give rollover image to a particular td?
i want that rollover image to full td i was tried but it takes only that txt?

You can create a CSS class & set ur BG Image in that class. And then just integrate that class in your TD.
Then the desired output can be achieved.

Eg.
---CSS Class--

.SampleClass{
background:url(defaultimageName.png);
}
.SampleClass:hover{
background:url(rolloverimageName.png);
}

---CSS Class--

<td class="SampleClass">Sample</td>

--
Hope this works for you...!

Edited by peter_budo because: Keep It Organized - For easy readability, always wrap programming code within posts in [code] (code blocks)
Member Avatar for prachipote

i had already tried this.but it takes that img only for text whichever
written.i want that image rollover for hole that td

Member Avatar for aDevS

I would preferably emphasize to use ':hover' attribute for a CSS class you are using (in this rollover image is to be used), I am quite confident that the desired result would be obtained.

Member Avatar for prachipote

ok. will try thanks:)

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.