• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

<div> bewegen

M

MichiLetsPlay

Mitglied
Hi leute,
ich habe folgenden Code:
HTML: 
<html>
<head>
<title>Social links</title>
<style type="text/css">
  #social {
  background-image: url(http://huntgames.de/i/social.png);
  background-repeat: no-repeat;
  width:500px;
  height:400px;
  position:fixed;
  right:-350px;
</style>
<script type="text/javascript">
<!--
var imgObj = null;
var animate ;
function init(){
   imgObj = document.getElementById('social');
   imgObj.style.position= 'fixed';
    imgObj.style.background-image = 'http://huntgames.de/i/social.png';
}
function moveLeft(){
   if (imgObj.style.right <= -40 + 'px') {
      clearTimeout(animate);
      imgObj.style.right = parseInt(imgObj.style.right) + 10 + 'px';
      animate = setTimeout(moveLeft,10);
   }
}
function moveRight(){
   if (imgObj.style.right != -350 + 'px') {
      clearTimeout(animate);
      imgObj.style.right = parseInt(imgObj.style.right) - 10 + 'px';
      animate = setTimeout(moveRight,10);
   }
}
function stop(){
   clearTimeout(animate);
   imgObj.style.left = '0px';
 }
window.onload =init;
//-->
</script>
</head>
<body>
<a onmouseover="moveLeft();" onmouseout="moveRight();">
<div id="social" width="500px" height="400px">
<noscript>Javascript einschalten, Bitte!</noscript>
</div>
</a>
</body>
</html>
Mit diesem will ich erreichen, dass ein Menüband rechts am Bildschirm ist und wenn man mit der Maus drüber geht, bewegt es sich nach links, danmit man mehr "infos" sehen kann.

Wenn ich ein <img> statt dem <div> nehme, dann funktioniert alles super.
Mit dem <div> allerdings nicht?!

Woran kann es liegen und wie kann ich es fixen?

Ich freue mich auf eure Antworten :)

Grüße, Michi
 
Zuletzt bearbeitet:
Ein div kannst du genau so wie ein img bewegen. Es funktioniert bei dir nur nicht aus dem Grund, den Tronjer genannt hat. Du musst das div aus dem a-Tag herausnehmen, dann wird auch das Bewegen funktionieren.
 
Ich hatte dazu gestern eine Erklärung geschrieben, die allerdings der Forenumstellung zum Opfer gefallen ist.

Wenn du innerhalb des Ankers ein weiteres Element mit Content stellst und den Eventhandler auf das <a> legst, landest du beim mouseover() in der Regel auf dem inneren Element. Das lässt sich in der Konsole überprüfen.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben