Member Avatar for Slade

Hi, I've recently been to and I liked the navigation. On my site I would like a similar navigation. For the tabs, I have images, I cannot put a link ontop of the image though! Please help me out here! THe image is supposed to change according to whatever link is active. take for example, the home link is active, then the image behind the tab behind the link is a lighter color than the rest.

Help would be greatly appreciated


Thanks,

Slade

  • 3 Contributors
  • 4 Replies
  • 117 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by rixius

Dani AI

Generated

Short answer: yes — you can change a <td> background via the DOM, but you’ll get a much cleaner, more robust result by treating the tab itself as a link (an anchor with a background) and switching CSS classes for the active state instead of trying to layer an anchor over a sliced image in a table.

pointed toward image slicing and rollovers; pointed out changing CSS from JavaScript. Both are workable. Practical, modern workflow: use a semantic list of links, give each link a block display and a background (sprite or separate images), and mark the active tab with a server-generated class or a small JS toggle. That keeps links keyboard-accessible and preserves functionality when JS is off.

Example (minimal):

HTML

<ul class="tabs">
  <li><a href="/" class="tab active" aria-current="page">Home</a></li>
  <li><a href="/about" class="tab">About</a></li>
</ul>

CSS (concept)

.tab { display:inline-block; padding:8px 16px; background:url('tabs-sprite.png') 0 0 no-repeat; }
.tab:hover { background-position:0 -40px; }
.tab.active { background-position:0 -80px; }

If you absolutely must change a <td> at runtime, do so via the style or by toggling a class:

JS

document.getElementById('myCell').style.backgroundImage = 'url("images/tab-active.png")';

or better:

element.classList.add('active'); // CSS handles visuals

Troubleshooting notes: ensure correct URL quoting in background-image, preload sprites to avoid flicker, and prefer server-side output of the active class for the initial page (progressive enhancement). Accessibility tip: use aria-current="page" on the active link so screen readers pick up the current tab. If you want, follow up with the exact HTML you’re using and a screenshot of the slices and I’ll point out the minimal edits to make it work.

Recommended Answers

All 4 Replies

Member Avatar for Dani

I would definitely get in touch with the guy who goes by Tekmaven on these forums. He coded all of himself :)

Member Avatar for Dani

This can actually be done with tables ... just create the whole tab button thingie as a sliced photoshop image, and leave a center cutout for where you can place regular text. Javascript can be used to change what an image looks like when the mouse hovers over it.

Member Avatar for Slade

Is there any possible way to manipulate the background image property of a cell <td>? So that I can actually change the BG image when a link is clicked? No?

Member Avatar for rixius

I'm pretty sure this can be done with javascript to change the css properties of the td..

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.