Is anyone else experiencing issues with their imagemap due to Twitter Bootstrap?

I'm excited to ask my first question here as a beginner. I am truly grateful for all the assistance and guidance I have received from this site. I hope that the questions I ask can also benefit others in some way :)

Although imagemaps may not be used often nowadays, I still have one implemented. However, Twitter Bootstrap (version 3.0.0) is causing issues with my coordinates, misplacing the links. I managed to make it work using the code below, but then it doesn't resize properly to fit the screen. Any suggestions?

<style>
<!Driving me nuts - without this the imagemap links are in the wrong places - with this it wont resize>
#img_ID {
    max-width:none;
    width:auto;
    display: inline;

}

</style>

Here is a snippet of the actual imagemap code 

<div style="width:100%">
<img id="img_ID" src="NewMatGuide.png" USEMAP="#map" border="0" class="" width:100% alt="">
</div>
 <Map id="map_ID" name="map">
   <AREA shape="RECT" COORDS="80,151,258,252" HREF="PlacementResults.php?ChosenArea=A">
   <AREA shape="RECT" COORDS="80,328,258,432" HREF="PlacementResults.php?ChosenArea=B">
   <AREA shape="RECT" COORDS="80,521,258,620" HREF="PlacementResults.php?ChosenArea=C">
csstwitter-bootstraptwitter-bootstrap-3imagemap

Answer №1

Instead of using an image map, consider creating 3 divs that serve as links with the following HTML and accompanying CSS.

<div id="box_a">
    <a class="box_link" href="PlacementResults.php?ChosenArea=A"></a>
</div>
<div id="box_b">
    <a class="box_link" href="PlacementResults.php?ChosenArea=B"></a>
</div>
<div id="box_c">
    <a class="box_link" href="PlacementResults.php?ChosenArea=C"></a>
</div>

Utilize percentages to specify the coordinates. Assuming that your X1 and X2 coordinates are consistent for the links in your image map, adjust the % values accordingly to ensure proper coverage of your image.

#box_a, #box_b, #box_c {
    margin-left: 10%;
    margin-top: 5%;
    height: 15%;
    width: 25%;
}
.box_link {
    display: block;
    height: 100%;
    width: 100%;
}

Refer to this resource for more information on creating div links. Additionally, consider setting NewMatGuide.png as a background-image and defining the size of #img_ID.

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

Is it possible to deactivate the onclick event following a successful ajax request?

I am looking to disable the onclick event after a successful ajax request. <div class="report_button" id="report_button" title="Reportthis" style="width:65px;height:15px;" onclick="reported_text(user_id,lead_id);">Report</div> This is the div ...

javascriptjqueryhtmlcssajax

Photos inside a flexbox do not resize correctly

When placing 2 images inside a flexbox with the column direction, I anticipated that the images would resize accordingly when adjusting browser window size. However, this is not the case. Regardless of the CSS styles applied, I am unable to maintain the o ...

htmlcss

Mismatched units px and rem (existing fixes are ineffective)

Recently, I attempted to implement custom sass in a project at work. However, when running npm watch, I encountered the error: Incompatible units px and rem. The root of the issue seems to be in _variables.scss where the following line resides: $input-h ...

csslaravelvue.jssassbootstrap-4

Unexpected arrows are being added to the dropdown menus in a responsive Twitter Bootstrap menu

I am puzzled by the behavior of my responsive twitter bootstrap nav. Take a look at this screenshot: The issue is with the strange up-pointing arrows that appear. The carets are fine, but these extra arrows are not desired. They disappear if I remove all ...

cssruby-on-rails-3twitter-bootstrapbootstrap-sass

I am attempting to arrange 9 images in a grid format of 3 rows by 3 columns to create a seamless

I am currently working on setting up a 3x3 grid on my website with 9 images and text underneath. The first 6 images are displaying as I intended, but when I add the last 3 images, the layout gets messed up. The first image jumps under the 3rd image on the ...

htmlcssimage

Tips on completing landing page animations and displaying the main page of a website by utilizing React JavaScript

https://i.stack.imgur.com/M4VgY.pngIs there a way to stop the landing page animation after 2-3 seconds and show the main page instead? Can I achieve this by using setTimeOut function in JavaScript? [ export default Loader; ...

