Home/ Questions/Q 7837559
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-02T14:41:31+00:00

I am developing an application where I have the next JS code: <!DOCTYPE html

  • 0

I am developing an application where I have the next JS code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Hover Effect</title>
<script type='text/javascript' src="/var/www/JSPROBAK/jquery.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
    $(".button").hover(function() {
        $(this).attr("src","/var/www/JSPROBAK/button-hover.png");
            }, function() {
        $(this).attr("src","/var/www/JSPROBAK/button.png");
    });
});
</script>
</head>

<body>
<img src="/var/www/JSPROBAK/button.png" alt="My button" class="button" />
</body>
</html>

The directory where I have button.png, button-hover.png and jquery.js is the one specified in the code. The code is supposed to turn a gray button (button.png) into a red button (button-hover.png) when putting the mouse over the gray button. The browser initially shows the image of the gray button but doesn’t turn red when putting the mouse over it so I am assuming jquery.js is not being loaded correctly, any idea?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It would appear that you are referencing the server file location not the website relative location. if you are hosting the website from the www dir then I would try this:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>jQuery Hover Effect</title>
<script type='text/javascript' src="/JSPROBAK/jquery.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
    $(".button").hover(function() {
        $(this).attr("src","/JSPROBAK/button-hover.png");
            }, function() {
        $(this).attr("src","/JSPROBAK/button.png");
    });
});
</script>
</head>

<body>
<img src="/JSPROBAK/button.png" alt="My button" class="button" />
</body>
</html>
    • 0