Hallo ihr Profis :), ich habe ein Problem mit einer kleinen Webseite (und JS darin).
Der angegebene Code sollte alles Relevante andecken, denke ich (außer, dass JQuery verwendet wird...).
Aaaalso:
Jetzt habe ich ein 'div.pin' Element, welches 2 Links enthält (eines davon mit Bild).
Was ich im 'mousemove' - Event Handler machen will, ist, dass sich dieser 'pin' zu der Maus hin dreht. Und soweit funktioniert das auch.
Nun aber zu meinem Problem:
Meine Anchor - Elemente funktionieren nun leider nicht mehr, d.h. bei einem Click auf den Link oder das Bild passiert gar nichts.
Hat jemand eine Ahnung, warum, bzw, wie man das hinbekommen kann?
HTML
<head>
<style>
div.pin{
display: inline-block;
margin: 10px;
padding: 10px;
}
</style>
<html>
<script>
$(document).ready(function() {
$('#container').mousemove(function(e){
///Viewport Size
var height = $(window).height();
var width = $(window).width();
///Mouse Position
var coordX = e.pageX - $(document).scrollLeft();
var coordY = e.pageY - $(document).scrollTop();
$('div.pin:visible').each(function(){
///Element Position
var elemPosX = $(this).offset().left + $(this).width()/2.0 - $(document).scrollLeft();
var elemPosY = $(this).offset().top + $(this).height()/2.0 - $(document).scrollTop();
///Normalized Mouse Position from the Element
var relX = (coordX - elemPosX) / width;
var relY = (coordY - elemPosY) / height;
$(this).css({ rotate3d: -relY + ',' + relX + ',0,15deg' });
});
});
});
</script>
</head>
<body>
<div id="container">
<div class="pin">
<a href="http://lorempixel.com"><img src="http://lorempixel.com/300/300" /></a>
<a href="http://lorempixel.com"><strong><em>http://lorempixel.com</em></strong></a>
</div>
</div>
</body>
</html>Danke im Voraus! 