Member Avatar for willyontour

Here is my webpage: http://www.lightsforafrica.org/project.html

HOVERPICS.

It used to work but, even though I've changed nothing, it no longer works!

When you hover your mouse over the 5 words: America, Asia, Europe, India and Africa (towards the foot of the page) the image with the lights used to change to that region.

I'm using this code:
<SCRIPT type="text/javascript">
<!--
var hoverTrg11=document.getElementById("hoverArea11");
var hoverImg2=document.getElementById("hoverPic2");
hoverTrg11.onmouseover=function(){
hoverImg2.src="Images/lights_america.jpg";
}


<td><img id="hoverArea11" src="Images/America.gif" alt="" width="130" height="39" /></td>

This seems to have happened on all my website (which all previously worked).

Any ideas?

  • 4 Contributors
  • 9 Replies
  • 133 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by tinymark

Dani AI

Generated

Intermittent swaps like this almost always come down to one of a few simple causes: the script runs before the DOM element exists, another JavaScript error prevents your swap code from running, the image file/path is wrong (or case-sensitive on the server), or a browser/extension/caching issue blocks the change. ’s report that it “worked again” for some visitors strongly points to a transient caching/hosting or client-side extension issue rather than a permanent bug in your markup.

Quick troubleshooting (in order):

  • Open Developer Tools (F12): check the Console for errors (look for messages about a null element or other uncaught errors) and the Network tab to see any 404s for the images.
  • Confirm the IDs used by the script exactly match the page HTML (IDs are case-sensitive to the DOM query).
  • Make sure the script runs after the elements exist (move the script to just before </body> or bind after DOMContentLoaded). If other JS on the page throws early errors, fix those first.
  • Check file paths and filename case: Windows hosts ignore case, Linux hosts do not. A change in hosting or file case can silently break images.
  • Test with extensions disabled / in a private window to rule out blocking extensions or cached assets. If multiple visitors are affected intermittently, contact the host — server-side updates or CDNs can cause this.

If you want to avoid JavaScript entirely (as and suggested), a CSS-only approach using stacked images and sibling selectors works reliably. Example structure and CSS:

<!-- HTML (put links before image block so sibling selectors can target it) -->
<div class="map">
  <a class="region america" href="#">America</a>
  <a class="region asia" href="#">Asia</a>

  <div class="images">
    <img class="base" src="/Images/lights_default.jpg" alt="">
    <img class="americaImg" src="/Images/lights_america.jpg" alt="">
    <img class="asiaImg" src="/Images/lights_asia.jpg" alt="">
  </div>
</div>

<!-- CSS -->
.map .images img { position:absolute; left:0; top:0; display:none; width:100%; }
.map .images .base { display:block; }
.region.america:hover ~ .images .americaImg { display:block; }
.region.america:hover ~ .images .base { display:none; }

That yields a graceful, no-JS swap and avoids problems with disabled scripts. If the problem persists despite these checks, capture a Console screenshot and a Network trace showing the failing request — that will quickly show whether it’s a client-side error, a missing file, or a server/CDN issue (as implied).

Recommended Answers

All 9 Replies

Member Avatar for ndeniche

Why not instead of using javascript for hover images, use css? It might free some resources from the explorer viewing your site.

you can check CSS hovers here

Member Avatar for willyontour

Thanks for the advice. But so you know why my code (which always worked) has just stopped working?

Member Avatar for ndeniche

Works fine for me... maybe the explorer you are using? Or a javascript deactivator, or activex control blocking?

Hover.png 20.19 KB
Member Avatar for willyontour

I'm not talking about the buttons at the top! I'm asking about the map at the bottom with the lights.

Also, similar code here has stopped working on another of my websites:

Member Avatar for ndeniche

Works fine too... Try checking for the explorer's settings

america.png 276.77 KB europe.png 305.95 KB
Member Avatar for willyontour

Well that's good to hear. It used to work for me on IE, firefox and chrome. This morning I had an email from a visitor saying it wasn't working. I checked and she was right. Now I've checked again and it's working in all 3 browsers. Very strange!

Should probably switch to css from java!

Member Avatar for ndeniche

Try snippet. Might do some magic for you ;)

Member Avatar for teedoff

This might pose a problem, as you've already seen, for visitors who have js disabled. I normally do disable it except for testing environments.

As Nichito suggested, this can also be done with hidden divs and CSS, which will work in all browsers with no js at all. You should definately look into that.

Member Avatar for tinymark

I tried it as well with lots of different browsers and Operating systems. They all work fine. There are far too many things that could be wrong that have nothing to do with your design.

After I have checked my code, I suspect the server delivering my files is the problem. I know what my hosting service provides as features and I stay up-to-date with what versions of the programs they are using. A change in version of a program you were using could be the cause. I'm pretty quick with an email to tech support when this happens.

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.