nicht angemeldet
dynamische grafik
Wie schreibe ich dieses script so um, dass die Grafik von links nach rechts hineinscrollt und nicht von oben nach unten?
Ich bin immer wieder kläglich gescheitert.
<HTML>
<body onload="init()" bgcolor="black">
<style>
.menu
{
position: absolute;
top:-150;
width: 100;
padding:5;
border-width: 1;
border-style: solid;
background: purple;
color: white;
}
</style>
<script>
var mpos=new Array();
var mdir=new Array();
var maxmenus=1;
var delay=20;
function do_menu(e, menu)
{
mdir[menu]=-mdir[menu];
if(mpos[menu]<=-165)
{
if(document.layers)
{
document.layers["menu"+menu].top=e.pageY-165;
document.layers["menu"+menu].left=e.pagex;
} else
{
document.all["menu"+menu].style.top=event.y-165;
document.all["menu"+menu].style.left=event.x;
}
move_menu(menu);
}
if(mpos[menu]>=0)
move_menu(menu);
}
function move_menu(menu)
{
mpos[menu]+=mdir[menu];
if(document.layers)
{
document.layers["menu"+menu].top+=mdir[menu];
document.layers["menu"+menu].clip.top=-mpos[menu];
}
else
{
document.all["menu"+menu].style.top=parseInt(document.all["menu"+menu].style.top)+mdir[menu];
document.all["menu"+menu].style.clip="rect("+(-mpos[menu])+",auto,auto,auto)";
}
if(mpos[menu]>-165 && mpos[menu]<0)
setTimeout("move_menu("+menu+")", delay);
}
function init()
{
for(i=0; i<maxmenus; i++)
{
mpos[i]=-165;
mdir[i]=-4;
}
}
</script>
<div id="menu0" class="menu">
<center><img src="bild.gif"></img><br><font size="2" face="arial">
Hallo</center></font>
</div>
<div id="tester" onmouseover="do_menu(event, 0)" onmouseout="do_menu(event, 0)">
<font color="white" size="1" face="arial">hallo</font></div>
</body>
</HTML>
-
Hallo,
am besten gar nicht, weil das Script nur bei einem teil der browser funktioniert. netscape6 , netscape 7, mozilla und einige andere schauen in die Röhre. (die braunsche sozusagen, außer die mit flachbildschirmen....)
Generell ist es ansonsten nicht falsch, fertige Scripte auf seine Bedürfnisse zurecht zu schneidern, weil man dabei ganz gut lernen kann. Aber nur, wenn man das Script vorher analysiert. Zum groben Aufbau: das Script positioniert einen sogenannten Div-Bereich neu. Div-bereiche sind "in Div-tags eingeschlossene Inhalte" die man mittels CSS-Angaben (top und left) pixelgenau positionieren kann. In einer Javascript-Schleife kann man nun diese top und left-Werte ändern, so das die Bereiche wandern. Der top-Wert ist der Abstand vom oberen rand, der left-Wert von der linken Seite. Adiert man also laufend eine zahl auf den left-Wert, so wandert der Divbereich inklusive Inhalt von links nach rechts. Adiert man eine zahl auf den Top-Wert, dann wandert es von oben nach unten und so weiter.
nun ist das Problem, daß die einzelnen browser früher unterschiedliche Ansätze hatte, wie man diese css-Werte (und andere Werte) per JS ändern kann. Bei NS4 z.Bsp. hiessen diese div-bereich layer, deswegen muß hier der "Layerwert" geändert werden. Beim IE5.xy etc hatte Microsoft den "all"-begriff eingeführt, mit dem man auf die CSS-Werte (und andere) zugreifen kann. Um endlich einmal alle Browser zu erreichen, gibt es die "eigendlich" einheitliche Zugriffsmöglichkeit "getElementByID" (die bei Deinem Script gar nicht zum zuge kommt....), mit der alle neueren browser glücklich sein sollten. Dadurch braucht man nur noch zwischen NS4 (weiterhin über layer) und den rest der Browserwelt ("getElementByID" anstelle "all") unterscheiden.
All diese "Stichworte" kann man nun in selfhtml nachlesen und somit das Script auseinandernehmen und anpassen.
Chräcker