Image Map anklicken auf iPhone

J

jeipack

Erfahrenes Mitglied
Hi
Ich habe eine Imagemap auf ein ganz normales Bild gesetzt, dass wenn man auf eine bestimmte Stelle klickt sich dreht.
Dass sich das Bild dreht tut nur indirekt was zur Sache. Das Grundproblem existiert auch ohne Rotation und liegt darin, dass wenn ich nun eine Area in der Imagemap anklicke diese Area kurz einen Ramen bekommt.
Dies will ich vermeiden, weiss aber nicht so recht wie ich das anstellen kann.
"event.preventDefault();" bei onClick ändert nichts daran.

Hat jemand eine Idee oder kennt die Problematik?
 
Nunja, es hat ja nicht direkt was mit meinem Code zu tun, sondern mit dem Verhalten des iPhone Browsers. Und Ramen ist vielleicht das falsche Wort, wenn man es anklickt ist es kurz selektiert und das will ich unterbinden.

Nichts desto trotz habe ich einen kurzen Beispielcode geschrieben:
(oder hier: http://jsfiddle.net/44YhF/)
HTML: 
<html>
<head>
<script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
<script src="js/jQueryRotate.js" type="text/javascript"></script>
<!-- QueryRotate is from: https://jqueryrotate.googlecode.com/files/jQueryRotate.js -->
<script type="text/javascript">
rotated=0;
aktuell=0;
isRotating=false;
jQuery(document).ready(function() {

$("#map area").click(function(event) {
console.log("click");
	event.preventDefault(); //bringt auch nichts
	if(!isRotating||true) {  //true hier raus nehmen damit die einzelnen Abschnitte nur klickbar sind wenn gerade keine Rotation läuft

		isRotating=true;
		pos=0;
		if(aktuell<$(this).attr("pos")) {
			pos=$(this).attr("pos");
		} else {
			pos=parseInt($(this).attr("pos"))+4;
		}
		rotatedif=360-(Math.abs(aktuell-pos)*90);
		rotate=rotated+rotatedif;
		
		aktuell=$(this).attr("pos");
		
		$("#cycle").rotate({animateTo:rotate, duration:(10-(Math.abs(aktuell-pos)))*300, callback: setRotatingOff});

		rotated=rotate;

	}
});


function setRotatingOff() {
	isRotating=false;
}

});
</script>
</head>
<body>
<img src="http://uploads6.wikipaintings.org/images/m-c-escher/circle-limit-iii.jpg!Blog.jpg" id="cycle" border="0" usemap="#map">
<map id="map" name="map">
<area shape="poly" coords="82,73,250,248,429,91," href="#" alt="" title=""   pos="0"/>
<area shape="poly" coords="421,85,250,246,417,419," href="#" alt="" title=""   pos="1"/>
<area shape="poly" coords="249,247,412,418,75,414," href="#" alt="" title=""   pos="2"/>
<area shape="poly" coords="248,247,74,411,82,76," href="#" alt="" title=""   pos="3"/>
</map>
</body>
</html>
Kurze Erklärung:
Das Bild ist via map in 4 Abschnitte aufgeteilt (oben, links, unten, rechts) und wenn man auf einen Abschnitt klickt dreht sicht das Bild so, dass dieser Abschnitt oben ist.
Wenn man dies nun auf dem iPhone macht, wird wenn man nun den rechten Ausschnitt anklickt dieser kurz selektiert. Klickt man nun nochmals Rechts, wird nun die untere Area markiert (da sich das bild um 3/4 gedreht hat) und so weiter. Und dies ist sehr unschön und würde ich gerne vermeiden. Am liebsten wäre es mir, wenn ich das ganze markieren einfach vermeiden könnte.

Auch wenn die Imagemap unschön ist ,der Einfachheit halber nur 4 3ecke, sollte es als Beispiel reichen. Ausserdem ist es bis auf die beiden JS Libs von Haus aus lauffähig :)
Siehst du was ich meine?

Grüsse
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück