html - How to make text box appear when hover over on the image map? -
i trying make text box appear when hover on hotspot on image map. did make text appear when hover over.
<p class="ms-rtefontsize-3"><map name="fpmap0" id="fpmap0"> <area title="click view" href="http://google.com" shape="rect" coords="26, 106, 133, 237"/> <area title="click view" href="http://yahoo.com" shape="rect" coords="322, 113, 414, 250"/> <area title="click view" href="http://ask.com" shape="rect" coords="402, 35, 488, 96"/> <area title="click view" href="http://naver.com" shape="rect" coords="598, 115, 682, 254"/></p> but instead of this, want make colored, visible text box appear when hover over. css required? not familiar css, not sure apply here.
so edited code this
<html> <head> <script src="/sites/jquerydemo/js/jquery-1.10.2.min.js" type="text/javascript"></script> <script src="/sites/jquerydemo/js/jquery.spservices-2013.01.js" type="text/javascript"></script> <script src="//www.outsharked.com/scripts/jquery.imagemapster.js"></script> </head> <body> <img id="predflow" src="http://http://www.vectortemplates.com/raster/batman-logo-big.gif" style="width:400px;height:240px;" usemap="#predflow-map"> <map name="predflow-map"> <area shape="rect" data-name="a,all" coords="36,46,121,131" href="google.com" /> <area shape="rect" data-name="b,all" coords="113,76,198,161" href="yahoo.com" /> <area shape="rect" data-name="c,all" coords="192,50,277,135" href="ask.com" /> <area shape="rect" data-name="d,all" coords="262,60,347,145" href="naver.com" /> </map> <div style="width:390px; height: 120px; font-size: 12px; "> <div id="predflow-caption" style="clear:both;border: 1px solid black; width: 400px; padding: 6px; display:none;"> <div id="predflow-caption-header" style="font-style: italic; font-weight: bold; margin-bottom: 12px;"></div> <div id="predflow-caption-text"></div> </div> </div> <script type="text/javascript"> var inarea, map = $('#predflow'), captions = { a: ["google"], b: ["yahoo"], c: ["ask"], d: ["naver"] }, single_opts = { fillcolor: '000000', fillopacity: 0, stroke: true, strokecolor: 'ff0000', strokewidth: 2 }, all_opts = { fillcolor: 'ffffff', fillopacity: 0.6, stroke: true, strokewidth: 2, strokecolor: 'ffffff' }, initial_opts = { mapkey: 'data-name', isselectable: false, onmouseover: function (data) { inarea = true; $('#predflow-caption-header').text(captions[data.key][0]); $('#predflow-caption-text').text(captions[data.key][1]); $('#predflow-caption').show(); }, onmouseout: function (data) { inarea = false; $('#predflow-caption').hide(); } }; opts = $.extend({}, all_opts, initial_opts, single_opts); map.mapster('unbind') .mapster(opts) .bind('mouseover', function () { if (!inarea) { map.mapster('set_options', all_opts) .mapster('set', true, 'all') .mapster('set_options', single_opts); } }).bind('mouseout', function () { if (!inarea) { map.mapster('set', false, 'all'); } }); </script> </body> </html> still image map working fine, nothing appears when hover over. added jquery plugin sharepoint, example here works fine on sharepoint page.
here how want in straight jquery/javascript:
html:
instructions: mouse on computer's monitor see hidden div <div id="imagemap"> <img src="http://img716.imageshack.us/img716/8287/3ylp.jpg" width="275" height="207" usemap="#map" border="0" /> <map name="map"> <area shape="poly" coords="105,26,107,126,257,140,256,27" href="#" id="cust_1" name="cust:1" /> <area shape="poly" coords="10,21,14,178,71,184,69,19" href="#" id="cust_2" name="cust:2" /> <area shape="poly" coords="113,145,94,172,241,192,251,164,250,164" href="#" id="cust_3" name="cust:3" /> </map> <p> <div id="mydiv">this div hidden unless hover on computer's monitor</div> </p> </div> <!-- yellow div id numbers overlaid on top of computer components --> <div id="num_cust1">1</div> <div id="num_cust2">2</div> <div id="num_cust3">3</div> javascript/jquery:
function hovin() { var areaid = $(this).attr('id'); //alert('['+areaid+']'); if (areaid == 'cust_1') { $('#mydiv').show(); } } function hovout() { $('#mydiv').hide(); } $('map area').hover(hovin, hovout); css:
#num_cust1 { padding: 10px; background-color:yellow; position:absolute; top:60px; left:180px; } #num_cust2 { padding: 10px; background-color:yellow; position:absolute; top:60px; left:40px; } #num_cust3 { padding: 10px; background-color:yellow; position:absolute; top:160px; left:180px; } #mydiv { display:none; width:50%; height:50px; padding: 10px; background-color:skyblue; }
Comments
Post a Comment