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
Related
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 trying to add social media buttons to my WordPress page via HTML code:
However, they styling does not work, they take up the entire page and are much too big. Why does this happen, and can I fix it?
Here is the code:
<style type="text/css">
#share-buttons img {
width: 35px;
padding: 5px;
border: 0;
box-shadow: 0;
display: inline;
}
</style>
<div id="share-buttons">
<!-- Facebook -->
<a href="http://www.facebook.com/sharer.php?u=http://www.jusskaur.com/blog/workshop-with-senior-ladies/" target="_blank">
<img src="http://www.jusskaur.com/wp-content/uploads/2016/06/facebook.png" width="35" height="35" alt="Facebook" />
</a>
<!-- Twitter -->
<a href="https://twitter.com/share?url=http://www.jusskaur.com/blog/workshop-with-senior-ladies/&text=Simple%20Share%20Buttons&hashtags=simplesharebuttons" target="_blank">
<img src="http://www.jusskaur.com/wp-content/uploads/2016/06/twitter.png" alt="Twitter" />
</a>
<!-- Google+ -->
<a href="https://plus.google.com/share?url=http://www.jusskaur.com/blog/workshop-with-senior-ladies/" target="_blank">
<img src="http://www.jusskaur.com/wp-content/uploads/2016/06/google.png" alt="Google" />
</a>
<!-- LinkedIn -->
<a href="http://www.linkedin.com/shareArticle?mini=true&url=http://www.jusskaur.com/blog/workshop-with-senior-ladies/" target="_blank">
<img src="http://www.jusskaur.com/wp-content/uploads/2016/06/linkedin.png" alt="LinkedIn" />
</a>
<!-- Pinterest -->
<a>
<img src="http://www.jusskaur.com/wp-content/uploads/2016/06/pinterest.png" alt="Pinterest" />
</a>
<!-- Email -->
<a href="mailto:?Subject=Simple Share Buttons&Body=I%20saw%20this%20and%20thought%20of%20you!%20 https://simplesharebuttons.com">
<img src="http://www.jusskaur.com/wp-content/uploads/2016/06/email.png" alt="Email" />
</a>
</div>
When a style is being overwritten by another style, the best fix is to use a stronger selector:
#share-buttons a img { /* added 'a' */
width: 35px;
padding: 5px;
border: 0;
box-shadow: 0;
display: inline;
}
For a more in-depth explanation of CSS specificity, read this CSS Tricks article.
instead, define a specific size for the 'a' tags and set the images to be 100% width.
#share-buttons a { width:35px, display:inline-block}
#share-buttons a img {width: 100%}
also, remove the width parameter in the 'a' tags
Add this,
#share-buttons {
width: 100%;
height:auto;
padding: 5px;
border: 0;
box-shadow: 0;
display: inline;
}
#share-buttons > a{
text-decoration:none;
}
#share-buttons > a > img{
width:35px;
height:35px;
}
#share-buttons img {
max-width: 100%;
height: auto;
}
#share-buttons a {
width: 35px !important;
padding: 5px;
border: 0;
box-shadow: 0;
display: inline-block;
}
I have a store with a gallery. I was looking to overlay the Thumbnail if a Sold stamp that I made.
If i disable the image the overlay is showing bellow, so I know it is inserting the image, it isn't on top though.
What I see:
How I know the overlay is below (thumbnail disabled):
HTML:
<li class="post-66 product type-product status-publish has-post-thumbnail sold-individually shipping-taxable purchasable product-type-simple outofstock">
<center>
<a href="http://url.com">
<img width="150" height="150" src="thumbnail.jpg" class="attachment-shop_catalog wp-post-image" alt="coelho1" />
<h3>Coelho de Peluxe</h3>
</a>
</center>
</li>
CSS:
.outofstock {
background: url("soldoverlay.png") top left no-repeat;
position: relative;
z-index: 200;
}
.attachment-shop_catalog{
z-index: 1;
}
Can anyone please help me?
Kind Regards
The best way to make an overlay is use a pseudo-element using the class you already have outofstock. Check this snippet as an example:
li {
position: relative;
display: inline-block;
white-space: nowrap;
text-align:center;
margin:10px;
}
.outofstock:after {
content: " ";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, .6);
z-index: 10;
}
<ul>
<li>
<a href="http://url.com">
<img width="150" height="150" src="http://placehold.it/150" alt="coelho1" />
<h3>WITHOUT OVERLAY</h3>
</a>
</li>
<li class="outofstock">
<a href="http://url.com">
<img width="150" height="150" src="http://placehold.it/150" alt="coelho1" />
<h3>OVERLAY</h3>
</a>
</li>
</ul>
Edit
To keep the link to of the href you can create the pseudo-element inside the a tag like this:
li {
display: inline-block;
white-space: nowrap;
text-align: center;
margin: 10px;
}
a {
position: relative;
display:block;
}
.outofstock a:after {
content: " ";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, .6);
z-index: 10;
}
<ul>
<li>
<a href="http://url.com">
<img width="150" height="150" src="http://placehold.it/150" alt="coelho1" />
<h3>WITHOUT OVERLAY</h3>
</a>
</li>
<li class="outofstock">
<a href="http://url.com">
<img width="150" height="150" src="http://placehold.it/150" alt="coelho1" />
<h3>OVERLAY</h3>
</a>
</li>
</ul>
you could avoid to use an image and play with CSS 2D transformations (supported even on IE9)
e.g. http://codepen.io/anon/pen/NPydBP
Markup
<ul>
<li data-in-stock="vendido">
<a href="">
<img src="http://dummyimage.com/400x280/cccccc/fff.jpg" />
</a>
</li>
</ul>
CSS
li {
position: relative;
overflow: hidden;
}
[data-in-stock]:after {
position: absolute;
top: 0;
left: 0;
z-index: 1;
content: attr(data-in-stock);
display: block;
min-width: 160px;
color: #fff;
background: #222;
padding: 6px 10px;
text-transform: uppercase;
font: 1em Arial;
-webkit-transform: rotate(-42deg) translateX(-50px);
-moz-transform: rotate(-42deg) translateX(-50px);
transform: rotate(-42deg) translateX(-50px);
}
The text overlapped comes from the data-in-stock attribute in the markup, so you can easily change the text or optionally serve a different page language
This approach could also work if you need to show an image instead of a text (the content property also accepts an url to an image): see http://codepen.io/anon/pen/dPdNBQ
Final Result
1) Create a DIV to place your image in, set left and top css, and set z-index to 5, set width and height to be same as image
2) Create another DIV with same left, top, width, and height, but set z-index higher. Place img tag with outofstock in it
I have a collection of images sorted into three groups; a group with all the images, a group with the first half of the images and a group of the second half of the images. I want to put the images in a line, but the last image keeps dropping to the bottom... how do I fit this is the same line?`
#firstlot {
z-index: 10;
position: absolute;
left: 61%;
top: 3.5%;
}
#secondlot {
z-index: -5;
position: absolute;
left: 61%;
top: 3.5%;
}
#home {
width: 17.5%;
}
#home2 {
width: 17.5%;
}
#thecoopertimes {
width: 38.5%;
}
#thecoopertimes2 {
width: 38.5%;
}
#aboutme {
width: 25%;
}
#aboutme2 {
width: 25%;
}
#contact {
width: 21%;
}
#contact2 {
width: 21%;
}
<div id="allbuttons">
<div id="firstlot">
<a href="http://www.coopertimewell.com/index">
<img id="home" src="coopertimewell/buttons/home1.png" />
</a>
<a href="http://www.coopertimewell.com/thecoopertimes.html">
<img id="thecoopertimes" src="coopertimewell/buttons/coopertimes1.png" />
</a>
<a href="http://www.coopertimewell.com/aboutme.html">
<img id="aboutme" src="coopertimewell/buttons/aboutme1.png" />
</a>
<a href="http://www.coopertimewell.com/contact.html">
<img id="contact" src="coopertimewell/buttons/contact1.png" />
</a>
</div>
<div id="secondlot">
<a href="http://www.coopertimewell.com/index">
<img id="home2" src="coopertimewell/buttons/home22.png" />
</a>
<a href="http://www.coopertimewell.com/thecoopertimes.html">
<img id="thecoopertimes2" src="coopertimewell/buttons/coopertimes22.png" />
</a>
<a href="http://www.coopertimewell.com/aboutme.html">
<img id="aboutme2" src="coopertimewell/buttons/aboutme22.png" />
</a>
<a href="http://www.coopertimewell.com/contact.html">
<img id="contact2" src="coopertimewell/buttons/contact22.png" />
</a>
</div>
</div>
I know when you look at the code you will say to make an unsorted list instead, but I'm doing it this way for a reason.
It's because you have extra spaces in your code, check here :
Removing whitespace between HTML elements when using line breaks
Thus you can remove them or give a smaller width for each elements.
Example, if you don't format the HTML you won't have your problem:
<img id="home2" src="coopertimewell/buttons/home22.png" /><img id="thecoopertimes2" src="coopertimewell/buttons/coopertimes22.png" />
The problem is that if you adds all the numbers % on your images, it provides over 100%. Then you have space between your images, which you should also take into account.
I have tried and it resolves itself when you corrects the numbers.
Please try a vertical-align:top; to all div that is getting aligned to bottom
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();
};