Ich habe eine Imagemap wie folgt definiert:

<div>
    <img class="portalImageNonMobile" src="/Images/PortalPageNonMobile.jpg" alt="" usemap="#map">
</div>

<map name="map">
    <area id="travellers" class="mapTag" shape="rect" coords="115, 90, 345, 175" alt="Travellers" href="http://www.xxxxxxxxxxx.com/Home/Index/?Redirect=false" />
    <area id="serviceProviders" class="mapTag" shape="rect" coords="700, 90, 915, 175" alt="Service Providers" href="http://www.xxxxxxxx.com/Home/Index/?Redirect=false" />
</map>

Dies scheint gut zu funktionieren, wenn Sie es in verschiedenen Browsern auf Windows-Geräten testen. Als wir jedoch versuchten, dies auf einem iPad zu testen, funktionierten die Karten nicht (beim Tippen auf die zugeordneten Bereiche würde nichts passieren). Ich weiß, dass Image Maps in der HTML5-Spezifikation enthalten sind, daher würde ich denken, dass alle Browser auf allen Geräten sie unterstützen würden. Aber es scheint nicht Chrome auf einem iPad. Irgendwelche Ideen, wie man das zum Laufen bringt?

1
Randy Minder 22 Dez. 2015 im 19:49

3 Antworten

Beste Antwort

Ich habe festgestellt, dass Image Maps auf iOS-Geräten nicht funktionieren (und möglicherweise auch nicht auf Mac). Durch einige Nachforschungen fand ich heraus, dass SVG auf allen Geräten funktioniert. Hier ist eine Lösung mit SVG:

<figure>
    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1200 808" preserveAspectRatio="xMinYMin meet">
        <image width="1200" height="808" xlink:href="/Images/PortalPageNonMobile.jpg"></image>

        <a id="travellers" xlink:href="http://www.xxxxxxxxx.com/Home/Index/?Redirect=false">
            <rect x="115" y="90" fill="#fff" opacity="0" width="310" height="95" />
        </a>

        <a id="serviceProviders" xlink:href="http://www.xxxxxxxx.com/Home/Index/?Redirect=false">
            <rect x="700" y="90" fill="#fff" opacity="0" width="330" height="95" />
        </a>
    </svg>
</figure>
0
Randy Minder 22 Dez. 2015 im 18:05

Verwenden Sie SVG-Karten, sie werden in allen modernen Browsern unterstützt, reagieren reaktionsschnell und sind so einfach zu verwenden wie Imagemaps.

0
RBoschini 22 Dez. 2015 im 16:58

Gott sei Dank verlieren wir die Funktionalität, die dem Web seit ... was dient? 1992? ... zugunsten von ... neuen Sachen, die genau das Gleiche tun. Oy.

0
ChrisH 8 Jän. 2018 im 00:15