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;
}
Apologies for not making an attempt just yet, but I'm struggling to locate what I need. Here's the menu structure in question: <div class="overlay-navigation"> <nav role="navigation"> <ul class="test"> & ...
Currently, I am in the process of updating my website to simplify color palette swapping. We are still experimenting with different colors that work well together. Our stack includes Vue and Vuetify, with SCSS generating our primary CSS file. Most of our c ...
After exploring various methods for achieving auto-height in a textarea, I decided to go with the contenteditable approach as it seemed cleaner to me. However, while it worked perfectly on its own, it failed when placed within flexbox containers. I experi ...
Creating a function that involves multiple boxes with a search function. The search function is working for the most part, but when clicking on a result, certain content should display. function filterFunction() { var input, filter, ul, li, a, i; ...
I am attempting to dynamically add a CSS class to a component right after its creation by utilizing ViewContainerRef and ComponentFactoryResolver. My goal is to determine the class based on which other Components have already been added to myViewContainerR ...
Here is a code snippet that I am working with: HTML (version 4.0) <div class="temperatura"> <a href="/link/" class="temperatura_localita"> <span style="padding-left:12px;"> T ...
I have been utilizing the Twit package for searching tweets. After executing the js file in the console, I am able to see the tweets but when trying to use them on my webpage, an error 'Uncaught ReferenceError: require is not defined' pops up. Th ...
After spending the last couple of days immersed in various web development resources, I find myself stuck on a particular issue. As someone new to this field, the learning curve is quite steep... Let's take a look at a single row in my project: < ...
I'm currently facing a challenge in moving an <hr> element behind my div element. I have already tried positioning, but it didn't work as expected. The <hr> is still visible through the white parts, most likely because they are transp ...
Can anyone help me figure out how to customize the colors of radio toggle buttons using my style.css in Bootstrap? I've managed to change the background color in normal mode, but I'm struggling with changing the checked state. I've searched ...
Can anyone suggest ways to improve the formatting of this HTML list when wrapping around a left-floated image? I often encounter this small problem while working on client websites: The image has a right-margin, but it doesn't seem to affect the ... ...
Looking to create a unique top header layout with the logo positioned in the center and navigation options on both sides. Below is the initial code, but unsure how to proceed further. Any suggestions on achieving this design? <div class="header"> ...
I'm currently working on an Opera Extension and I have a question. Is there a way to use the includes folder in order to directly inject jQuery into the live HTML of a webpage? For example, can I change the background color of the DOM to black? If ...
I'm attempting to create a visually appealing underline under the active tab, but I am facing challenges in targeting the specific class. Since I am utilizing bootstrap and unable to adjust the width and margin of text-decoration or recognize an eleme ...
I need help arranging the results from a MYSQL database into an HTML table. Right now, each item is displayed in one column per row. Here is my current code: <?php $catagory=$_GET["q"]; $con = mysql_connect("localhost","cl49-XXX","XXX"); if (!$con) ...
I'm having trouble using the :hover feature in CSS to control the display of one div when hovering over another, it's not functioning as expected. I've successfully implemented this on other elements, but can't seem to get it right in t ...
I'm currently experimenting with list.js in order to create a real-time search feature for a table. I have successfully tested it on lists (similar to the example provided at ). However, I am facing difficulty replicating this functionality for tables ...
My phone number formatting script is supposed to add dashes after the third and sixth characters, as well as insert an "x" after the 10th character for extensions. However, it is adding extra "x's" after the 12th character, resulting in the incorrect ...
I'm encountering an issue with displaying a div after clicking on a link. Upon clicking one of the links within the initial div, a new div is supposed to appear below it. All tests conducted in jsfiddle have shown successful results, but upon transf ...
Is there a way to restrict an HTML input field to only accept numbers and email IDs? <input id="input" type="text" /> ...