How to make cute tooltips to the elements in the navigation map?

<script type="text/javascript" src="http://ajax.googl eapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="http://jquery-fckeditor-plugin.googlecode.com/svn/trunk/jquery.MetaData.js"></script> <script type="text/javascript" src="https://raw.gi thub.com/kemayo/maphilight/dd84221dec229fa5525760a1c791eb9e08f20dd3/jquery.maphilight.min.js"></script> <script>$(function() {$("img[usemap]").maphilight();});</script> <!-- ΠšΠΎΠ½Π΅Ρ† ΠΊΠΎΠ΄Π° для вставки Π² Π’Π°Ρˆ Ρ‚Π΅Π³ head --> <img alt="z_30e1dd84.jpg" src="http://cs5826.vk.com/u51851451/147177393/z_30e1dd84.jpg" usemap="#myMap" width="600" height="900" /> <map name="myMap" id="myMap"> <area shape="poly" coords="1,345,140,348,148,181,2,175" alt="ΠšΠ°Ρ€Ρ‚ΠΈΠ½Ρ‹. ΠœΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ ΠΊΠΎΠΏΠΈΠΈ Ρ€Π°Π±ΠΎΡ‚ извСстных Ρ…ΡƒΠ΄ΠΎΠΆΠ½ΠΈΠΊΠΎΠ². Π­Ρ‚ΠΎ ΠΎΠΏΡ‚ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π²Ρ‹Π±ΠΎΡ€." class="{fill:false,fillColor:'00ff00',fillOpacity:0.4,stroke:true,strokeColor:'000000',strokeOpacity:0.3,strokeWidth:7}" target="_self" title="ΠšΠ°Ρ€Ρ‚ΠΈΠ½Ρ‹. ΠœΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ ΠΊΠΎΠΏΠΈΠΈ Ρ€Π°Π±ΠΎΡ‚ извСстных Ρ…ΡƒΠ΄ΠΎΠΆΠ½ΠΈΠΊΠΎΠ². Π­Ρ‚ΠΎ ΠΎΠΏΡ‚ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π²Ρ‹Π±ΠΎΡ€."/> <area shape="poly" coords="172,268,174,176,249,179,246,270" alt="ΠšΠ°Ρ€Ρ‚ΠΈΠ½Ρ‹. ΠœΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ ΠΊΠΎΠΏΠΈΠΈ Ρ€Π°Π±ΠΎΡ‚ извСстных Ρ…ΡƒΠ΄ΠΎΠΆΠ½ΠΈΠΊΠΎΠ². Π­Ρ‚ΠΎ ΠΎΠΏΡ‚ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π²Ρ‹Π±ΠΎΡ€." class="{fill:false,fillColor:'00ff00',fillOpacity:0.4,stroke:true,strokeColor:'000000',strokeOpacity:0.3,strokeWidth:7}" target="_self" title="ΠšΠ°Ρ€Ρ‚ΠΈΠ½Ρ‹. ΠœΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ ΠΊΠΎΠΏΠΈΠΈ Ρ€Π°Π±ΠΎΡ‚ извСстных Ρ…ΡƒΠ΄ΠΎΠΆΠ½ΠΈΠΊΠΎΠ². Π­Ρ‚ΠΎ ΠΎΠΏΡ‚ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π²Ρ‹Π±ΠΎΡ€."/> <area shape="poly" coords="294,311,298,190,394,192,393,311" alt="ΠšΠ°Ρ€Ρ‚ΠΈΠ½Ρ‹. ΠœΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ ΠΊΠΎΠΏΠΈΠΈ Ρ€Π°Π±ΠΎΡ‚ извСстных Ρ…ΡƒΠ΄ΠΎΠΆΠ½ΠΈΠΊΠΎΠ². Π­Ρ‚ΠΎ ΠΎΠΏΡ‚ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π²Ρ‹Π±ΠΎΡ€." class="{fill:false,fillColor:'00ff00',fillOpacity:0.4,stroke:true,strokeColor:'000000',strokeOpacity:0.3,strokeWidth:7}" target="_self" title="ΠšΠ°Ρ€Ρ‚ΠΈΠ½Ρ‹. ΠœΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ ΠΊΠΎΠΏΠΈΠΈ Ρ€Π°Π±ΠΎΡ‚ извСстных Ρ…ΡƒΠ΄ΠΎΠΆΠ½ΠΈΠΊΠΎΠ². Π­Ρ‚ΠΎ ΠΎΠΏΡ‚ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π²Ρ‹Π±ΠΎΡ€."/> <area shape="poly" coords="314,403,315,346,373,347,371,404" alt="ΠšΠ°Ρ€Ρ‚ΠΈΠ½Ρ‹. ΠœΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ ΠΊΠΎΠΏΠΈΠΈ Ρ€Π°Π±ΠΎΡ‚ извСстных Ρ…ΡƒΠ΄ΠΎΠΆΠ½ΠΈΠΊΠΎΠ². Π­Ρ‚ΠΎ ΠΎΠΏΡ‚ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π²Ρ‹Π±ΠΎΡ€." class="{fill:false,fillColor:'00ff00',fillOpacity:0.4,stroke:true,strokeColor:'000000',strokeOpacity:0.3,strokeWidth:7}" target="_self" title="ΠšΠ°Ρ€Ρ‚ΠΈΠ½Ρ‹. ΠœΡ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅ΠΌ ΠΊΠΎΠΏΠΈΠΈ Ρ€Π°Π±ΠΎΡ‚ извСстных Ρ…ΡƒΠ΄ΠΎΠΆΠ½ΠΈΠΊΠΎΠ². Π­Ρ‚ΠΎ ΠΎΠΏΡ‚ΠΈΠΌΠ°Π»ΡŒΠ½Ρ‹ΠΉ Π²Ρ‹Π±ΠΎΡ€."/> <area shape="poly" coords="249,584,260,564,273,538,276,530,299,481,308,484,324,492,380,495,355,586,338,592,293,587,276,581" alt="Π’Π΅ΠΊΡΡ‚ΠΈΠ»ΡŒ. Π’Π΅ΠΊΡΡ‚ΠΈΠ»ΡŒ ΠΈΠ³Ρ€Π°Π΅Ρ‚ Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ Ρ€ΠΎΠ»ΡŒ Π² ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠΈ ΠΈΠ½Ρ‚Π΅Ρ€ΡŒΠ΅Ρ€Π°" class="{fill:false,fillColor:'fff100',fillOpacity:0.4,stroke:true,strokeColor:'000000',strokeOpacity:0.3,strokeWidth:7}" target="_self" title="Π’Π΅ΠΊΡΡ‚ΠΈΠ»ΡŒ. Π’Π΅ΠΊΡΡ‚ΠΈΠ»ΡŒ ΠΈΠ³Ρ€Π°Π΅Ρ‚ Π±ΠΎΠ»ΡŒΡˆΡƒΡŽ Ρ€ΠΎΠ»ΡŒ Π² ΠΎΡ„ΠΎΡ€ΠΌΠ»Π΅Π½ΠΈΠΈ ΠΈΠ½Ρ‚Π΅Ρ€ΡŒΠ΅Ρ€Π°"/> </map>

For example, you can hover over pictures. Demo on jsfiddle .

  • @Melekhin, To format a code, select it with the mouse and click on the button 101010 of the editor. - Artem
  • Try jqueryui.com/tooltip - Sergey Snegirev

1 answer 1

You mean some kind of container, for example "div", which should pop up when you hover over a DOM model element. And disappear when you lose focus. So?

  • one
    Create a file with the .html extension and paste the above code there. Then open the file in the browser window. A photo will appear on the screen, hover the cursor over the picture (any) - a yellow rectangle with a text prompt will pop up. And the question is how to replace this yellow rectangle with something more attractive, while maintaining the functionality. Sorry, I do not quite understand the terminology yet. - Melekhin