The functionality of Image Map is operational in Chrome and FireFox, but encountering issues in Internet Explorer

Hey everyone, I've been struggling with this issue for weeks now. My image map works perfectly in Firefox and Chrome, but for some reason, it's not functioning in Internet Explorer. Could someone please take a look at my code and help me figure out why it's not working? I initially forgot to include the # sign in usemap"#", but even after fixing that, it still doesn't work in IE. Thank you in advance for your assistance, I'm eager to hear back from you.

<!DOCTYPE html>
<html>

   <head>
   <!--
      New Perspectives on HTML
      Tutorial 2
      Case Problem 3

      ElectionWeb Kansas Page
      Author: James DuBois
      Date:   2/10/2015


      Filename:         kansas.htm
      Supporting files: ewlogo.png, ewstyles.css, kansasmap.png, modernizr-1.5.js
   -->
<!-- have you tested it? Image map not working -->

      <meta charset="UTF-8" />
      <meta name="author" content="James DuBois"/>
      <meta name="keywords" content="Kansas, elections"/>
      <a href="http://www.kssos.org/elections/elections_statistics.html" rel="external"></a>
      <base target="new">
      <title>Kansas Congressional Elections</title>

      <script src="modernizr-1.5.js"></script>
      <link href="ewstyles.css" rel="stylesheet" type="text/css" />
   </head>

   <body>
      <header>
         <img src="ewlogo.png" alt="ElectionWeb" />
      </header>

         <nav>
            <h2>New Sources</h2>
               <ul>
                   <a href="http://news.yahoo.com/" rel="external"><li>Yahoo News</li></a>
                   <a href="http://www.foxnews.com/" rel="external"><li>FOX News</li></a>
                  <a href="http://www.cnn.com/" rel="external"><li>CNN</li> </a>
                  <a href="http://www.msnbc.com/" rel="external"><li>MSNBC</li></a>
                  <a href="https://news.google.com/" rel="external"><li>Google News</li></a>
                  <a href="http://www.nytimes.com/" rel="external"><li>New York Times</li> </a>
                  <a href="http://digg.com/" rel="external"><li>digg</li> </a>
                  <a href="http://www.washingtonpost.com/" rel="external"><li>Washington Post</li> </a>
                  <a href="http://www.latimes.com/" rel="external"><li>LATimes</li> </a>
                  <a href="http://www.reuters.com/" rel="external"><li>Reuters</li> </a>
                  <a href="http://abcnews.go.com/" rel="external"><li>ABCNews</li> </a>
                  <a href="http://www.usatoday.com/" rel="external"><li>USA Today</li> </a>
               </ul>

         </nav>

      <section>
         <h1>Kansas Statewide Races</h1>
         <p>The Kansas Election polls have officially been closed now for two hours 
            and results are being constantly updated. As of 10pm with 65% of the
            ballots counted, leaders in the state-wide races for governor and 
            senator are as follows:
         </p>
         <h2>Governor (65% reporting)</h2>
         <ul>
            <li>Charles Young (R) - 371,885 (47%)</li>
            <li>Karen Drew (D) - 356,060 (45%)</li>
            <li>Barry Davis (I) - 39,562 (5%)</li>
         </ul>
         <h2>U.S. Senate (65% reporting)</h2>
         <ul>
            <li>&#10004; Helen Sanchez (D) - 387,710 (49%)</li>
            <li>Linda Epstein (R) - 348,147 (44%)</li>
            <li>Hunter Ryan (I) - 47,474 (6%)</li>
         </ul>
         <p>Get up-to-the-minute election results from the Kansas
            <a href="http://www.sos.ks.gov/">Secretary of State. </a>
         </p>
      </section>

      <figure>
         <img src="kansasmap.png"  alt="Kansas" usemap="#kansasdistricts"/>
                  <map name="kansasdistricts">
            <area shape="poly" coords="18,10,
                                          457,16,
                                          424,54,
                                          372,56,
                                          372,99,
                                          447,100,
                                          452,203,
                                          411,205,
                                          411,188,
                                          370,189,
                                          325,184,
                                          326,220,
                                          267,221,
                                          270,289,
                                          6,282" 
                  href="district1.htm" target="_self"/>


            <area shape="poly" coords="466,14,
                                          427,57,
                                          375,59,
                                          375,99,
                                          457,99,
                                          456,252,
                                          489,252,
                                          487,291,
                                          551,285,
                                          547,126,
                                          513,126,
                                          491,102,
                                          522,99,
                                          531,81,
                                          510,52,
                                          527,25" 
                  href="district2.htm" target="_self"  />

            <area shape="poly" coords="535,83,
                                          525,106,
                                          501,105,
                                          519,127,
                                          546,123,
                                          546,90" 
                  href="district3.htm" target="_self" />

            <area shape="poly" coords="276,291,
                                          273,224,
                                          330,223,
                                          328,187,
                                          408,194,
                                          408,209,
                                          454,207,
                                          454,258,
                                          486,256,
                                          484,293" 
                  href="district4.htm" target="_self" />
         </map>
         <figcaption>Click to view congressional district results</figcaption>
      </figure>

      <footer>
         ElectionWeb: Your Source for Online Election Results
      </footer>

   </body>

