Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I don't think you can do this with a true image map:</p> <pre><code>&lt;img usemap="#map" /&gt; &lt;map name="map"&gt; &lt;area coords="foo,bar"&gt; &lt;area coords="foo,bar"&gt; &lt;area coords="foo,bar"&gt; &lt;/map&gt; </code></pre> <p>But, there is a way to do what you are wanting with only HTML and CSS using a variation of the <a href="http://www.alistapart.com/articles/sprites" rel="nofollow noreferrer">CSS sprites technique</a>. A tutorial of how to do it is here: <a href="http://www.noobcube.com/tutorials/html-css/css-image-maps-a-beginners-guide-/" rel="nofollow noreferrer">http://www.noobcube.com/tutorials/html-css/css-image-maps-a-beginners-guide-/</a></p> <p><strong>A short overview of this technique:</strong> <a href="http://demo.raleighbuckner.com/so/1369820/" rel="nofollow noreferrer">DEMO Code</a></p> <p>First, create your image as you would normally. Then, create your various over states by doubling the canvas size of your image and putting the hover look in the new bottom half of the image. You will end up with something like this:</p> <p><a href="http://demo.raleighbuckner.com/so/1369820/test.jpg" rel="nofollow noreferrer">I hope your image looks better than this. http://demo.raleighbuckner.com/so/1369820/test.jpg</a></p> <p>Next comes the HTML and CSS. We will use an unordered list:</p> <pre><code>&lt;style&gt; #fakeMap { list-style: none; margin: 0; padding: 0; /* removes the default UL styling */ position: relative; /* allows the LIs to be positioned */ width: 200px; /* width of the image */ height: 100px; /* height of the image */ background: url(test.jpg) no-repeat 0 0; /* shows the image */ } #fakeMap li { position:absolute; /* these will be the "area" elements */ } #fakeMap a { display:block; /* along with the width and height, makes the link */ width:100%; /* clickable for the full size of the LI */ height:100%; text-indent:-5000px; /* pushes the text of the link offscreen */ } /* Set up each LI to be the right size and positon. */ #maplink1 { width:15px; height:15px; top:10px; left:10px; } #maplink2 { width:20px; height:20px; top:30px; left:30px; } #maplink3 { width:80px; height:30px; top:20px; left:70px; } /* Set the image for all of the links. */ #fakeMap a:hover { background: url(test.jpg) no-repeat; } /* Set the position of the bg for each link individually. */ #fakeMap #maplink1 a:hover { background-position:-10px -110px; } #fakeMap #maplink2 a:hover { background-position:-30px -130px; } #fakeMap #maplink3 a:hover { background-position:-70px -120px; } &lt;/style&gt; &lt;ul id="fakeMap"&gt; &lt;li id="maplink1"&gt;&lt;a href="link1.htm"&gt;Link 1 Text&lt;/a&gt;&lt;/li&gt; &lt;li id="maplink2"&gt;&lt;a href="link2.htm"&gt;Link 2 Text&lt;/a&gt;&lt;/li&gt; &lt;li id="maplink3"&gt;&lt;a href="link3.htm"&gt;Link 3 Text&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. POImage Map w/Image-Based Rollovers Bounded by AREA Coordinates, jQuery if Possible
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USRaleigh Buckner
    1. USRaleigh Buckner
    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.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. PO
      1. This table or related slice is empty.
      1. VTUpMod
    1. COThanks, but the shapes of the links are so irregular and intertwined that I have to use a true image map, not the rectangular divisions that come with LIs + CSS Spites.
      singulars
      1. PO
      1. USmehas
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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