Navigate to the hover image with a swift roll

Question

Navigate to the hover image with a swift roll

I have been searching extensively on the web but unfortunately, I haven't come across any relevant links. My goal is to create a customized menu.

The menu should be an area-based rollover menu that transitions based on the section of the image being hovered over by the user. The image and associated link should change based on the specific area of the image being hovered over. Take a look at the image below:

Upon clicking, the next image will appear as shown below,

Lastly, when hovering over a particular slice of pizza, the image displayed should change accordingly. An example can be seen in the image below:

Could this functionality be achieved using CSS3 and JavaScript?

javascript jquery html css

Answer 1

Answer №1

There are two different methods that come to mind. As you have tagged JQuery, I assume that is acceptable. Using pageX and pageY allows you to track mouse movements on the screen and determine the specific area being hovered over. Check out this fiddle I created to see how the coordinates can be determined: http://jsfiddle.net/cpk3mqxw/

$("#image").mousemove(function (e) {
    mousex = e.pageX;
    mousey = e.pageY;
    $("#update").text("x: " + mousex + " y:" + mousey);
});

For checking the coordinates, visualize the page as a grid system in JavaScript. For example, if mousex is between 132 and 155, it indicates a particular part of the image is being hovered over. Having a separate span tag showing updated x and y coordinates will be useful. For instance:

if(mousex >= 102 && mousex <= 220 && mousey >= 26) {
    // do something
}

While it may require additional effort, it proves beneficial in the end. Another approach is using an image map.

<img src="image.jpg" id="image1" usemap="#one">
<map name="one">
<area coords="30, 50, 70, 100" href="gohere.html">
</map>

If you want to highlight or style the area, consider using maphilight.js for more information:

Answer 2

There are two different methods that come to mind. As you have tagged JQuery, I assume that is acceptable. Using pageX and pageY allows you to track mouse movements on the screen and determine the specific area being hovered over. Check out this fiddle I created to see how the coordinates can be determined: http://jsfiddle.net/cpk3mqxw/

$("#image").mousemove(function (e) {
    mousex = e.pageX;
    mousey = e.pageY;
    $("#update").text("x: " + mousex + " y:" + mousey);
});

For checking the coordinates, visualize the page as a grid system in JavaScript. For example, if mousex is between 132 and 155, it indicates a particular part of the image is being hovered over. Having a separate span tag showing updated x and y coordinates will be useful. For instance:

if(mousex >= 102 && mousex <= 220 && mousey >= 26) {
    // do something
}

While it may require additional effort, it proves beneficial in the end. Another approach is using an image map.

<img src="image.jpg" id="image1" usemap="#one">
<map name="one">
<area coords="30, 50, 70, 100" href="gohere.html">
</map>

If you want to highlight or style the area, consider using maphilight.js for more information:

Answer 3

Answer №2

If you're looking for a clever solution to your issue, consider creating a sprite that features an image of a pizza with one slice missing in each variation. Next, set up a div element to match the size of one pizza image:

   <div id="myPizza"></div>

Using a script like the one found at , you can track the X and Y coordinates of the mouse hovering over this div.

Based on where the cursor is positioned on the image, you can apply a specific class with the appropriate background position. For generating these classes, I recommend using .

I trust that this information proves useful to you—employing sprites in conjunction with a straightforward script!

Answer 4

If you're looking for a clever solution to your issue, consider creating a sprite that features an image of a pizza with one slice missing in each variation. Next, set up a div element to match the size of one pizza image:

   <div id="myPizza"></div>

Using a script like the one found at , you can track the X and Y coordinates of the mouse hovering over this div.

Based on where the cursor is positioned on the image, you can apply a specific class with the appropriate background position. For generating these classes, I recommend using .

I trust that this information proves useful to you—employing sprites in conjunction with a straightforward script!

Answer 5

Answer №3

The solution to the problem has been successfully found.

To tackle this issue, I utilized <map> and <area> tags to identify each section (pizza slices) required. Subsequently, I integrated an event handler for onclick() and onmouseover() on each area to trigger a function that alters the image.

HTML

<area shape="circle" coords="200,250,25" onmouseover = "changePic('newImage.png')" />
<img src='start_pic.png' name='mainPic' />

JavaScript

function changePic(img){
   mainPic.src = img;
}

PREVIEW LINK

Answer 6

The solution to the problem has been successfully found.

To tackle this issue, I utilized <map> and <area> tags to identify each section (pizza slices) required. Subsequently, I integrated an event handler for onclick() and onmouseover() on each area to trigger a function that alters the image.

HTML

<area shape="circle" coords="200,250,25" onmouseover = "changePic('newImage.png')" />
<img src='start_pic.png' name='mainPic' />

JavaScript

function changePic(img){
   mainPic.src = img;
}

PREVIEW LINK

Navigate to the hover image with a swift roll

Answer №1

Answer №2

Answer №3

Similar questions

Problem with geocoding to retrieve a list of terrestrial coordinates

Effortless code formatting with VS Code for TypeScript and JavaScript

Please ensure not to include any duplicate elements in the array

Is it possible to generate a form dynamically in a Vue.js HTML file based on JSON data? Check out the provided f

Difficulties arise when trying to pass all data inputted on a form using formData in conjunction with the fetch API

Simulating npm package with varied outputs

Visualizing JSON data in React.js using Chart.js

Issue with Bootstrap 5 Carousel not transitioning between slides

Embed numerous HTML pages within a designated DIV by utilizing a list of hyperlinks

What methods can I use to prevent jquery.address from modifying the URL in specific scenarios?

Transform your image using a stunning zoom-in effect

The watch functionality is failing to work within a specialized attribute directive that is being utilized within a separate custom element directive

Is Protractor compatible with Internet Explorer 9?

Rails Navigation Issue: JQuery Confirmation Not Functioning Properly

The color of the last clicked DIV is supposed to stay permanent, but for some unknown reason

Turn off PrettyPhoto functionality in the code base

Ways to determine if the popupState component in Material UI is currently opened

The final row continues to display the <div> element

iOS datetime-local height adjustment

Creating a bootstrap form field that spans 100% in width: