I have an image of a circle that is split into five sections. Each section goes to a different link. It is mapped as polygons. I need to create a hover effect that changes the image to a new image. The updated image will show each section (as it is hovered over) to turn into the same picture but with a green tint over that section. I have create the five new images with the tint for each section but do not know how to plug this in for CSS and HTML. If there is a way to just do the coding in HTML that would be WONDERFUL since I do not use CSS too much (clearly from code below).
Thanks in advance :) :) :)
HTML below:
<div Class="skyline" id="content-container" style="width: 973px">
<img src="images/Industry/Auto/MainPageButtons-Circle.png" alt="" width="973" height="500" usemap="#logos"/>
<map name="logos">
<area shape="poly" coords="423,340,486,361,490,486,381,462,308,403,266,324,387,284" href="http://pantheontile.com/Industry-Auto-Shop.html" title="Shop" alt="Shop" />
<area shape="poly" coords="629,55,691,127,728,231,715,323,598,286,591,214,546,163" href="http://pantheontile.com/Industry-Auto-Commons.html" title="Commons" alt="Commons" />
<area shape="poly" coords="348,58,440,19,540,19,628,58,546,164,485,148,430,167" href="http://pantheontile.com/Industry-Auto-Showroom.html" title="Showroom" alt="Showroom" />
<area shape="poly" coords="426,166,391,209,382,286,264,323,251,231,284,127,347,58" href="http://pantheontile.com/Industry-Auto-Exterior.html" title="Exterior" alt="Exterior" />
<area shape="poly" coords="712,323,674,399,595,464,491,485,487,361,553,341,596,286" href="http://pantheontile.com/Industry-Auto-ServiceDrive.html" title="ServiceDrive" alt="Service Drive" />
</map>
</div>
CSS below:
#skyline {
width: 973px; height: 500px;
background: url(images/Industry/Auto/MainPageButtons-Circle.png);
margin: 10px auto; padding: 0;
position: relative;}
#skyline li {
margin: 0; padding: 0; list-style: none;
position: absolute; top: 0;}
#skyline li, #skyline a {
height: 500px; display: block;}
#Shop {left: 0; width: 95px}
#Commons {left: 96px; width: 75px}
#Showroom {left: 172px; width: 110px}
#Exterior {left: 172px; width: 117px}
#ServiceDrive {left: 117px; width: 220px}
#Shop a:hover {
background: transparent url(images/Industry/Auto/MainPageButtons-Shop.png)
423,340,486,361,490,486,381,462,308,403,266,324,387,284 no-repeat;}
#Commons a:hover {
background: transparent url(images/Industry/Auto/MainPageButtons-Commons.png)
629,55,691,127,728,231,715,323,598,286,591,214,546,163 no-repeat;}
#Showroom a:hover {
background: transparent url(images/Industry/Auto/MainPageButtons-Showroom.png)
348,58,440,19,540,19,628,58,546,164,485,148,430,167 no-repeat;}
#Exterior a:hover {
background: transparent url(images/Industry/Auto/MainPageButtons-Exterior.png)
426,166,391,209,382,286,264,323,251,231,284,127,347,58 no-repeat;}
#ServiceDrive a:hover {
background: transparent url(images/Industry/Auto/MainPageButtons-ServiceDrive.png)
712,323,674,399,595,464,491,485,487,361,553,341,596,286 no-repeat;}
Related
My problem is similar to this one: Place images over another based on that image coordinates , but it doesn't seem to work in VueJS and PrimeVue.
I'm trying to achieve the same thing but using a with multiple tags. Each area should have an image corresponding to a building, or the "chair" in the similar problem. The background image is using this map to know the clickable coordonates, because I want to be able to click on the buildings.
My code is the following:
<div class="map-container">
<img src="../assets/Map_F.png" alt="city" usemap="#city" />
</div>
<map name="city">
<area
class="area"
shape="rect"
coords="1049,347,1104,428"
alt="mainBuilding"
href="mainBuilding.htm"
/>
</map>
.map-container {
position: relative;
}
.area {
position: absolute;
display: block;
background-image: url("../assets/building.png");
background-size: cover;
background-position: center;
width: 160px;
height: 160px;
}
I'd really appreciate your help :D
enter image description here
html:
<div id="header" class="head">
<img src="../../image/a2m.png" alt="propic here" usemap="#image" style="width:100px; height:100px;" class="propic"/>
<map name="image">
<area shape="circle" coords="50,50,50" href="opendiary.html" />
</map>
<button class="menubar btn a1">Profile</button><button class="menubar btn a2">Open Diary</button><button class="menubar btn a3">Message</button><button class="menubar btn a4">Options</button>
</div>
css:
#header {
min-width:230px;
max-width:1366px;
min-height: 100px;
position:relative;
border: 2px dashed #dddddd;
background-color: #555f00
}
#header button {
display: inline-block;
position: relative;
float: left;
}
I want all 4buttons to be aligning at bottom. But I cant understand how? I have seen other question but as I am using 4 buttons because of position:absolute and float:right all overlap on each other. How can I solve this?
The following should give you the result you're looking for. (you'll still need to add any responsive behavior the banner might need (as it will break at smaller screen sizes)
/* for IE9- render these elements correctly */
header,
nav {
display: block;
}
/* header container */
.head {
background-color: #555f00;
border: 2px dashed #ddd;
max-width: 1366px;
min-height: 100px;
min-width: 230px;
position: relative;
overflow: hidden;
}
.head__img-area {
float: right;
}
.propic {
width: 100px;
height: 100px;
}
.head__nav-area {
position: absolute;
bottom: 0;
left: 0;
padding: 8px;
}
.head__nav-area .btn {
display: inline-block;
/* dummy styling */
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, .5);
background: rgba(255, 255, 255, .3);
padding: 8px;
color: #fff;
text-decoration: none;
}
.head__nav-area .btn:hover,
.head__nav-area .btn:focus {
background: rgba(160, 160, 160, .5);
border-color: rgba(40, 40, 40, .9);
}
<header id="header" class="head">
<div class="head__img-area">
<img src="../../image/a2m.png" alt="propic here" usemap="#image" class="propic" />
<map name="image">
<area shape="circle"
coords="50,50,50"
href="opendiary.html"
alt="insert descriptive text here" />
</map>
</div>
<nav class="head__nav-area">
<a href="profile.html" class="menubar btn a1">
Profile
</a>
<a href="opendiary.html" class="menubar btn a2">
Open Diary
</a>
<a href="message.html" class="menubar btn a3">
Message
</a>
<a href="#" class="menubar btn a4">
Options
</a>
</nav>
</header>
So what the above is doing is floating the new img-area wrapper to the right, as per your screen shot. The entire nav container is then position absoluted and set to the bottom / left of the header.
I cleaned up the link/button combos you had there... it's invalid to have buttons inside of anchor elements, so I put the classes of the buttons on to the <a>s and made up some dummy styling to display them.
While I used position absolute and floating to achieve this layout, I primarily used them because they were utilized in the code you provided. Since you're using an image map, I'm guessing this may be an older project? And based on that assumption, I figured flex box wouldn't be a solution for you due needing at least IE10 for browser support.
However, if you can use flexbox, I'd highly recommend you check out: https://css-tricks.com/snippets/css/a-guide-to-flexbox/
As it could have been used to achieve this layout (and would be easier to work with for responsive websites)
good luck!
Wrap the buttons and their containers in a div a position that div absolute and align it bottom.
#header {
min-width:230px;
max-width:1366px;
min-height: 100px;
position:relative;
border: 2px dashed #dddddd;
background-color: #555f00
}
#header button {
display: inline-block;
position: relative;
float: left;
}
/**Added this**/
.btn-cont {
position: absolute;
bottom: 0;
/** right: 0; this is to align buttons right**/
}
/**Uncomment this to float image right
img {
float: right;
}
<div id="header" class="head">
<img src="../../image/a2m.png" alt="propic here" usemap="#image" style="width:100px; height:100px;" class="propic"/>
<map name="image">
<area shape="circle" coords="50,50,50" href="opendiary.html" />
</map>
<div class="btn-cont"><!--Added this div-->
<button class="menubar btn a1">Profile</button><button class="menubar btn a2">Open Diary</button><button class="menubar btn a3">Message</button><button class="menubar btn a4">Options</button>
</div>
</div>
Surround all your buttons with a div container and give this div container some CSS. This could look at the end like this:
#header {
min-width: 230px;
max-width: 1366px;
min-height: 100px;
position: relative;
border: 2px dashed #dddddd;
background-color: #555f00
}
#header .buttons {
position: absolute;
left: 0;
bottom: 0;
}
/* To replace the <a> link */
#header .buttons form {
display: inline;
}
/* To style the <a> link more like a <button> */
#header .buttons a {
font: bold 13px sans-serif;
text-decoration: none;
background-color: #E0E0E0;
color: black;
padding: 2px 6px 2px 6px;
border: 1px solid #CCC;
border-right-color: #333;
border-bottom-color: #333;
font-weight: normal;
appearance: button;
-moz-appearance: button;
-webkit-appearance: button;
}
<div id="header" class="head">
<img src="../../image/a2m.png" alt="propic here" usemap="#image" style="width:100px; height:100px;" class="propic"/>
<map name="image">
<area shape="circle" coords="50,50,50" href="opendiary.html"/>
</map>
<div class="buttons">
<a href="profile.html" class="menubar-link">
Profile
</a>
<form action="opendiary.html" method="get">
<button type="submit" class="menubar btn a2">Open Diary</button>
</form>
<form action="message.html" method="get">
<button type="submit" class="menubar btn a3">Message</button>
</form>
<button class="menubar btn a4">Options</button>
</div>
</div>
Float is often considered as bad practise. So try whenever to avoid this option.
Also you should not use <button> tags inside <a> tags. I added two possible ways to avoid this.
This answer helped me: Answer to: How to align content of a div to the bottom?
I am not very familiar with web front-end.
The web designer gave me JPG file it is a bar full of icons.
But what i need is to use these icons one by one.
I don't know if there is a easy way to load a single part from this big picture like:
load_part_from_picture (fileName,oneIconSize=80x80, index=1)
Or i just need to cut these icons into single ones.
My programming language is ASP.Net and C#
Thanks a lot!
ul li {
background-image: url('http://i.stack.imgur.com/3fmAx.png');
background-repeat: no-repeat;
height: 60px;
width: 60px;
display: inline-block;
}
ul li:nth-child(2) {
background-position: -60px 0;
}
ul li:nth-child(3) {
background-position: -120px 0;
}
ul li:nth-child(4) {
background-position: -180px 0;
}
ul li:nth-child(5) {
background-position: -240px 0;
}
<ul>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
<li> </li>
</ul>
You can do this with CSS class. This is a optimization technique called CSS sprites. See more here and here
See working Fiddle
.first-icon {
width: 60px;
height: 60px;
background: url('http://i.stack.imgur.com/3fmAx.png') 0 0;
}
.second-icon {
width: 60px;
height: 60px;
background: url('http://i.stack.imgur.com/3fmAx.png') 65px 0;
}
.third-icon {
width: 60px;
height: 60px;
background: url('http://i.stack.imgur.com/3fmAx.png') 125px 0;
}
Use like below in your HTML:
<div class="first-icon"></div>
<div class="second-icon"></div>
<div class="third-icon"></div>
use one common class with separate class with sprite image
.icon{height:30px; float:left; margin-left:10px; width:30px; background:url("icon.jpg") no-repeat;}
.icon.home{background-position:0 0;}
.icon.services{background-position:-40px 0;}
.icon.product{background-position:-80px 0;}
.icon.about{background-position:-120px 0;}
<div class="icon home"></div>
<div class="icon services"></div>
<div class="icon product"></div>
<div class="icon about"></div>
The image given by your designer is called as image sprite.
An image sprite is a collection of images put into a single image.
Using image sprites will reduce the number of server requests and save bandwidth.
Now how you can use it:
<!DOCTYPE html>
<html>
<head>
<style>
#home {
width: 65px;
height: 60px;
background-image: url("http://i.stack.imgur.com/3fmAx.png");
background-position: 0 0;
}
#next {
width: 60px;
height: 60px;
background-image: url("http://i.stack.imgur.com/3fmAx.png");
background-position: 65px 0;
}
</style>
</head>
<body>
<img id="home" src="http://www.w3schools.com/css/img_trans.gif"><br><br>
<img id="next" src="http://www.w3schools.com/css/img_trans.gif">
</body>
</html>
NOTE : In <img> tag the image used is 1px X 1px (blank) image so you can see the
image clearly, otherwise the original image is overlap on it. This can
be done using <div> also, if you do not want to use <img>
Here is reference : http://www.w3schools.com/css/css_image_sprites.asp
I'm trying to make a social media page for my website and I would like to have different social media icons link to each of my social media page. I've tried to use the map tag but the image resolution changes based on browser. I understand that if I make it an absolute image that it may fix this but using absolute coordinates seems like a very flawed design. Is there a way of tagging the icons with urls that will stay fixed to the proper position regardless of screen resolution?
This is the image with the icons I was talking about:
Thank you!
One solotiun can be use the MAP tag of html (it's cross-browser) and sites like this can help you to get the right coordinate, see this DEMO. But this way it's not realyresponsive then I advice you to use this JQuery plug-in(there is a DEMO) for make <map> tag more responive.
$(document).ready(function(){
$('img[usemap]').rwdImageMaps();
});
/* You can see that it's responive */
img {
width: 300px;
height: 380px;
}
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="http://mattstow.com/experiment/responsive-image-maps/jquery.rwdImageMaps.min.js"></script>
</head>
<body>
<img src="http://i.stack.imgur.com/sMtTr.jpg" alt="" usemap="#Map" />
<map name="Map" id="Map">
<area alt="" title="instantgram" href="#" shape="rect" coords="77,346,177,447" />
<area alt="" title="gmail" href="#" shape="rect" coords="203,576,314,683" />
<area alt="" title="..." href="#" shape="rect" coords="474,579,582,688" />
<area alt="" title="..." href="#" shape="rect" coords="605,344,716,451" />
<area alt="" title="..." href="#" shape="rect" coords="471,104,582,216" />
<area alt="" title="..." href="#" shape="rect" coords="205,106,319,216" />
</map>
</body>
</html>
As I mentioned in a comment, this can be done in a nicely responsive manner:
Fiddle demo
#social-wrapper {
background: #eee;
width: 50%;
height: 0;
padding-bottom: 50%;
margin: 5% auto;
border: 5px solid rgba(100, 100, 100, 0.65);
border-radius: 50%;
position: relative;
}
.social-icon {
position: absolute;
width: 80px;
height: 80px;
background: url(http://placehold.it/80x80);
}
.social-icon:nth-child(1) {
top: calc(8% - 40px);
left: calc(24% - 40px);
}
.social-icon:nth-child(2) {
top: calc(8% - 40px);
left: calc(76% - 40px);
}
.social-icon:nth-child(3) {
top: calc(50% - 40px);
left: calc(100% - 40px);
}
.social-icon:nth-child(4) {
top: calc(92% - 40px);
left: calc(76% - 40px);
}
.social-icon:nth-child(5) {
top: calc(92% - 40px);
left: calc(24% - 40px);
}
.social-icon:nth-child(6) {
top: calc(50% - 40px);
left: -40px;
}
<div id="social-wrapper">
<div class="social-icon"></div>
<div class="social-icon"></div>
<div class="social-icon"></div>
<div class="social-icon"></div>
<div class="social-icon"></div>
<div class="social-icon"></div>
</div>
Wrap each icon in an anchor and link it as needed.
Hello There Please Check my solution:
HTML
<div class="social_media">
<a href="" class="social_item">
<img src="./facebook-256.png" class="sm facebook">
</a>
<a href="" class="social_item">
<img src="./facebook-256.png" class="sm twitter">
</a>
<a href="" class="social_item">
<img src="./facebook-256.png" class="sm tripadvisor">
</a>
<a href="" class="social_item">
<img src="./facebook-256.png" class="sm google">
</a>
<a href="" class="social_item">
<img src="./facebook-256.png" class="sm instagram">
</a>
<a href="" class="social_item">
<img src="./facebook-256.png" class="sm youtube">
</a>
</div>
Then
CSS
.social_media {
position: relative;
width: 15rem;
height: 15rem;
box-sizing: border-box;
margin: 5em auto;
border: 5px solid rgba(100, 100, 100, 0.65);
border-radius: 50%;
}
.social_item img {
text-decoration: none;
position: absolute;
font-size: 3rem;
color: steelblue;
}
[class*="sm"] {
width: 3rem;
height: 3rem;
}
[class*="facebook"],
[class*="twitter"] {
top: 0px;
}
[class*="instagram"],
[class*="tripadvisor"] {
top: calc(15rem / 2 - 3rem / 2);
}
[class*="instagram"] {
left: calc(-3rem / 2);
}
[class*="tripadvisor"] {
left: calc(15rem - 3rem / 2);
}
[class*="google"],
[class*="youtube"] {
top: calc(15rem - 3rem);
}
[class*="facebook"],
[class*="youtube"] {
left: calc((15rem - 3rem) - (3rem / 2));
}
[class*="twitter"],
[class*="google"] {
left: calc(3rem / 2);
}
Once you have this in place you will get something like this:
To finalize it:
The only changes you have to do is change the img src="./facebook-256.png" for the corresponding social media logo, also add your social media link in the a href=""
Thanks T04435
I have an image on a web page that also requires links. I am using an image map to create the links and I am wondering if there is a way to style the area shape on mouseover for a minor touch of interactivity. Is this possible?
I tried this without success:
html
<img src="{main_photo}" alt="locations map" usemap="#location-map" />
<map name="location-map">
<area shape="rect" coords="208,230,290,245" href="{site_url}locations/grand_bay_al" />
<area shape="rect" coords="307,214,364,226" href="{site_url}locations/mobile_al" />
<area shape="rect" coords="317,276,375,290" href="{site_url}locations/loxley_al" />
</map>
css
area { border: 1px solid #d5d5d5; }
Any suggestions?
CSS Only:
Thinking about it on my way to the supermarket, you could of course also skip the entire image map idea, and make use of :hover on the elements on top of the image (changed the divs to a-blocks). Which makes things hell of a lot simpler, no jQuery needed...
Short explanation:
Image is in the bottom
2 x a with display:block and absolute positioning + opacity:0
Set opacity to 0.2 on hover
Example:
.area {
background:#fff;
display:block;
height:475px;
opacity:0;
position:absolute;
width:320px;
}
#area2 {
left:320px;
}
#area1:hover, #area2:hover {
opacity:0.2;
}
<a id="area1" class="area" href="#"></a>
<a id="area2" class="area" href="#"></a>
<img src="http://upload.wikimedia.org/wikipedia/commons/thumb/2/20/Saimiri_sciureus-1_Luc_Viatour.jpg/640px-Saimiri_sciureus-1_Luc_Viatour.jpg" width="640" height="475" />
Original Answer using jQuery
I just created something similar with jQuery, I don't think it can be done with CSS only.
Short explanation:
Image is in the bottom
Divs with rollover (image or color) with absolute positioning + display:none
Transparent gif with the actual #map is on top (absolute position) (to prevent call to mouseout when the rollovers appear)
jQuery is used to show/hide the divs
$(document).ready(function() {
if ($('#location-map')) {
$('#location-map area').each(function() {
var id = $(this).attr('id');
$(this).mouseover(function() {
$('#overlay' + id).show();
});
$(this).mouseout(function() {
var id = $(this).attr('id');
$('#overlay' + id).hide();
});
});
}
});
body,
html {
margin: 0;
}
#emptygif {
position: absolute;
z-index: 200;
}
#overlayr1 {
position: absolute;
background: #fff;
opacity: 0.2;
width: 300px;
height: 160px;
z-index: 100;
display: none;
}
#overlayr2 {
position: absolute;
background: #fff;
opacity: 0.2;
width: 300px;
height: 160px;
top: 160px;
z-index: 100;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img src="http://www.tfo.be/jobs/axa/premiumplus/img/empty.gif" width="300" height="350" border="0" usemap="#location-map" id="emptygif" />
<div id="overlayr1"> </div>
<div id="overlayr2"> </div>
<img src="http://2.bp.blogspot.com/_nP6ESfPiKIw/SlOGugKqaoI/AAAAAAAAACs/6jnPl85TYDg/s1600-R/monkey300.jpg" width="300" height="350" border="0" />
<map name="location-map" id="location-map">
<area shape="rect" coords="0,0,300,160" href="#" id="r1" />
<area shape="rect" coords="0,161,300,350" href="#" id="r2"/>
</map>
Hope it helps..
With pseudo elements.
HTML:
<div class="image-map-container">
<img src="https://upload.wikimedia.org/wikipedia/commons/8/83/FibonacciBlocks.png" alt="" usemap="#image-map" />
<div class="map-selector"></div>
</div>
<map name="image-map" id="image-map">
<area alt="" title="" href="#" shape="rect" coords="54,36,66,49" />
<area alt="" title="" href="#" shape="rect" coords="72,38,83,48" />
<area alt="" title="" href="#" shape="rect" coords="56,4,80,28" />
<area alt="" title="" href="#" shape="rect" coords="7,7,45,46" />
<area alt="" title="" href="#" shape="rect" coords="10,59,76,125" />
<area alt="" title="" href="#" shape="rect" coords="93,9,199,122" />
</map>
some CSS:
.image-map-container {
position: relative;
display:inline-block;
}
.image-map-container img {
display:block;
}
.image-map-container .map-selector {
left:0;top:0;right:0;bottom:0;
color:#546E7A00;
transition-duration: .3s;
transition-timing-function: ease-out;
transition-property: top, left, right, bottom, color;
}
.image-map-container .map-selector.hover {
color:#546E7A80;
}
.map-selector:after {
content: '';
position: absolute;
top: inherit;right: inherit;bottom: inherit;left: inherit;
background: currentColor;
transition-duration: .3s;
transition-timing-function: ease-out;
transition-property: top, left, right, bottom, background;
pointer-events: none;
}
JS:
$('#image-map area').hover(
function () {
var coords = $(this).attr('coords').split(','),
width = $('.image-map-container').width(),
height = $('.image-map-container').height();
$('.image-map-container .map-selector').addClass('hover').css({
'left': coords[0]+'px',
'top': coords[1] + 'px',
'right': width - coords[2],
'bottom': height - coords[3]
})
},
function () {
$('.image-map-container .map-selector').removeClass('hover').attr('style','');
}
)
https://jsfiddle.net/79ebt32x/1/
I don't think this is possible just using CSS (not cross browser at least) but the jQuery plugin ImageMapster will do what you're after. You can outline, colour in or use an alternative image for hover/active states on an image map.
http://www.outsharked.com/imagemapster/examples/usa.html
Here's one that is pure css that uses the + next sibling selector, :hover, and pointer-events. It doesn't use an imagemap, technically, but the rect concept totally carries over:
.hotspot {
position: absolute;
border: 1px solid blue;
}
.hotspot + * {
pointer-events: none;
opacity: 0;
}
.hotspot:hover + * {
opacity: 1.0;
}
.wash {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: rgba(255, 255, 255, 0.6);
}
<div style="position: relative; height: 188px; width: 300px;">
<img src="http://demo.cloudimg.io/s/width/300/sample.li/boat.jpg">
<div class="hotspot" style="top: 50px; left: 50px; height: 30px; width: 30px;"></div>
<div>
<div class="wash"></div>
<div style="position: absolute; top: 0; left: 0;">A</div>
</div>
<div class="hotspot" style="top: 100px; left: 120px; height: 30px; width: 30px;"></div>
<div>
<div class="wash"></div>
<div style="position: absolute; top: 0; left: 0;">B</div>
</div>
</div>
You can do this by just changing the html. Here's an example:
<hmtl>
<head>
<title>Some title</title>
</head>
<body>
<map name="navigatemap">
<area shape="rect"
coords="166,4,319,41"
href="WII.htm"
onMouseOut="navbar.src='Assets/NavigationBar(OnHome).png'"
onMouseOver="navbar.src='Assets/NavigationBar(OnHome,MouseOverWII).png'"
/>
<area shape="rect"
coords="330,4,483,41"
href="OT.htm"
onMouseOut="navbar.src='Assets/NavigationBar(OnHome).png'"
onMouseOver="navbar.src='Assets/NavigationBar(OnHome,MouseOverOT).png'"
/>
<area shape="rect"
coords="491,3,645,41"
href="OP.htm"
onMouseOut="navbar.src='Assets/NavigationBar(OnHome).png'"
onMouseOver="navbar.src='Assets/NavigationBar(OnHome,MouseOverOP).png'"
/>
</map>
<img src="Assets/NavigationBar(OnHome).png"
name="navbar"
usemap="#navigatemap" />
</body>
</html>
In some browsers (chrome, edge) Area::hover::after css is supported.
Something like this should work:
<style>
#a1::hover::after {
position:absolute;
display:block;
content: ' ';
border: 2px solid red;
top: 10px;
left: 10px;
width: 20px;
height: 20px;
}
</style>
<map name="image-map" id="image-map">
<area id="a1" alt="" title="" href="#" shape="rect" coords="10,10,20,20">
</map>
<img src="foo.png" usemap="#image-map" />
See this fiddle:
https://jsfiddle.net/6z2w9trL/4/
Sorry to jump on this question late in the game but I have an answer for irregular (non-rectangular) shapes. I solved it using SVGs to generate masks of where I want to have the event attached.
The idea is to attach events to inlined SVGs, super cheap and even user friendly because there are plenty of programs for generating SVGs. The SVG can have a layer of the image as a background.
http://jcrogel.com/code/2015/03/18/mapping-images-using-javascript-events/
You could use Canvas
in HTML, simply add a canva
<canvas id="locations" width="400" height="300" style="border:1px solid #d3d3d3;">
Your browser can't read canvas</canvas>
And in Javascript (only an example, that will draw a rectangle on the picture)
var c = document.getElementById("locations");
var ctx = c.getContext("2d");
var img = new Image();
img.src = '{main_photo}';
img.onload = function() { // after the pic is loaded
ctx.drawImage(this,0,0); // add the picture
ctx.beginPath(); // start the rectangle
ctx.moveTo(50,50);
ctx.lineTo(200,50);
ctx.lineTo(200,200);
ctx.lineTo(50,200);
ctx.lineTo(50,50);
ctx.strokeStyle = "sienna"; // set color
ctx.stroke(); // apply color
ctx.lineWidth = 5;
// ctx.closePath();
};