Hover-over functionality not functioning properly on select images

My website, located at , is fully functional. When you visit the homepage, you will see some words that turn black when you hover over them. I recently switched this site, which was originally created in Dreamweaver, to Umbraco, a .net based CMS.

My site is up and running smoothly, but for some reason, the images for "Architecture" and "Energy Assessments" are no longer changing to black when hovered over. However, the rest of the images are still working fine.

    
    <div id="content">
        <div id="homeleft">
            <ul class="menu">
                <li class="first"><a href="home.aspx">HOME</a></li>
                <li><a href="profile.aspx">PROFILE</a></li>
                <li><a href="designs.aspx">DESIGNS</a></li>
                <li><a href="testimonials.aspx">TESTIMONIALS</a></li>    
                <li class="last"><a href="contact.aspx">CONTACT</a></li>
            </ul>
            <p style="text-align:center; font-weight:bold;">CELEBRATING<br /><span style="font-size:22px">21</span><br />YEARS<br />1991-2012</p>
        </div>
        <div id="homeright">
            <a class="various1" href="#architecture" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Architecture','',/Images/architectureBLACK.png',1)"><img src="/Images/architecture.png" alt="Architecture" width="195" height="31" id="Architecture" style="padding:0px 20px;float:left;"/></a>
            <a class="various1" href="#idesign" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('interiordesign','','/Images/interior-designBLACK.png',1)"><img src="/Images/interior-design.png" alt="Interior Design" width="195" height="31" id="interiordesign" style="padding:0px 0px 5px 20px; float:right;"/></a>
            <a class="various1" href="#pmanage" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Projman','','/Images/project-managementBLACK.png',1)"><img src="/Images/project-management.png" alt="Project Managment" width="195" height="31" id="Projman" style="padding:20px 42px 5px 20px;float:left;"/></a>
            <a class="various1" href="#planning" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Planning','','/Images/PlanningBLACK.png',1)"><img src="/Images/Planning.png" alt="Planning" width="195" height="31" id="Planning" style="padding:10px 12px 5px 0px;float:right;"/></a>
            <a class="various1" href="#energy" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Energy Assessment','','/Images/energy-assessmentsBLACK.png',1)"><img src="/Images/energy-assessments.png" alt="Energy Assessments"

Any ideas why this sudden change is happening? Please note the specific lines for "Architecture" and "Energy Assessments" that are not behaving as expected.

javascriptjqueryhtmlcss

Answer №1

Your image path contains a mistake due to the case sensitivity of folder structures. Instead of

MM_swapImage('Energy Assessment','','/Images/energy-assessmentsBLACK.png',1)

please use

MM_swapImage('Energy Assessment','','/images/energy-assessmentsBLACK.png',1)

