Wie man eine imagemap anklickbar auf mobile-safari?

Ich bin mit jQuery und qTip2 zu Geo-Informationen über eine image-map sichtbar. Sehen Sie die demo hier auf JSFiddle | Fiddle-Bildschirm führen

In Desktop-Browsern funktioniert alles einwandfrei. on-hover sehen Sie die tooltip und -klicken Sie auf Sie gehen, um die URL definiert durch href tag.

Aber auf dem mobilen safari (ipad/iphone) ist es unmöglich, um den link zu der URL. Jedes mal, wenn Sie klicken Sie auf die Karte, es ist wie Sie den Mauszeiger auf dem pc, aber noch nie eine auf.

Das Bild wird mit standard-html:

<img src="http://i.stack.imgur.com/6z2Z9.png" usemap="mapname">​

auch die map erstellt wird mit standard html, aber mit dem zusätzlichen Attribut tooltip⁽¹⁾:

<map name="mapname">
<area shape="poly"  href="?content=meteo&abm=ALL" tooltip="ABM Alland"   coords="664,243, 662,240, 664,237, 667,235, 669,232, 671,229, 671,225, 669,222, 669,214, 672,213, 673,227, 676,228, 679,231, 685,231, 692,232, 695,231, 697,228, 700,227, 703,228, 704,234, 705,241, 703,244, 700,246, 697,247, 694,249, 691,251, 688,253, 683,254, 680,253, 677,252, 672,249, 669,247, 664,243"></map>

Den jQuery ist sehr winzig mit⁽²⁾:

$(document).ready(function() {
    $('area').each(function() {
        $(this).qtip({
            content: { text: $(this).attr('tooltip') },
            position: {
                my: 'bottom left',
                target: 'mouse',
                viewport: $(window)
            },
            hide: { fixed: true },
            style: { classes: 'ui-tooltip-tipsy ui-tooltip-shadow'}
        });
    });
});​

Also, wie könnte ich dieses problem lösen?

 
 
 

---

⁽¹⁾ ich weiß, das sollte das Attribut data-tooltip. dieses wird bald ersetzt werden.

⁽²⁾ auf der Grundlage der imagemap demo

InformationsquelleAutor Neysor | 2012-04-12