</html>

Answer №1

The issue lies in the coords attribute. Internet Explorer does not handle errors well, and coords is expecting numerical values but is instead receiving two coords separated by a new line.

To resolve this, simply place the entire coords list on one line.

For example:

<img src="iphone.jpg"  alt="Kansas" usemap="#kansasdistricts"/>
              <map name="kansasdistricts">
        <area shape="poly" coords="18,10, 457,16,424,54,372,56,372,99,447,100,452,203,411,205,411,188,370,189,325,184,326,220,267,221,270,289,6,282" href="district1.htm" target="_self" alt="test"/>


        <area shape="poly" coords="466,14,427,57,375,59,375,99,457,99,456,252,489,252,487,291,551,285,547,126,513,126,491,102,522,99,531,81,510,52,527,25" href="district2.htm" target="_self" alt="test"/>

        <area shape="poly" coords="535,83,525,106,501,105,519,127,546,123,546,90" href="district3.htm" target="_self" alt="test"/>

        <area shape="poly" coords="276,291,273,224,330,223,328,187,408,194,408,209,454,207,454,258,486,256, 484,293" href="district4.htm" target="_self" alt="test"/>
     </map>

Edit* corrected spelling mistake

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

Displaying both input fields and buttons side by side on mobile devices using Bootstrap

I am in the process of creating a navbar that includes select, input, and button elements. Below is the code I have written: <nav class="navbar sticky-top navbar-light p-0"> <div class="collapse navbar-collapse search-bar show p-4" id="navbarSupp ...

What is the best way to ensure a div takes up the rest of the height on a page when the header's size is unpredictable

Is there a way to make the red area fill the remaining visible space without overlapping into the footer? I also need the infoContent section to be scrollable. The height of the header may vary. I came across some older solutions that suggested using Java ...

What is the best way to create a smooth sliding effect using CSS?

Need help with creating a transition effect within a bordered div that reveals hidden content when a button is clicked? I'm looking to have the <a> tag displayed after clicking the button, with both the button and text sliding to the left. Here& ...

Is there a way to prevent a span from appearing at the end of a line?

Imagine a scenario where I have a paragraph with various span elements that are styled using classes. What if there are numbers interspersed within the text for easy reference, and I want to ensure they do not end up at the end of a line? For example: 1 ...

Monitor the change in values upon pressing the submit button on Angular

I am currently working with an edit form that contains data in the input fields. <ng-form #infoForm="ngForm" novalidate> <div> <label for="firstName">First Name :</label> <input type=" ...

The issue of flickering during the combination of slideToggle and animate in jQuery

