Note that there are some explanatory texts on larger screens.

plurals
  1. POChange title attribute of different polygons in an image map
    primarykey
    data
    text
    <p>I have this image that I have mapped. It has many regions in the shape of polygons and on hover the region gets colored (and by colored I mean another picture). I have also made a custom tooltip to go with it so that on hover when it is colored a text box appears with info which stretches for more than one line.</p> <p>The problem is that I cannot fathom how to mix these two together. Here is the code so far:</p> <pre><code>&lt;div style="text-align:center; width:450px; margin-left:auto; "&gt; &lt;img id="Image- Maps_4201211181157353" src="...Original.png" usemap="#Image-Maps_4201211181157353" border="0" width="450" height="321" alt="" title="" /&gt; &lt;map id="_Image-Maps_4201211181157353" name="Image-Maps_4201211181157353"&gt; &lt;!--Area1--&gt; &lt;area shape="poly"coords="370,191,363,195,355,194,343,193,339,185,330,173,327,164,325,154,338,149,351,149,364,149,365,165,364,181," href=" " alt="" id="1" onMouseOver="if(document.images) document.getElementById('Image-Maps_4201211181157353').src= '...Area1.png';" onMouseOut="if(document.images) document.getElementById('Image-Maps_4201211181157353').src= '...Original.png';" /&gt; &lt;/map&gt; </code></pre> <p>Where Original.png is the original picture and Area1.png is the region that changes color upon mouseover.</p> <p>And this is the tooltip class:</p> <pre><code>&lt;a class="tooltip" href="#"&gt; Tooltip &lt;span class="custom warning"&gt; &lt;em&gt;Title&lt;/em&gt;Example text &lt;/span&gt; &lt;/a&gt; </code></pre> <p>So what I'd like is to insert the custom-made tooltip inside the map div as a title attribute for each polygonal area of the map.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload