CODEWITHSUNDEEP
javascriptjquery
user2017810
user2017810

Reputation: 245

jQuery enlarge image map on mouse over

I have an image over which I created hotspots for hyperlinks using image map. Now I need to enlarge/zoom over the images on mouse over. I have this so far

<script type="text/javascript">
$(document).ready(function () {
$('.mapping').mouseover(function() {

 $(this).animate({
    width: "110%",
    height: "50%"
  }, 'slow');

});
});
</script>
</head>

<body>
<p>
<map id="ImgMap0" name="ImgMap0">
 <area alt="" coords="4, 14, 67, 34" id="a" class="mapping" 
 href="#" shape="rect" />
<area alt="" coords="5, 55, 70, 74" id="b" class="mapping" 
href="# shape="rect" />
....
<img alt="" class="auto-style1" height="529" src="Tools.jpg" 
width="800" usemap="#ImgMap0" /></p>

</p></body>

But the animate () is not working. Alert is being called so I know mouseover() is working. Any ideas for enlarging the area in image map?

JS Fiddle link https://jsfiddle.net/z2Lkf8p0/

Upvotes: 1

Views: 1489

Answers (2)

ebilgin
ebilgin

Reputation: 1252

You cannot enlarge image's map in any way.

You can do this with another way. I'd created a fiddle for it.

http://jsfiddle.net/ebilgin/141bkx84/

HTML

<div class="container">
    <img src="http://dummyimage.com/600x400/000/fff" alt="" />
    <div class="map1 map"></div>
    <div class="map2 map"></div>
</div>

CSS

.container {

    position: relative;
    width: 600px;

}

.container img {

    position: absolute;
    z-index: 1;

}

.map {

    position: absolute;
    background: #F0F;
    z-index: 2;

}

.map1 {

    left: 10px;
    top: 10px;
    width: 100px;
    height: 100px;

}

.map2 {

    right: 10px;
    top: 10px;
    width: 100px;
    height: 100px;

}

JS

$(".map").on("mouseenter", function () {

    $(this).animate({

        width: "200px",
        height: "200px"

    });

});

Area to CSS convert

If all areas types are rectangle its easy. n1,n2,n3,n4

n1: y beginning n2: x beginning n3: y ending n4: x ending

You can convert it. 

left:   n2;
top:    n1;
width:  n3 - n1;
height: n4 - n2;

Upvotes: 1

Nikhil.nj
Nikhil.nj

Reputation: 240

Try this,

<script type="text/javascript">
$(document).ready(function () {
$('.mapping').hover(function() {
       alert('Mouse Hovered');
       //some statements   
 });

});
</script>

Good Luck.. ['}

Upvotes: 0

Related Questions