(Take note of the lowercase 'i' in 'images)

EDIT:

Additionally, the ID provided in the function call is incorrect; the ID of the IMG element should be 'EnergyAssessment' instead of 'Energy Assessment':

MM_swapImage('EnergyAssessment','','/images/energy-assessmentsBLACK.png',1)

Answer №2

DiViS0R pointed out an Energy Assessment error regarding the 'Architecture' function call. There appears to be a missing speech mark after the second comma.

MM_swapImage('Architecture','',/Images/architectureBLACK.png',1)

Based on your other code, it should look like this:

MM_swapImage('Architecture','','/Images/architectureBLACK.png',1)

I hope that clears things up for you.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The displayed value in the text field remains constant even when the object's attribute is modified

My issue involves the Date Text Field component of Material UI. Whenever I pass an attribute from an object, the displayed value in the Text Field does not update even when the object attribute changes. const [data, setData] = useState({ title: new Da ...

javascriptreactjsmaterial-ui

What is the best way to adjust my carousel so that it occupies just 60% of the screen, allowing the panels beneath it to utilize the remaining space

How can I adjust the size of the carousel to occupy only 60% of the screen without the need for scrolling, allowing the panels directly below to fill the remaining 40%? The images within the carousel should resize accordingly based on the desktop screen si ...

htmlcsstwitter-bootstrapbootstrap-4

Tips for Enhancing JavaScript Performance

Is there a way to enhance my JavaScript code like this: $(window).scroll(function() { if ($('#sec1').isVisible()) { $('.js-nav a.m1').addClass('active'); } else { $('.js-nav a.m1').removeClas ...

javascriptjqueryhtml

Tips on ensuring that the Angular frontend waits for the response from an Express REST call

Upon initializing my user Component, I want to trigger a REST-Call so that the user profile is displayed when the page loads. The process works smoothly as the component communicates with the service, which in turn contacts my express backend to make the n ...

javascriptangularrestexpressaxios

Using Javascript to Showcase a Video's Number of Views with Brightcove

How can I show the number of views for a video without using Brightcove's player? Brightcove Support shared this resource: , but I'm having trouble understanding it. ...

javascriptbrightcove

Angular and Datepair seem to have trouble cooperating

I've been struggling to solve this issue for a few days now and I feel like it's time to seek help from you wonderful people. I am currently developing a calendar application using Angular along with the datepair/datepicker/timepicker libraries. ...

jqueryruby-on-railsangularjsdatepickertimepicker

Modal containing Jquery GalleryView

I am facing an issue with loading galleryView inside a modal. Even though using galleryView on its own works fine, I have been unable to make it work within a modal. Despite looking for solutions in previous posts, I couldn't find anything that fixed ...

javascriptjquerygalleryview

Troubleshooting a Cache Issue in Your Next.js Application

Whenever I attempt to run 'npm run build', an error crops up that seems to be linked to the css and fonts. Unfortunately, I am unsure of how to tackle this problem. It's perplexing as the app functions perfectly fine in development mode. Th ...

csswebpackcachingnext.jsfonts

Privacy protection feature in Firefox is preventing data from being pushed to Google Tag Manager's Datalayer

Recently, I discovered that the conversion tracking in Google Analytics for a website we developed and maintain has been inaccurate by 20% - 40% daily. After testing in various browsers except Firefox, conversions are reflected in Analytics immediately wi ...

javascriptwordpressfirefoxcorsgoogle-datalayer

Limiting the use of JavaScript widgets to specific domains

In the process of developing a webservice that offers Javascript widgets and Ajax calls limited to specific domains, I have explored various options. However, my research has led me to consider using a combination of HTTP-Referer and API Keys for access ...

javascriptajaxsecurity

Vue messaging application fails to display data upon mounting

Recently, I've been experimenting with different Vue chat libraries and encountered this interesting piece of code: <template> <p>{{ this.users[0] }}</p> </template> <script> export default { data() { return ...

javascriptvue.jsgoogle-cloud-firestore

Filling Dropdown Options with Data from PostgreSQL

I've been attempting to create a dropdown list for an HTML form that is populated from a PostgreSQL table column. However, being new to this, I haven't been able to get it to work successfully. I have some code that I've been studying and tr ...

phphtmlpostgresql

Filter arrays in Vue.js using checkboxes

I'm currently working with vuejs and I need to implement a filtering feature for my array using checkboxes. I attempted to use v-model to filter the array based on three specific options: "Truck," "Van," or "Tx". However, I haven't been successfu ...

javascriptvue.jsfiltervuejs2

Having trouble establishing a connection between MongoDB and a Node.js Express server on my local machine

While attempting to establish a connection between mongoDB and nodejs express using the post method, I added a logger that should display a message confirming that the database is connected once nodejs listens to mongoDB. However, I encountered an issue wh ...

javascriptnode.jsmongodbexpress

`How to prevent other events from triggering in jQuery while an animation is running`

Writing again to seek help with a script issue on my webpage. I previously posted about a problem with the menu focus a week or two ago on this forum. A user suggested a helpful script, but unfortunately, it has a bug that I can't seem to fix. I' ...

javascripthtmlcss

I am looking for a way to generate unique dynamic IDs for each input textbox created within a PHP while loop. Can

How can I retrieve the ID of a selected text box generated within a while loop in order to update a field similar to phpMyAdmin? <?php while($row=mysql_fetch_assoc($result)) { ?> <tr> <td><input type ...

javascriptphpjqueryajax

Implementing JavaScript to assign a symbol to several <span> elements with identical ids

I have a looping span element on my page that is generated based on the number of records in a database table. The appearance of the span can vary, displaying either one or multiple instances. Each span has the following structure: <span class="add-on" ...

javascriptjqueryhtmlcss

Tips for concealing the browser's scroll bar on a designated webpage

Is there a way to hide the browser scrollbar on just one page of a website without affecting other pages? I have only been able to hide the scrollbar using body::-webkit-scrollbar { display: none; } However, this code hides the scrollbar for the enti ...

htmlcssvue.js

What could be causing the jQuery Ajax call to fail on Azure?

I am facing an issue with my jQuery Ajax methods as they are not working on Azure. Interestingly, the code runs perfectly fine in my local environment but fails to function on Azure. Any thoughts on what could be causing this discrepancy? Check out my co ...

c#jqueryajaxazure

Load media upon the click of an image

I'm currently in the process of designing a team page for our website. Each team member's photo is displayed in a grid layout, with two boxes positioned below containing various content. Box 1: This box consists of basic text information. Box 2: ...

javascriptjqueryhtml