How it works
Load an image and drag on it to draw a link area. Each area is saved as percentage coordinates, so the hotspots stay aligned when the image is resized. Fill in the URL, alt and title, then copy the generated HTML/CSS or save the CSS as its own file.
Tips
- Use a clear image with distinct clickable areas; hotspots are rectangles.
- Set alt text for screen readers and title text for hover help.
- Check the result at PC and mobile widths before publishing.
- Use inline styles for a quick paste; use class mode if your site CSS may override inline styles.
Frequently asked questions
Is the image uploaded?
No. The image and your edits stay in your browser. Nothing is sent to beancuit or anyone else.
What kind of images work?
Banners, product images and guide images with clear clickable areas. Positions use percentages, so the hotspots follow the image when it is resized.
How do I use the generated code?
Copy the HTML and CSS into your site, or choose HTML / CSS separate and save the CSS as its own file.
Inline styles or classes?
Inline is the quickest paste. Class mode uses a random parent class to reduce collisions with your site CSS.
Related tags
#Developer35#Color & design20#Images & files17#Security12#Text14#Photos12#Work29#Converters & units15#Generators & random8