Member Avatar for adaykin

Hello, I am having problems with a rollover image, for a site I am updating. On the site the about us link on the menu is supposed to turn purple when the mouse goes over it.

Also the menu for aboutus shows up to the left on monitors with a widescreen, I am using a 1440 x 990 resolution, however on most monitors the menu works.

  • 2 Contributors
  • 2 Replies
  • 192 Views
  • 8 Hours Discussion Span
  • Latest Post Latest Post by adaykin

Dani AI

Generated

Two separate issues are visible here: the rollover image not switching, and the About menu shifting left on wide displays. was right to check the preloaded image names, and since reports those filenames are fixed but the purple state still doesn't appear, the next step is targeted isolation and verification.

  • Check what actually changes when the mouse moves. Open the browser DevTools, enable Network and Console, hover the link and watch for image requests and JavaScript errors. If no network request happens, the hover/swap code or CSS rule is not being applied.
  • Confirm the element being swapped is the exact element referenced by the swap/hover code (the same id or selector). A mismatch between an id/selector and the actual DOM element is a very common silent failure.
  • Verify the server returns a 200 for the rollover image and that the filename, path and extension match exactly (case-sensitive on most Unix hosts). Try loading the rollover image URL directly to confirm.
  • Look for overlaying elements or z-index issues that block pointer events. Temporarily give the menu items a visible background or outline to confirm their hit area.
  • If the rollovers are implemented with CSS sprites, ensure the :hover rule targets the correct element and that no other selector overrides it (try higher specificity or a temporary !important for testing).
  • Clear cache or test in an incognito/private window and in another browser to rule out caching.

For the left-aligned menu on wide screens, avoid absolute left offsets on the menu itself. Place the menu inside a fixed-width, centered wrapper; for example:

.wrapper { width: 960px; margin: 0 auto; position: relative; }

If absolute centering is needed, center the parent then use left:50% with transform: translateX(-50%) on the child.

A quick way to be certain: build a minimal test page containing only the menu and rollover image, upload it to the same server, and test across browsers. That isolates layout and server issues from site-wide CSS or scripts.

Recommended Answers

All 2 Replies

Member Avatar for buddylee17

Try changing:

<BODY BGCOLOR="#FFF3E6" LEFTMARGIN="0" TOPMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0" onLoad="MM_preloadImages('images/webrollovers_musicrollover.jpg','images/webrollovers_aboutrollover.jpg','images/webrollovers_giverollover.jpg','images/webrollovers_volunteerrollover.jpg','images/webrollovers_linksrollover.jpg','images/webc_search.jpg','images/webc_searchspace.jpg','images/webrollovers_contactrollover.jpg','images/webrollovers_homerollover.jpg')">

to

<BODY BGCOLOR="#FFF3E6" LEFTMARGIN="0" TOPMARGIN="0" MARGINWIDTH="0" MARGINHEIGHT="0" onLoad="MM_preloadImages('images/webrollovers_musicrollover.jpg','images/webrollovers_aboutus.jpg','images/webrollovers_giverollover.jpg','images/webrollovers_volunteerrollover.jpg','images/webrollovers_linksrollover.jpg','images/webc_search.jpg','images/webc_searchspace.jpg','images/webrollovers_contactrollover.jpg','images/webrollovers_homerollover.jpg')">
Member Avatar for adaykin

Yeah the preloader had the wrong image names, I changed them to the correct ones, but I still am getting the same problem as before

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.