javascripthtmlcssreactjs

Excessive space being taken up by the final character in the Material-UI Autocomplete arrow endAdornment

<Autocomplete {...defaultProps} id="disable-close-on-select" disableCloseOnSelect renderInput={(params) => ( <TextField {...params} label="disableCloseOnSelect" variant="standard" /> )} /> Click h ...

cssreactjsmaterial-ui

CarouFredSel Transition Troubles

I am currently using CarouFredSel to create an image carousel, but I am encountering some issues with the transitions between items. My goal is to incorporate simple HTML elements into the carousel instead of just plain images. However, when I attempt to ...

javascriptjqueryhtmlcsscaroufredsel

Determine whether the color is a string ('white' === color? // true, 'bright white gold' === color? // false)

I am facing an issue with multiple color strings retrieved from the database. Each color string needs to be converted to lowercase and then passed as inline styles: const colorPickerItem = color => ( <View style={{backgroundColor: color.toLowerC ...

javascriptcssreactjsreact-native

The navigation bar extends beyond the page's width

Currently, I am working on a website that was started by a former colleague. One issue I have noticed is that when the browser window's resolution reaches 768px or lower, the navigation transforms into a drop-down menu that appears wider than the page ...

jqueryhtmlcssnavbarnav

What is the best way to center align tabs in a Bootstrap 4 list?

I am working with tabs structured like this: <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/> <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist"> <li class="nav-item"> ...

htmlcssbootstrap-4

Unable to align divs horizontally

On my webpage, I have set up two divs - Box1 and Box2. Within Box2, there are two nested divs called Box2-1 and Box2-2. However, when I view the page, Box1 and Box2 do not align side-by-side as expected. Instead, Box1 moves downwards and lines up with the ...

htmlcss

Dropdown with multiple selections organized in a hierarchical structure

I am in need of the following : Implement a drop-down menu that reflects hierarchical parent-child relationships. Include a checkbox for each node to allow for selection. If all child nodes are selected, their parent node should be automatically ch ...

javascriptjquerycssdrop-down-menu

Problem with jQuery image gallery

Currently, I am in the process of creating a simple image gallery that enlarges an image when it is clicked. To achieve this functionality, I am utilizing jQuery to add and remove classes dynamically. $(".image").click(function() { $(this).addClass("b ...

jqueryhtmlcss

Align Text Center inside a Magical H1 Heading Tag

I'm having a bit of trouble with something that should be simple. I want to center the text inside my h1 tag on a wizard, and I've added this CSS to my stylesheet.css: .h1textalign { text-align:center; } Here's how I'm trying to apply ...

htmlcssasp.nettext-align

Vanilla JS method for resetting Bootstrap 5 client-side validation when focused

I'm currently exploring Bootstrap 5's client-side validation feature. However, I've encountered a usability issue with the is-invalid class. After clicking the submit button, this class persists until the correct input is entered. I would li ...

javascripthtmlcsstwitter-bootstrap

The overflow:hidden property does not seem to be effective for controlling the display of the

I'm attempting to construct a carousel using a ul element where the li items act as blocks within the ul container. However, I have encountered difficulties with two different approaches where the overflow property does not behave as expected. Approa ...

htmlcssoverflowhtml-lists

Collapse in Bootstrap without any Animation

How can I add animation to the Bootstrap Collapse feature on my website? I am using an icon from the Font Awesome library to trigger the collapse effect, but currently, it just pops up without any animation. What could be causing this issue? You can view ...

htmlcsstwitter-bootstrap

Tips for creating a tooltip above an SVG circle with AngularJS

I'm currently working on a project where I am using AngularJS and SVG to plot circles on a page. My goal is to have a tooltip appear when a user hovers over one of the circles. I came across an explanation on how to achieve this on this website, but u ...

javascriptangularjstwitter-bootstrapsvgangular-ui-bootstrap

What is the most effective way to create a live preview using AngularJS and CSS?

Is there a way to dynamically change the background color of the body based on the hexadecimal value entered in a textfield, without using jQuery? I want the change to happen live as the user types. The current code works but it doesn't feel right. I ...

javascriptjqueryhtmlcssangularjs