Including a pointer image in an image map

Here is a CSS image map setup that I've been using:

HTML:
<div style="display:block; width:791px; height:1022px; background:url(images/image.jpg); position:relative; margin:2px auto 2px auto;">
<div><a class="imagemaplink" style="left:112px; top:564px; background:transparent; display:block; width:336px; height:0; padding-top:29px; overflow:hidden; position:absolute;" title="Image1" href="#"></a></div>
………


CSS:
a.imagemaplink:hover{background:transparent; border:1px solid black; color:black;}

Although this method works well, I am interested in adding a pointer image on the left side of the link when hovered. This pointer image can also be made into a link, but it should not become part of the border when the user hovers over it. For example:

If you have any suggestions on how to achieve this efficiently, I would greatly appreciate it. Thank you.

htmlcssimagedictionary

Answer №1

If you'd like to see a live demonstration, check it out here: http://jsfiddle.net/5abv6/

In my example, I opted for a background color rather than an image.

Here's how I set up the 3 links in HTML:

<a href="#" class="main-link"><span class="pointer">
        <!-- Image of finger or background in CSS --></span>
        <span class="border">Link 1</span>
    </a>
    <a href="#" class="main-link">
        <span class="pointer"></span><span class="border">Link 2</span>
    </a>
    <a href="#" class="main-link">
        <span class="pointer"></span><span class="border">Link 3</span>
    </a>

Here is the CSS code for it (keeping in mind a 20px by 20px pointer image):

a.main-link {display:block; height:30px; width:150px; margin-bottom:5px;}

a.main-link .border {
    margin-left:40px;
    display:block;
    height:30px;
    width:105px;
    padding-left:5px; /* margin-left + width + padding-left = width of .main-link */
}

