OpenLayers 3, static tiles and XYZ coordinates
<p>The goal is to be able to zoom onto a high-res picture (11520x11520) that I have split into 256x256 squares. I took the large image and resized it to 80%, 60%, 40%, 20% and 8.89%. Then, for each of the images from 100% to 8.89%, I split them. It's to make an interactive video game map like this: <a href="http://www.ark-survival.net/en/dynamic-livemap/" rel="nofollow">http://www.ark-survival.net/en/dynamic-livemap/</a></p>

<p>I have tried this:</p>

<pre><code>var map = new ol.Map({
    target: 'ark_map',
    layers: [
        new ol.layer.Tile({
        source: new ol.source.XYZ({
                url: 'images/map/{z}/map_{x}_{y}.png',
                tileSize: 256,
                maxZoom: 5
            })
        })
    ],
    view: new ol.View({
        center: [50, 50],
        zoom: 5,
        minZoom: 0
    })
});
</code></pre>

<p>The result: I only see the top left corner on any zoom used. I've seen many examples and many questions, but combining static tiles and XYZ (on pixels) has never come up.</p>

<p>Here is the <a href="https://jsfiddle.net/magikweb/6moqu7q8/3/" rel="nofollow">JS Fiddle</a>.</p>

<p>How do you combine static tiles and XYZ coordinates based on a pixel system?</p>