0

Is it possible to go about turning a dynamically scaled image:

     background: url(img.jpg) no-repeat center center fixed; 
     -webkit-background-size: cover;
    -moz-background-size: cover;
     -o-background-size: cover;
     background-size: cover;

Into something that has individual rollovers/hover states/buttons that scale with the image?

To extend the functionality of something like this: http://davidjbradshaw.com/imagemap-resizer/example/ So that if you were to hover over a state it would perform your css hover animation?

CutHere
  • 1
  • 1
  • trying to figure a solution out and found [THIS, SO Duplicate](http://stackoverflow.com/questions/12661124/how-to-apply-hovering-on-html-area-tag) have a look at the second answer down. – Billy Jan 12 '15 at 18:55
  • Hoping to achieve this with images/divs and NOT canvas/vector/.SVG's — This can be done with svgs but can it be done with IMG? – CutHere Jan 12 '15 at 19:00
  • I think we need more code. At the full size, what/where are the hover states? – Waxi Jan 12 '15 at 19:38

1 Answers1

0

you could do invisible divs over it, I've done it in pixels and it seems to work o.k. but I don't know about cross browser. You would be better off spending some time and doing it in %. You could add onclick's to the divs like a area map

img{position:absolute;top:50px;left:50px;}
div{min-width:200px;min-height:100px;position:absolute;}
#map1{top:50px;left:50px;}
#map2{top:150px;left:50px;}
#map1:hover{background-color:rgba(255,0,0,0.4);}
#map2:hover{background-color:rgba(0,255,0,0.4);}
<img src="http://lorempixel.com/200/200" width="200" height="200" />
<div id="map1"></div>
<div id="map2"></div>
Billy
  • 2,448
  • 1
  • 10
  • 13