I want to incorporate a hidden div that, when triggered by a button click, will smoothly reveal itself and "push" away part of another div without changing the overall size of the containing div. However, I have encountered an issue where the div below th ...

Adjust the minimum height and width when resizing the window

Apologies in advance if this has already been addressed, but I have tried solutions from other sources without success. My Objective: I aim to set the minimum height and width of a div based on the current dimensions of the document. This should trigger ...

What is the proper way to reference automatically generated class names within nested style rules when using makeStyles in Material-UI?

When using makeStyles, how can I reference generated classnames when creating nested rules? For instance, if I have a "container" class with nested "item" elements and I want to use the generated "item" class in the style definition. The approach that wor ...

A set of six DIV's, divided into two columns of three each

I'm attempting to arrange two columns with three vertical DIVs side by side. The left column is designated for main text, while the right column is reserved for miscellaneous information. Each column consists of a top and bottom DIV that display image ...

Find a solution to splitting the area in half, with one side designated for the icon and the other for text

https://i.sstatic.net/Ov3yF.png I'm currently working on a code to assign tasks to employees, and I have created a login form with multiple text fields, each accompanied by an icon. However, there seems to be a layout issue as shown in the image. The ...

Leveraging the power of Material-UI and React, modify the appearance of the "carrot" icon within the

Currently implementing MUI's textfield based on the information found at this link: https://mui.com/components/text-fields/. While there are numerous resources available for changing the font of the input text, I have not come across any documentation ...

Utilize jQuery to dynamically load and assign unique ids to elements within an array

I am seeking assistance with dynamically assigning unique IDs to elements in an array using JavaScript and jQuery. I am new to these languages and need some guidance. function assignIds() { var elementIds = ['name', 'lname', ' ...

Delete all pictures beginning with this specific ID from the posts

Currently, I have approximately 300 Wordpress posts, and each one contains a "tracking pixel" from a previously used service (which is implemented using IMG tags). This is an example of how it appears: <img id="serviceTrack_3274570" style="margin: 0px ...

Unable to extend the data-toggle dropdown to the entire width of the screen

Is there a way to make my navbar dropdown menu expand to the full width of the screen without leaving white space on the left side? I am using Bootstrap and have included a media query in my CSS as shown below. https://i.sstatic.net/US3ce.png <nav clas ...

A step-by-step guide on utilizing URL creation in Yii1

My controller is saved in the directory Controller/SiteAction/1700/Participate and my view file can be found at views/site/eventview. I need to add a button inside eventview that directs to Controller/SiteAction/1700/Participate. Therefore, I have to utili ...

The feature of option display is not supported on Safari browser

I am facing an issue with the functionality of two dropdown menus. The options in the second dropdown are supposed to be shown based on the selection made in the first dropdown. While this feature works perfectly in Chrome, it seems to be malfunctioning i ...

I am struggling to make the horizontal scroll and fixed column features work in dataTables. The rendering seems to be inconsistent across different platforms. Can anyone help me figure out what I am doing incorrectly?

I've dedicated countless hours to unraveling this conundrum. I'm in urgent need of creating a table that mirrors the layout displayed on this webpage: https://datatables.net/extensions/fixedcolumns/ The desired functionality involves both verti ...

Is there a way to have the menu displayed on a single line and consistently centered?

I am working on a menu that needs to stay centered at the top of the screen, with a consistent appearance and just one line, regardless of the screen width. However, I'm encountering an issue where the menu mysteriously transitions into a two-line for ...

Interacting with the Dropdown feature on the page causes the body of the page to shift

I am encountering an issue with 2 dropdowns in Datatables used to filter content. The problem arises when a dropdown is positioned on the right side of the page, causing a shift to the left by approximately 10px. Conversely, if the dropdown is placed on th ...

Creating a Redirect Form that Directs Users to a Specific Page Depending on Input Data

Apologies if this is a basic issue, but I'm struggling to figure it out. I am trying to create a form field on a webpage that will redirect users to a specific page based on the data they input. For example, if someone types in "dave" and submits the ...