On the desktop version of the website, there is an imagemap implemented. However, when the site transitions into tablet or mobile view, the imagemap should be disabled to allow for a simpler navigation area to be displayed. I attempted to use the following CSS code:
map {
display: none;
}
Unfortunately, the imagemap still appears on the page. Does anyone have any suggestions on how to successfully disable the imagemap in tablet and mobile views?
When faced with a similar assignment requirement, I found a solution by incorporating two <img> tags in my HTML document. One was labeled "desktopImage" and the other "mobileImage," with the image map linked only to the desktop image. To achieve this, I utilized the display:none property in my default.css file for the mobile image tag, and vice versa in the mobile.css file.
For example:
In the HTML file:
<img id="desktopImage" src="someimage.jpg" usemap="someimagemap" />
<img id="mobileImage" src="someimage.jpg" />
In default css doc:
#mobileImage
{
display: none;
}
In mobile css doc:
#desktopImage
{
display: none;
}
Please note that while this method may not be considered the most efficient, it proved effective for completing an introductory HTML and CSS assignment without relying on JavaScript or responsive image maps and browser plugins, as suggested in previous responses.
To enhance your map display, consider incorporating a new CSS class called .map within your media query:
.map {
display: none !important;
position: absolute !important;
left: -9999px !important;
}
On my second html page model.html, I noticed the following issue: When I include a '/' at the end of my route address in the browser like this: http://localhost:3002/home/model/, the correct html page is loaded, but the css/js files do not load. ...
The scrolling speed on the mobile version of my website, robertcable.me, seems to be sluggish. Despite conducting thorough research, I have not been able to find a solution. I have attempted to address the issue by removing background-size: cover from my ...
I have been encountering exclamation points appearing randomly in the output of my PHP email function. After some research, I learned that this could be due to long lines or the need to encode the email in Base64. However, I am unsure how to go about doing ...
I am struggling with implementing an edit field in AngularJS. Can someone please help me with this? Here is the code for my CRUD operations: var app = angular.module('myApp', []) app.controller('myCtrl', ['$scope', functio ...
I have implemented the code provided in a codepen tutorial, but I replaced the world map image with a USA map. However, the dots are not responsive due to the z-index=1 specified on them. I experimented with vh, vw, and percentages, yet when I resize my s ...
I am having difficulty targeting a checkbox located next to a label with a specific name that includes an underscore character. Here is an example of the DOM structure: <div id="form-2143"> <div id="wrap-1353"> <label id="numberfield ...
I am experiencing an issue with the fixed element's width. Here is a code snippet for reference: https://codepen.io/highfield/pen/PKpXGG <body> <nav class="navbar"> <div style="position:absolute; left:20px; top:12px"> & ...
I am looking for a way to reverse the minimum and maximum values of two input elements that I have defined. Is there a way to achieve this using HTML or JavaScript (Angular)? Here is an example of what I am trying to do: <label> Width: < ...
I'm struggling to figure out why this isn't functioning. I've reviewed the Google extension dev docs and examined some sample code. Checked various Stack Overflow questions and answers, but haven't received any helpful feedback or res ...
I need assistance with setting up a Bootstrap dialogue modal to open at the clicked position on a mousedown event when a user interacts with the page. Despite my attempts, the dialogue modal is not opening where it should be. Here's what I've tri ...
Is there a way to implement an input text field in React with the placeholder "DD-MM-YYYY," that partially disappears as I start typing? For example, when I type "02-," only "-MM-YYYY" should remain visible as part of the placeholder. ...
I've designed labels to function as buttons for radio buttons. I'm struggling to figure out why I can't add padding between the border and the background color content. Should I reconsider the structure of the radio/label elements, or is th ...
Is there a way to make the background color different for blocks 3 through 6 while maintaining a full-page background color effect without any padding or margin? .container { display: grid; grid-template-columns: 1fr 1fr; column-gap: 1.5%; ...
In my quest to create a responsive table with inline editing, I turned to Chris's guide at CSS-Tricks (check it out here). To see how it all comes together, take a look at this Plunker demo. On mobile screens, the responsiveness is on point. https: ...
In my AngularJS application, I have a table column in main.html that is clickable. When clicked, it should redirect to a new customer page with the value of the column cell as the customer's name. There is a corresponding service defined for the app m ...
In my HTML code, I have two sibling elements - one is an image and the other is a div. I want to display the image element if the image exists, and show the div element if the image doesn't exist. Here's how my elements are structured: <img ...
Within my structure setup, there is a tower div with inner elements like this: <div class="tower"> <div class="E0">abc</div> <div class="GU">123</di </div> The challenge I am facing is that I need to access the in ...
Attempting to create a simple CSS hover effect. <div class="menu"> <div class="child"></div> </div> <div class="nav"> <div class="item1"></div> </div> The desired outcome is for the style of < ...
.container { white-space: nowrap; overflow: hidden; } .inner { width: 100%; } .list-item { display: 'inline-block', boxSizing: 'border-box', border: '3px solid black' } import React, { Component } from 're ...
My media queries in LESS are functioning correctly on the desktop, but encountering issues when tested on an iPad2 or Samsung Galaxy 4 phone. It appears that the device-pixel-ratio is causing disruptions. I attempted to reduce the min-device-pixel-ratio to ...