Joni: <!DOCTYPE html> beeinflusst Javascript Styling

Beitrag lesen

SELF-Forum

<!DOCTYPE html> beeinflusst Javascript Styling

Joni
– Informationen zu den Bewertungsregeln

Guten Morgen zusammen

Ich bastle gerade einen sogenannten Mausverfolger für eine Webseite. Mein Ziel ist ein Bild im Header der Webseite, das sich gleichzeitig wie die Maus nach links bzw. nach rechts bewegt. (in die entgegengesetzte richtung)
Das funktioniert auch soweit (siehe Code)

Mein Problem tritt ein, wenn man oben am html file die <!DOCTYPE html> deklaration einfügt.
Mittlerweile wird dann kein JavaScript-Styling mehr zugelassen.
Gibt es eine Möglichkeit, das CSS mit Javascript zu beeinflussen, auch wenn man die Doctype deklaration einfügt?

(mache die webseite mit einem cms, wo man nur den body-bereich, ein javascript und ein css file bearbeiten kann).

Gruss Joni

ps: bin gut in html & css aber von javascript verstehe ich erst sehr wenig.

  
<html>  
<head>  
<title>TEST</title>  
<style type="text/css">  
	body {  
            overflow-x: hidden;  
			margin: 0px; padding: 0px: border: 0px;  
        }  
		#box {  
            background-color: #228;  
			height: 300px;  
			width: 200%;  
			position: relative;  
			z-index: 1;  
			  
			background: rgb(255,0,0); /* Old browsers */  
			background: -moz-linear-gradient(left, rgb(255,0,0) 0%, rgb(196,255,2) 48%, rgb(6,255,2) 99%, rgb(191,110,78) 100%); /* FF3.6+ */  
			background: -webkit-gradient(linear, left top, right top, color-stop(0%,rgb(255,0,0)), color-stop(48%,rgb(196,255,2)), color-stop(99%,rgb(6,255,2)), color-stop(100%,rgb(191,110,78))); /* Chrome,Safari4+ */  
			background: -webkit-linear-gradient(left, rgb(255,0,0) 0%,rgb(196,255,2) 48%,rgb(6,255,2) 99%,rgb(191,110,78) 100%); /* Chrome10+,Safari5.1+ */  
			background: -o-linear-gradient(left, rgb(255,0,0) 0%,rgb(196,255,2) 48%,rgb(6,255,2) 99%,rgb(191,110,78) 100%); /* Opera 11.10+ */  
			background: -ms-linear-gradient(left, rgb(255,0,0) 0%,rgb(196,255,2) 48%,rgb(6,255,2) 99%,rgb(191,110,78) 100%); /* IE10+ */  
			background: linear-gradient(to right, rgb(255,0,0) 0%,rgb(196,255,2) 48%,rgb(6,255,2) 99%,rgb(191,110,78) 100%); /* W3C */  
			filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff0000', endColorstr='#bf6e4e',GradientType=1 ); /* IE6-9 */  
        }  
  
    </style>  
  
<script type="text/javascript">  
if(document.layers) {  
   window.captureEvents(Event.MOUSEMOVE);  
   window.onmousemove = koordinaten;  
   }  
   else {  
      document.onmousemove = koordinaten;  
   }  
function koordinaten(e) {  
   xpos = (document.layers || (document.getElementById && !document.all)) ? e.pageX : document.body.scrollLeft +  
  
event.clientX;  
   ypos = (document.layers || (document.getElementById && !document.all)) ? e.pageY : document.body.scrollTop +  
  
event.clientY;  
   werte();  
}  
function werte(){  
   txt = "Xpos ="+xpos+"; Ypos ="+ypos+"  ";  
   document.forms[0].elements[0].value = txt;  
   window.status = txt;  
}  
  
  
setInterval(function (){box.style.marginLeft = (-xpos);},1);  
</script>  
  
</head>  
<body>  
	<div id="box"></div>  
</body>  
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln