If I have an image that is 200px wide and 900px tall
How can I make a div display alongside it when hovering over a specific section of the image?
If I have an image that is 200px wide and 900px tall
How can I make a div display alongside it when hovering over a specific section of the image?
Utilize the map element to outline specific areas of an image, such as rectangles, circles, and polygons, allowing for mapping of complex regions.
For instance, in the example below, two areas are mapped - the left and right portions of an image.
HTML:
<html><body>
<img src="https://www.google.com/images/srpr/logo3w.png" usemap="gmap"/>
<map name="gmap">
<area id="left" shape="rect" coords="0,0,135,95" />
<area id="right" shape="rect" coords="135,0,275,95" />
</map>
</body></html>
JavaScript(using jQuery):
$('#left').hover(function(){
alert("left")
})
$('#right').hover(function(){
alert("right")
})
See it live here: http://jsfiddle.net/anuraguniyal/GtMXk/3/
Add a div element to your image and apply CSS properties such as position:absolute or z-index:100. Then, attach the jQuery event listener .hover() to it.
Retrieve the current mouse coordinates, determine the position of the image, and then use this information to identify the specific section of the image that is being hovered over.
To align the image on the page, apply CSS positioning techniques and integrate jQuery functions like .hover() paired with .fade() or .show() / .hide()
Have you ever checked out this amazing plugin?
Make sure to explore the demo:
You could find some useful code snippets there.
After noticing a significant decrease in page performance scores due to Disqus comments embedded on Vercel Analytics, I am considering implementing a "Load comments" button instead of loading the actual comments onClick. I have been using the disqus-react ...
After updating my server with nodemon, I encountered the following error: C:\Users\mikae\Desktop\Project\node-express-swig-mongo\node_modules\mongoose\lib\index.js:523 throw new mongoose.Error.MissingSchem ...
Can someone help me decipher this piece of code? //... obj.dd.on('click', function(event){ $(this).toggleClass('active'); return false; }); //... $(function() { var dd = new DropDown( $('#dd') ); $(doc ...
Currently, I am working on creating a grid of large buttons using React and Bootstrap. I have implemented CSS for hover and focus effects on these buttons. My main issue arises when I try to load the screen with one button already focused. I attempted to ...
Here's a unique layout I want to achieve using the DataTables plugin. https://i.sstatic.net/YxfOk.png Notice how the address spans across 3 columns. This html code disrupts the sorting feature of DataTables and causes the table to shift. Here&apos ...
I am currently using the node-fetch module for making API calls. I have a function that handles all the API requests and returns both the status code and the response body. The issue I'm facing is that when returning an object with the response data, ...
To enhance the user interface, I've utilized a routerLink with an image to navigate back to the home page, and a button to direct users to add a new customer. Now, I am aiming to create some space between these elements. Previously, I used "& ...
Currently, I am facing an issue where the dataTable paginates and removes the DOM pages along with the data. My goal is to extract all the data from the dataTable and convert it to JSON without losing access to the DOM when pagination occurs. I want to m ...
My project is a basic checklist that looks like this https://i.sstatic.net/OC9Rml.png I've encountered some strange behavior while using the map function in reactJS. import React from "react" import "./App.css" import todosData f ...
var cart = [ { "Items": "", "category": "", "contents": [ { "Apple iPhone": "222", "French": "Bounjour", "id": 1234, "icon": "/images/bg.jpg", "callback": "use()", "pricetag":"false" } ] }, { "Items": "No 2" ...
Previously, I set up datatables using the code below: $(function () { $('#keywords-table').DataTable({ "ajax": ({ url: "{{ route('getKeywordsByProductId') }}", method: "get", ...
Currently, I am working on a website for a movie production company that showcases their various films in full-screen mode. Each video is listed and there is a function that automatically takes the user to the next video when a mousewheel event occurs. How ...
Hello, I have encountered an issue while using jQuery Ajax function with PHP. The problem lies in the fact that when setting the datatype to "html", my PHP variables are not being returned correctly. JavaScript $.ajax({ type: "POST", dataType: "html", ur ...
I am currently working on implementing an unban feature for my bot, however, I am encountering issues whenever I try to test the command (!unban <userId>). Instead of the expected outcome, I am faced with an error which is detailed below. This snipp ...
Essentially, I have a JSON file containing user and group data and I need to delete a specific group from it. Below is a snippet of the JSON file named authdata.json: [{ "name": "Allan", "role": ["Group Admin", "Super Admin"], "group": ["Cool- ...
I am working with a hierarchy of objects described as follows: A B extends A C extends B D extends B E extends C F extends A and contains a reference to A The annotation for class A is defined as: @JsonTypeInfo(use=JsonTypeInfo.Id.CLASS,include=Jso ...
I have been working on a script that allows for searching without the need to refresh the page. In order to enhance the security of my system, I am transitioning from using the outdated mysql_connect function to the new PDO connection. However, I am facing ...
I am attempting to create a body border on my webpage with rounded corners at the top to simulate the MacOS interface in the browser, similar to the image shown here: https://i.sstatic.net/ECSU9.jpg The issue arises when I scroll, and the top corners van ...
I need to configure the domain: aaaa.com so that it can host a login form for the website located at domain: cccc.com. It's important to note that I have complete control over the server at cccc.com and have successfully set up CORS on that server. A ...
I've hit a roadblock while working on my Chrome extension and could use some assistance. The main issue I'm facing is getting the script to run when activated by the user through an on/off switch in the popup window. It seems like there might be ...