a.main-link:hover .border {border:1px solid #000;}
a.main-link:hover .pointer {
    display:block;
    background:url(yourpointerimage.jpg) no-repeat 0 0;
    width:20px;
    height:20px;
    float:left;
    margin-top:5px;
    margin-left:10px; /* Additional margins for centering */
}

The class="pointer" span is where your pointer image appears. The class="border" span adds the border when hovered, all within the anchor tag for appropriate behavior.

Alternatively, you could include the image in the HTML between the 

<span class="pointer"> </span>
and use .pointer {display:none;} in CSS with 
a.main-link:hover .pointer {display:block;}
on hover.

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

Creating a column names dictionary in PySpark can be achieved by using various functions and methods available

When I receive files, sometimes the columns are named differently. Here are some examples: In the first file, the column names are: "studentID", "ADDRESS", "Phone_number". In the second file, the column names are: "Common_ID", "Common_Address", "Mobile_nu ...

pythondataframeapache-sparkdictionarypyspark

Exploring Partial Views in Bootstrap Single Page View and AngularJS

Currently, I am utilizing Bootstrap's single page view design, specifically the one found at this link: http://www.bootply.com/85746. As my code in the view has grown to nearly 500 lines and is expected to expand further, I am seeking a method to crea ...

htmlangularjstwitter-bootstrap

Unable to alter the css of a jQuery object

I have been attempting to modify the CSS of two child elements of a specific element using Backbone and jQuery. However, my code does not seem to be working as expected. I suspect that the issue lies in distinguishing between a DOM element and a jQuery obj ...

javascriptjquerycssbackbone.js

The animation in CSS seems to be malfunctioning, but strangely enough, the exact same code works elsewhere

Recently, I encountered a strange issue with my project. An animation effect that was working perfectly fine suddenly stopped working when I opened the project. To troubleshoot, I downloaded the same project from my GitHub repository and found that the ani ...

cssanimation

Bring to life a dashed slanted line

After incorporating the code from this post on Stack Overflow about animating diagonal lines, I was pleasantly surprised with how well it worked. However, my next goal is to style the line in such a way that it appears dotted or dashed, as opposed to one ...

csscss-animations

What is the best way to increase a numerical input?

While experimenting with HTML input elements, I decided to utilize the step attribute. This allowed me to increment the current value by 100 when clicking the up or down arrows in the input field. However, I discovered that the step attribute restricts th ...

javascripthtmlhtml-input

How to fetch select element within a table by using jQuery

I encountered a situation where I have a table element with a select element inside its td. The id of the table (in this example, it is "table1") could potentially change. So my query is, how can I retrieve the selected option using the table ID in JQuer ...

javascriptjqueryhtml

Using javascript to dynamically change text color depending on the selected item

I am currently working on a website for a snow cone stand and I want to incorporate an interactive feature using JavaScript. Specifically, I would like to color code the flavor list based on the actual fruit color. The flavor list is already structured i ...

javascripthtmlcsssass

How can Python be used to change the read-only status of an HTML input element using Selenium

Currently, I am attempting to utilize Selenium to clear a text field that is within a 'read only' input field. Despite not encountering any errors in this portion of the code, it does not yield the desired outcome: from selenium.webdriver.common ...

pythonhtmlseleniumselenium-webdriversendkeys

retrieve all entries from a paginated grid

Currently, I am utilizing the datatable feature in bootstrap4 with a table that has pagination set to display 10 items per page. I have implemented a function to retrieve values from the table, however I am facing an issue where I am only able to retriev ...

javascripthtmljquerybootstrap-4bootstrap-table

Show submenu upon hovering and make sure it remains visible

Is there a way to keep a submenu displayed and the background color changed even after moving the mouse away from the menu item onto the submenu? This is my HTML: <div class="shoplink"><a>Online Shop</a></div> <div id="shop-men ...

jquerycss

Managing elements within another element in Angular

I am currently exploring the use of Component Based Architecture (CBA) within Angular. Here is the situation I am dealing with: I have implemented three components each with unique selectors. Now, in a 4th component, I am attempting to import these compon ...

javascripthtmlangulartypescriptjhipster

choose multiple elements from an array simultaneously

Looking for help with a basic Array question and seeking the most effective solution. The scenario involves having an array: var pathArr = [element1, element2, element3, element4, element5, element6] If I want to select multiple elements from this array ...

javascripthtmlarrays

Tips for changing the text color to stand out from the color of the input field

My input field undergoes color changes depending on whether it's in dark mode or light mode. However, I'm struggling to maintain a distinct color for the input field border and text. The client prefers a very light border for the input field but ...

cssreactjs

Is your href in javascript not functioning properly?

Recently, I completed the development of a mobile web application. Overall, everything seems to be working smoothly except for one issue: there is a link with JavaScript in its href that is causing problems. Strangely enough, this link works perfectly fi ...

javascripthtmlmobile

CSS Dynamix - Include the parameter ?value to resolve caching issues

I came across a discussion on the issue of Dynamic CSS caching problem where it was suggested to append ?value to the end of the css file name for better caching. I am currently using themes and the css files are loaded automatically. Is it possible to use ...

csscachinghttphandler

Step-by-step guide on positioning a div below another div and centering both elements horizontally

Trying to center the "input" div below the "InputBelow" div using "flex-direction: column" is causing issues with "justify-content; center." The goal is to center the main "border" div in the middle of the screen and align the other elements inside it. ...

htmlcss

Stylish CSS menu design

I am struggling to set up a top menu bar using float: left. How can I achieve the desired behavior for a top menu bar? The code snippet below demonstrates what I have tried so far: * { margin:0; padding: 0; } #menu { background-color: yell ...

cssuser-interfacemenu

tips for organizing the <div> element horizontally within a design

I have reviewed some similar questions that have been posted and attempted to apply their solutions to my code. However, I am still encountering difficulties. Below is the code that I need help with. I am looking to organize the main content along with t ...

htmlcss

Looping through mysql data horizontally within a div tag

Looking for assistance to create a content loop similar to the one on this website? I attempted to use a while() loop, but it ended up displaying vertically without using a table. I suspect this page utilizes thumbnails. What I aim for is to have the it ...

phphtmlmysqlcssloops