Member Avatar for bethhack

My over images are not working in Safari or Firefox, but they are in IE.

The test page is:

They were working before, but now not... any ideas??

Thank you.

  • 2 Contributors
  • 4 Replies
  • 105 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by bethhack

Dani AI

Generated

As noted, the usual culprits for hover/rollover failures are resource path problems, JavaScript errors that stop execution, or leftover editor-generated markup and duplicate script includes. confirmed that fixing some of those things restored cross‑browser behavior. Below is a concise checklist and two robust approaches (CSS sprites and minimal JS with preloading) to prevent the issue from returning.

  • Open the browser console and the Network panel. Fix any 404s and any JS exceptions first.
  • Make sure images and scripts are requested over HTTP(S) from the server (check exact path spelling and case).
  • Remove duplicate script includes and any proprietary tags inserted by your editor.
  • Attach handlers after the DOM is ready (or place scripts at the end of body). Avoid inline onmouseover/onmouseout where possible.
  • Preload hover-state images or, better yet, use a single sprite image to avoid flicker and missing images.

A simple CSS-sprite approach (reliable, no JS):

<a class="btn" href="#">Label</a>

.btn {
  display: inline-block;
  width: 120px;
  height: 40px;
  background: url('/images/button-sprite.png') no-repeat 0 0;
}
.btn:hover {
  background-position: 0 -40px;
}

If you need image-element swapping, preload and use modern event listeners:

document.addEventListener('DOMContentLoaded', function() {
  ['/images/btn-on.png','/images/btn-off.png'].forEach(function(src){
    var i = new Image(); i.src = src;
  });

  document.querySelectorAll('.swap').forEach(function(el){
    var orig = el.src, over = el.dataset.over;
    el.addEventListener('mouseenter', function(){ el.src = over; });
    el.addEventListener('mouseleave', function(){ el.src = orig; });
  });
});

For reference on the techniques above, see MDN on the CSS :hover pseudo-class (https://developer.mozilla.org/en-US/docs/Web/CSS/:hover), MDN on addEventListener (https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener), and the CSS‑Tricks guide to sprites (https://css-tricks.com/css-sprites/).

Recommended Answers

All 4 Replies

Member Avatar for peter_budo

This looks like you trying to read JavaScript from your pc directory. Doesn't look like pointing to JS on server. src="file:///Users/bethyb/Library/Preferences/Adobe/GoLive/Settings8/JScripts/GlobalScripts/CSScriptLib.js"

Member Avatar for bethhack

thank you for your input. i fixed this, but it didn't solve the problem. i have other sites too, that were previously working with the code, and then on the ones i've most recently uploaded, the over images aren't showing up. is there something wrong with the code Go Live is producing? Out of date or something??

Member Avatar for peter_budo

There are several problems in your page, Go Live still did not reach standards of Dreamweaver. As you been changing your code some parts hasn't been removed/updated plus you missing some tag properties

Line 10

<style type="text/css"> <!-- missing type=text/css-->

Line 37

</csactiondict>  <!--originaly </csscriptdict> -->

Line 41, 48 & 57 are all uploading same JavaScript content, in my opinion that should be done only in "<html>" tag. Also JavaScript functions should be called once you declared all parameters for given tag.
The mouse actions calls fuction changeImages() that I do not see...

onmouseover="changeImages()"
onmouseout="changeImages()"

Please correct this errors and let me know if you still have problem

Member Avatar for bethhack

I made some changes to the code and now the over images are showing in IE, FF, & Safari. Thank you very much for your help.

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.