Member Avatar for Rockindon

I have 5 buttons in my nav bar, Home, About, History, Gallery and Contact.
They are all image swaps.
How do I make it not swap when I'm on that page?
If I'm on the About page I don't want the image to swap when I scroll over the About button.
Thanks to anyone for the help.

  • 3 Contributors
  • 4 Replies
  • 128 Views
  • 10 Hours Discussion Span
  • Latest Post Latest Post by almostbob

Dani AI

Generated

Brief summary and a reliable fix tied to the thread: was right to point toward marking the current nav item in the markup, and correctly flagged the Dreamweaver angle — Dreamweaver’s image-swap behavior usually wires up JavaScript handlers that will still run unless you prevent them. Two practical options work well long-term: use CSS (preferred) so the current item simply never shows a hover state, or let Dreamweaver add swaps but remove/skip the handlers for the current link.

CSS-first approach (recommended)

  • Mark the current page link in the HTML (server-side template or by hand) with a class or the ARIA hook aria-current="page".
  • Use a single sprite or background images and target only non-current links for hover, so the current item never swaps.

Example HTML/CSS (adapt this to your sizes and sprite offsets):

<nav class="nav">
  <a href="/about" aria-current="page">About</a>
  <a href="/history">History</a>
  <a href="/gallery">Gallery</a>
</nav>
.nav a { display:inline-block; width:120px; height:40px; background:url('/images/nav-sprite.png') 0 0 no-repeat; text-indent:-9999px; }
.nav a:not([aria-current="page"]):hover { background-position: 0 -40px; }   /* hover state only for non-current */
.nav a[aria-current="page"] { background-position: 0 -80px; }              /* current (frozen) state */

If you must use Dreamweaver swap-image behavior

  • Don’t attach the behavior to the current item in your template, or
  • Run a tiny script on load to null out the swap handlers for the current link:
var nav = document.querySelectorAll('.nav a');
for (var i = 0; i < nav.length; i++) {
  if (nav[i].getAttribute('aria-current') === 'page' || nav[i].className.indexOf('current') !== -1) {
    nav[i].onmouseover = nav[i].onmouseout = null;
  }
}

Accessibility and performance notes

  • Keep readable link text (use text-indent or visually-hidden styles) rather than empty images so screen readers work.
  • Sprites or CSS backgrounds avoid flicker and ensure the frozen state shows immediately.
  • See MDN for details on the :hover behavior and the aria-current attribute: CSS :hover and aria-current.

Recommended Answers

All 4 Replies

Member Avatar for TeejMonster

If you're using CSS to do your rollovers, you might think about declaring a class WITH rollovers, and a class WITHOUT rollovers, for each button on your navigation bar. Then, you would simply change the class of the button that you wanted not to roll over.

Ex. Homepage nav bar

<div class="curHome">Home</div>
<div class="navAbout">About</div>
<div class="navHistory">History</div>
<div class="navGallery">Gallery</div>
<div class="navContact">Contact</div>
Member Avatar for Rockindon

This was the 1st time I've used this forum and thanks for taking the time to respond.

I actually used 'swap image' through the 'behaviors' pallet. Would that be a different way to achieve what I'm looking for?

Thanks.

Member Avatar for TeejMonster

Behaviors pallet, huh? Sounds like you need to get your hands into the source, because your IDE may not allow you to tweak the behavior like that (and I don't know what you're using). If you post up the pages, I'll see if I can point you in the right direction.

Member Avatar for almostbob

behaviours pallet,
a dreamweaver question then ?
try the dreamweaver formums at

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.