nicht angemeldet
Position des fahrenden Autos festlegen
Hallo
Ich habe hier ein JavaScript mit dem ich ein Auto von links ins Bild fahren lassen kann, dann hält es und fährt dann wieder mit rasanter Beschleunigung rechts aus dem Bild, und dies ständig wiederholend.
Es fährt direkt über der Linie <HR> die als Straße dienen soll, und drüber steht ein Text.
So weit so gut.
Da aber nicht jeder die große Bildschirmauflösung hat die ich hier habe schiebt sich der Text logischer zusammen und die Straße (Linie) rutscht dadurch weiter nach unten. Nur das Auto fährt aber nach wie vor in der angegebenen Höhe des divs (top:228px) :
<div id="gls" style="width:200px; height:108px; position:absolute; left:10px; top:228px; z-index:1;">
Wie kann ich es anstellen das das Auto immer direkt über der Straße (Linie) fährt, egal wie der Text zusammen geschoben wird.
Hier der komplette Inhalt der Testseite :
<html><head></head><body>
Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext.
Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext.
Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext.
Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext.
Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext.
Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext.
Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext.
Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext.
Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext.
Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext.
Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext.
Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext.
Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext.
Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext.
Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext.
Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext.
Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext.
Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext.
Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext.
Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext.
Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext.
Dies ist ein Beispieltext. Dies ist ein Beispieltext. Dies ist ein Beispieltext.
Dies ist ein Beispieltext. Dies ist ein Beispieltext.
<div id="gls" style="width:200px; height:108px; position:absolute; left:10px; top:228px; z-index:1;">
<SCRIPT language=JavaScript>
<!--
function css(id,left,top,width,height,color,vis,z,other) {
if (id=="START") return '<STYLE TYPE="text/css">\n'
else if (id=="END") return '</STYLE>'
var str = (left!=null && top!=null)? '#'+id+' {position:absolute; left:'+left+'px; top:'+top+'px;' : '#'+id+' {position:relative;'
if (arguments.length>=4 && width!=null) str += ' width:'+width+'px;'
if (arguments.length>=5 && height!=null) {
str += ' height:'+height+'px;'
if (arguments.length<9 || other.indexOf('clip')==-1) str += ' clip:rect(0px '+width+'px '+height+'px 0px);'
}
if (arguments.length>=6 && color!=null) str += (document.layers)? ' layer-background-color:'+color+';' : ' background-color:'+color+';'
if (arguments.length>=7 && vis!=null) str += ' visibility:'+vis+';'
if (arguments.length>=8 && z!=null) str += ' z-index:'+z+';'
if (arguments.length==9 && other!=null) str += ' '+other
str += '}\n'
return str
}
function writeCSS(str,showAlert) {
str = css('START')+str+css('END')
document.write(str)
if (showAlert) alert(str)
}
function makeLiquid() {
if ((ns4 && (winW!=window.innerWidth || winH!=window.innerHeight)) || ie4)
history.go(0)
}
var speed = 15
function carinit() {
if (ns4) {
car = document.carDiv;
car.top = getline();
car.visibility = "show";
}
if (ie4) {
car = carDiv.style;
car.top = getline();
car.visibility = "visible";
}
car.xpos = parseInt(car.left)
car.ypos = parseInt(car.top)
}
function slide() {
if (car.xpos < winW) {
car.xpos += speed++
car.left = car.xpos
setTimeout("slide()",30)
}
else {
speed = 15;
//setTimeout ("restart();",3500)
restart();
}
}
function restart() {
car.xpos = -180
car.left = car.xpos
car.ypos = parseInt(car.top)
car.top = car.ypos
speed2 = 10;
//slide2()
setTimeout ("slide2()",3500);
}
function slide2() {
if (car.xpos < (winW-200)/14) {
car.xpos += speed2
car.left = car.xpos
setTimeout("slide2()",30)
speed2 = speed2/1.05
if (speed2 < 0.3) {
speed2 = 0.3
}
}
else
setTimeout ("slide()",1500)
}
function getline() {
if (document.layers){
return 6+parseInt(document.layers.ns4carpos.pageY);
}
if (document.all){
return 7+parseInt(document.all.ie4carpos.offsetTop);
}
}
function zufall() {
var d = new Date();
if (d.getSeconds() % 1 == 0) return true;
return false;
}
//-->
</SCRIPT>
<SCRIPT language=JavaScript>
<!--
ns4 = (document.layers)? true:false
ie4 = (document.all)? true:false
var winW = (ns4)? (window.innerWidth) : (document.body.clientWidth-250)
var winH = (ns4)? (window.innerHeight) : (document.body.clientHeight)
if(zufall())
{
if (ns4) document.write('<layer id="ns4carpos"></layer>');
document.write('<div id="ie4carpos" ><table border=0 width=10 cellspacing=0 cellpadding=0><tr><td><img src="/pixelpaint/pix.gif" width=1 height=1 border=0></td></tr></table></div>');
//writeCSS(css('carDiv',(winW-110)/10,48,110,88,null,'hidden'));
writeCSS(css('carDiv',(winW-200)/10,48,180,88,null,'hidden'));
if (document.all || document.layers) {
document.write('<div id="carDiv"><img src="bilder/gls-auto.gif" width="156" height="75" alt="" border="0"></div>')
};
carinit();
slide();
}
//-->
</SCRIPT>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<HR>
</body></html>
Habe schon ettliches ausprobiert - komme aber nicht weiter und hoffe nun das Ihr mir helfen könnt.
Dank im voraus
Michael
-
Ich habe hier ein JavaScript mit dem ich ein Auto von links ins Bild fahren lassen kann, dann hält es und fährt dann wieder mit rasanter Beschleunigung rechts aus dem Bild, und dies ständig wiederholend.
Michael,
Du hast bedacht, dass sehr viele User solche Animationen als nervig empfinden und deshalb die Seite verlassen, ohne sie zu lesen?Wie kann ich es anstellen das das Auto immer direkt über der Straße (Linie) fährt, egal wie der Text zusammen geschoben wird.
Lager doch die Animation aus. Das kann dann auch ein animiertes GIF, ein Flash oder halt eine HTML-Datei mit JavaScript sein, die du mit object oder iframe einbaust.
Hier der komplette Inhalt der Testseite :
Ein Link auf das HTML-Dokument wäre besser gewesen.
Gunnar
--
"Nobody wins unless everybody wins." (Bruce Springsteen)-
Lager doch die Animation aus. Das kann dann auch ein animiertes GIF, ein Flash oder halt eine HTML-Datei mit JavaScript sein, die du mit object oder iframe einbaust.
Das mit dem iframe ist natürlich auch ne möglichkeit an die ich gar nicht gedacht habe.
Das werd ich so machen.Beim iframe ist nur blöd das da son 3d-Rahmen ist - gibts da ne möglichkeit den abzuschalten ?
Gruß
Michael-
Beim iframe ist nur blöd das da son 3d-Rahmen ist - gibts da ne möglichkeit den abzuschalten ?
Michael,
Ich würd mich eher fragen, ob's 'ne Möglichkeit gibt, das Auto abzuschalten.
Gunnar--
"Nobody wins unless everybody wins." (Bruce Springsteen)-
Beim iframe ist nur blöd das da son 3d-Rahmen ist - gibts da ne möglichkeit den abzuschalten ?
Michael,
Ich würd mich eher fragen, ob's 'ne Möglichkeit gibt, das Auto abzuschalten.
GunnarWas diese unsachliche Antwort auf eine normale Frage bedeuten soll kann ich leider nicht verstehen !
Gruß
Michael-
Was diese unsachliche Antwort auf eine normale Frage bedeuten soll kann ich leider nicht verstehen !
Michael,
Wie ich dir schon sagte, sind Animationen bei Usern nicht willkommen."Users first tried to scroll the animation off the page, and when they couldn’t, actually covered it up with their hands" (J.M. Spool, T. Scanlon, W. Schroeder, C. Snyder, T. DeAngelo, Web Site Usability: A Designer’s Guide, Morgan Kaufman Publishers, San Francisco, CA, 1999, p. 89)
Das ist natürlich zielgruppenabhängig. Wenn du meinst, die Zielgruppe _dieser_ Seite steht auf über den Bildschirm fahrende Autos, dann mach es. (_Mein_ Rat: lass es.)
Und da ich selber keine iframes einsetze, hat mich auch noch nie interessiert, wie man den Rahmen wegbekommt. Mit CSS, würd ich vermuten. Ich kann mir nicht vorstellen, dass das noch niemand hier im Forum gefragt haben soll. Schon mal im Archiv gesucht?
Gunnar
--
"Nobody wins unless everybody wins." (Bruce Springsteen)
-
-
-
-
-
Ich denke du könntest der <hr> auch eine absolute Position zuweisen, also ein paar pixel mehr als dem Auto. Dann verschiebts sich die linie auch.
MfG Chris