Databases
StackOverflow2013
Postsdbo
PO
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>I'd propose the following. It uses a much shorter CSS, some inline styles, <a href="https://stackoverflow.com/questions/3646036/">JavaScript Preloading Images</a>, and no event handler attributes but sets them by script. Also, I gave the <code>#image</code> a <a href="http://ajaxian.com/archives/tip-using-a-background-image-on-an-image" rel="nofollow noreferrer">background image</a>, that should avoid any flickering. You could use transparent keydown-images then, too.</p> <pre><code>&lt;html&gt; &lt;head&gt; &lt;style type="text/css"&gt; #main { position:relative; } .keyzone { position:absolute; z-index:1; /* one above is enough */ width:50px; height:75px; /* all keys sharing their dimensions? */ } .keyzone:hover { background: red; opacity: 0.3; /* or use rgba() for modern browsers */ } #image { background: url('0.gif'); /* avoid flicker */ } &lt;/style&gt; &lt;script type="text/javascript"&gt; function load(path) { var img = new Image(); img.src = path; return img; } var images = { // element id := Image to show key1: load("0.gif"), key2: load("1.gif") }; /* use a loop when everything is the same - but you can also use more descriptive names with this map solution */ &lt;/script&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="main"&gt; &lt;img id="image" src="0.gif" width="506" height="319"&gt; &lt;div id="key1" class="keyzone" style="top:175px; left:55px; /*width:50px; height:75px;*/"&gt;&lt;/div&gt; &lt;div id="key2" class="keyzone" style="top:100px; left:85px; /*width:50px; height:75px;*/"&gt;&lt;/div&gt; &lt;/div&gt; &lt;script type="text/javascript"&gt; // I'm too lazy to use a onDOMready listener, so I just put the script after the elements var img = document.getElementById("image"); function keyUp() { img.src = "0.gif"; } function prevent(e) { e.preventDefault(); return false; } function makeKeyHandler(keyEl, src) { keyEl.onmousedown = function keyDown() { img.src = src; }; keyEl.onmouseup = keyEl.onmouseout = keyUp; // resetter keyEl.onclick = prevent; // no selection on doubleclick etc. } for (var id in images) // see object declaration above makeKeyHandler(document.getElementById(id), images[id].src); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p>See <a href="http://jsfiddle.net/LSgF4/" rel="nofollow noreferrer">http://jsfiddle.net/LSgF4/</a> for a working variant</p>
    singulars
    1. This table or related slice is empty.
    1. POCSS z-index/javascript working differently in the three major browsers
      singulars
      1. PTQuestion
    1. PTAnswer
    1. USCommunity
    1. USBergi
    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. This table or related slice is empty.
    1. COhere is your solution bergi http://23.23.184.26/miller/bergi/main.html it still does the blue square thing in chrome and FF(click it fast to get blue square). does not work at all in IE9. Also I think ur hotspots are backwards?
      singulars
      1. PO
      1. US3z33etm
    2. COOK I thought the selection would disappear when defaultPreventing normal clicks, seems you need to add the same ondoubleclick.
      singulars
      1. PO
      1. USBergi
 

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