[CSS/JavaScript] 2 dynamische Effekte?

der Designer · 16. Juni 2002

2 Dynamische Effeckte?

Hi,

Ich habe einen Text den Ich mit 2 Dynamischen Effeckten besetzen will!

Mit einem weiß ich ja wie es geht, aber geht es auch mit 2?

Also wenn die Seite geladen wird soll der Text von Links "Einfliegen" und wenn die Maus sich darüber bewegt soll er sich in neuer Farbe formatieren!

Grüße "der Designer"

Steffen · 16. Juni 2002

Das sind zwei verschiedene Dinge, einmal JavaScript ("Einfliegen")und das andere Mal CSS (Farbe bei MouseHover ändern). Zumindest für den CSS-Teil kann ich dir behilflich sein. Code für den Head-Bereich:

Code:

<style type="text/css">
<!--
.effect:link, effect:visited { color: #000000; }
.effect:hover { color: #FF0000; }
//-->
</style>

Link-Code:

Code:

<a href="https://www.computerbase.de" class="effect">ComputerBase.de</a><br>
<a href="https://www.computerbase.de/forum/" class="effect">ForumBase.de</a>

Die andere Sache mit dem Einfliegen müsste man wie gesagt mit JavaScript regeln, davon habe ich allerdings nicht viel Ahnung...

Revil · 16. Juni 2002

mit frontpage kannst dir die effekte ganz einfach generieren und dann den html quelltext kopieren und so bearbeiten wie dus brauchst...

dadurch spart man sich selbst die programmierung und das klappt eigentlich ganz gut...

der Designer · 16. Juni 2002

Ja ich will es ja mit Frontpage machen, nur Die Buttons sehen immer anders aus als ich will!

Ich will das es von der Farbe (Hex=#0066FF) auf diese Farbe(Hex=#00FFFF) springt beim Mouseover!

könntet Ihr mir Bitte mal das Script für genau diesen Zweck geben! wo ich dann die Addy nur noch Einsetzen muss.

Bitte macht das mal!

Grüße vom Designer

The Prophet · 16. Juni 2002

Das mit dem Einfliegen und MouseOver sollte in Flash bzw. Swish super zu machen sein.

mfg

weird · 17. Juni 2002

die bewegung lässt sich beim document object model (ie, nc6) über absolute/relative positionierung per css/javascript, bei netscape 4.x via layertechnik realisieren

ansatz dom:

-div- oder span-tag mit eindeutiger id über style mit margin-eigenschaft belegen
-über javascript auf den margin dynamsich zugreifen

ansatz layertechnik:

-dynamische positionierung des layers mit entsprechendem inhalt

die dynamischen änderungen jeweils zeitgesteuert über settimeout...denk dabei an cleartimeout sonst kann es zu abstürzen kommen

@the prophet:

dann ist einbindung in html aber schwierig und die dateigröße wohl auch unpraktisch nehme ich an

greets, weird

The Prophet · 17. Juni 2002

Original erstellt von weird

@the prophet:

dann ist einbindung in html aber schwierig und die dateigröße wohl auch unpraktisch nehme ich an

greets, weird

Einbindung was soll daran schwer sein? Embed Object dürfte doch reichen. Und die Datei Größe also ich weiß nicht Flash ist für gewöhnlich klein.

Oder liege ich mal wieder flasch

weird · 17. Juni 2002

es geht ja nicht nur um die anzeige selbst, sondern auch darum, dass man dieses objekt in das bestehende layout integriert und entsprechend positioniert. außerdem soll es beim anklicken ja sicherlich irgendwelche funktionen auslösen, und das nicht im flash-objekt, sondern auf der restlichen html-seite...

was die dateigröße angeht, so würde ich fast mit dir wetten, dass ich den mouseover-farbwechsel sowie das 'einfliegen' mit weniger bytes realisieren kann

absolut sicher bin ich aber auch nicht

grüße, weird

Steffen · 17. Juni 2002

Original erstellt von der Designer
Ich will das es von der Farbe (Hex=#0066FF) auf diese Farbe(Hex=#00FFFF) springt beim Mouseover!

könntet Ihr mir Bitte mal das Script für genau diesen Zweck geben! wo ich dann die Addy nur noch Einsetzen muss.

Bitte macht das mal!

Ich habe doch den Code genau für diesen Fall hier gepostet und das Einfügen in Frontpage ist ja nu wirklich kein Problem.

Die beiden Farbcodes auszutauschen sollte ebenfalls kein unüberwindbares Hinderniss sein. Und wenn du nicht weißt, welcher wohin gehört, steht die Chance immer noch 50:50. Wo liegt also das Problem?

der Designer · 19. Juni 2002

Aber wenn ich es alles so mache kommt anstatt des Blauen immer so eine rot/rosa Mischfarbe und wenn ich es mit Frontpage verändere geht es nicht mehr! Anscheinend Vertragen sich die beiden Effeckte nicht. Ich habe hier mal einen Ausschnitt für einen Button, Bitte Verändert den mal so das es klappt!

Code:

<!--
function dynAnimation() {}
function clickSwapImg() {}
//-->
</script>
<script language="JavaScript1.2" fptype="dynamicanimation" src="file:///C:/Programme/Microsoft%20Office/Office10/fpclass/animate.js">
</script>
<style type="text/css">
<!--
.effect:link, effect:visited { color: #0066FF; }
.effect:hover { color: #00FFFF; }
//-->
</style>
</head>

<body background="../../Eigene%20Bilder/indexframe.PNG" onload="dynAnimation()">

<center>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="142" height="330" id="AutoNumber1">
  <tr>
    <td width="142" height="25" colspan="2">
    <p align="left" dynamicanimation="fpAnimflyLeftFP1" id="fpAnimflyLeftFP1" style="position: relative !important; visibility: hidden" language="Javascript1.2" fprolloverstyle="font-family: International Super Hero Exp; color: #00FFFF" onmouseover="rollIn(this)" onmouseout="rollOut(this)">
    <font face="International Super Hero Exp" color="#0066FF" style="font-size: 20pt">
    Home</font></p>
    </td>
  </tr>

weird · 20. Juni 2002

öhm...*vbg*

stopf mal lieber alles, das heißt die html-datei, die js-datei und das bild in ein zip-archiv und lads hoch. so geht ja gar nichts...

nochn tipp fürs web design: nimm relative pfade

greets, weird

der Designer · 20. Juni 2002

also hier die gesanmmte HTML Datei des Menüframes:

Code:

<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Neue Seite 2</title>
<base target="Hauptframe">
<script language="JavaScript" fptype="dynamicanimation">
<!--
function dynAnimation() {}
function clickSwapImg() {}
//-->
</script>
<script language="JavaScript1.2" fptype="dynamicanimation" src="file:///C:/Programme/Microsoft%20Office/Office10/fpclass/animate.js">
</script>
</head>

<body background="../../Eigene%20Bilder/indexframe.PNG" onload="dynAnimation()">

<center>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="142" height="330" id="AutoNumber1">
  <tr>
    <td width="142" height="25" colspan="2">
    <p align="left" dynamicanimation="fpAnimflyLeftFP1" id="fpAnimflyLeftFP1" style="position: relative !important; visibility: hidden" language="Javascript1.2" fprolloverstyle="font-family: International Super Hero Exp; color: #00FFFF" onmouseover="rollIn(this)" onmouseout="rollOut(this)">
    <font face="International Super Hero Exp" color="#0066FF" style="font-size: 20pt">
    Home</font></p>
    </td>
  </tr>
  <tr>
    <td width="142" height="25" colspan="2">
    <p dynamicanimation="fpAnimflyLeftFP2" id="fpAnimflyLeftFP2" style="position: relative !important; visibility: hidden" language="Javascript1.2">
    <font color="#0066FF" face="International Super Hero Exp" style="font-size: 20pt">
    Lustiges</font></p>
    </td>
  </tr>
  <tr>
    <td width="142" height="25" colspan="2">
    <p dynamicanimation="fpAnimflyLeftFP3" id="fpAnimflyLeftFP3" style="position: relative !important; visibility: hidden" language="Javascript1.2">
    <font face="International Super Hero Exp" color="#0066FF" style="font-size: 20pt">
    Fun Pics</font></p>
    </td>
  </tr>
  <tr>
    <td width="142" height="25" colspan="2">
    <p dynamicanimation="fpAnimflyLeftFP4" id="fpAnimflyLeftFP4" style="position: relative !important; visibility: hidden" language="Javascript1.2">
    <font face="International Super Hero Exp" color="#0066FF" style="font-size: 20pt">
    Comics</font></p>
    </td>
  </tr>
  <tr>
    <td width="142" height="25" colspan="2">
    <p dynamicanimation="fpAnimflyLeftFP5" id="fpAnimflyLeftFP5" style="position: relative !important; visibility: hidden" language="Javascript1.2">
    <font face="International Super Hero Exp" color="#0066FF" style="font-size: 20pt">
    G-Book</font></p>
    </td>
  </tr>
  <tr>
    <td width="142" height="25" colspan="2">
    <p dynamicanimation="fpAnimflyLeftFP6" id="fpAnimflyLeftFP6" style="position: relative !important; visibility: hidden" language="Javascript1.2">
    <font face="International Super Hero Exp" color="#0066FF" style="font-size: 20pt">
    Forum</font></p>
    </td>
  </tr>
  <tr>
    <td width="142" height="25" colspan="2">
    <p dynamicanimation="fpAnimflyLeftFP7" id="fpAnimflyLeftFP7" style="position: relative !important; visibility: hidden" language="Javascript1.2">
    <font face="International Super Hero Exp" color="#0066FF" style="font-size: 20pt">
    Chat</font></p>
    </td>
  </tr>
  <tr>
    <td width="142" height="25" colspan="2">
    <p dynamicanimation="fpAnimflyLeftFP9" id="fpAnimflyLeftFP9" style="position: relative !important; visibility: hidden" language="Javascript1.2">
    <font face="International Super Hero Exp" color="#0066FF" style="font-size: 20pt">
    Links</font></p>
    </td>
  </tr>
  <tr>
    <td width="100" height="83"><p align="left">&nbsp;<p align="left">
    <dfn><font color="#00AFFF">
    ~~~~~~~~~~~~</font></dfn><img src="http://s89.gratiscounter.de/hit.cgi?4889"> <sup><font color="#00AFFF"><dfn> Besucher haben sich
        meine Seite angesehen! </dfn></font></sup><dfn><font color="#00AFFF">
    ~~~~~~~~~~~~</font></dfn></td>
    <td width="42" height="90">&nbsp;</td>
  </tr>
  <tr>
    <td width="142" height="50" colspan="2"><i><font face="Arial" color="#00AFFF" size="2">Aktualisiert am
<!--webbot bot="Timestamp" S-Type="EDITED" S-Format="%d.%m.%y" --> ©® Nico Jung</font></i></td>
    </tr>
</table>
</center>
<p>&nbsp;</p>

</body>

</html>

und hier die ANIMATE.JS

und Bild? was für ein Bild? das ist ganz normaler text der da eingeflogen kommt!

Grüße vom Designer

der Designer · 22. Juni 2002

Reichen euch die Daten etwa nicht aus?

Bitte Heflt mir!

Grüße vom Designer

Steffen · 23. Juni 2002

Also beim Betrachten des HTML-Codes von Frontpage (?) kommen mir die Tränen. Naja, der Grund dafür, dass die Einfärbung gar nicht (zumindets bei mir) funktioniert ist, dass du unsere Ratschläge eigentlich komplett ignoriert hast...

Es existieren ja überhaupt keine Links und den CSS-Code hast du auch nirgendswo eingebunden. Guck mal ein paar Posts weiter oben, da hab ich eigentlich schon die wichtigsten Dinge gesagt...

der Designer · 24. Juni 2002

Original erstellt von Steffen
Also beim Betrachten des HTML-Codes von Frontpage (?) kommen mir die Tränen. Naja, der Grund dafür, dass die Einfärbung gar nicht (zumindets bei mir) funktioniert ist, dass du unsere Ratschläge eigentlich komplett ignoriert hast...

Es existieren ja überhaupt keine Links und den CSS-Code hast du auch nirgendswo eingebunden. Guck mal ein paar Posts weiter oben, da hab ich eigentlich schon die wichtigsten Dinge gesagt...

Also
1. es ist mit Frontpage gemacht, wenns da steht!
2. Ich hatte den CCS Code doch schon 10 mal eingebaut und auch die Links dazu! Immer wieder anders Probiert, aber es ging bei keiner Variante! Und deshalb wollte ich euch den Roh HTML Text schicken damit Ihr es vielleicht einbauen könntet, weil sich bei den beiden Effeckten irgendwas stören muss!

Bitte versucht Ihr es mal einzubauen!

The Prophet · 24. Juni 2002

Hm wo is das Problem? Ich sehe keines.
Hoffe du meinst das... Hab es an einem Bsp mal schnell gemacht.

Code:

<html>

<head>
<meta name="GENERATOR" content="Microsoft FrontPage 5.0">
<meta name="ProgId" content="FrontPage.Editor.Document">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Neue Seite 2</title>
<base target="Hauptframe">
<script language="JavaScript" fptype="dynamicanimation">
<!--
function dynAnimation() {}
function clickSwapImg() {}
//-->
</script>
<script language="JavaScript1.2" fptype="dynamicanimation" src="animate.js">
</script>

<style type="text/css">
<!--
.effect:link, effect:visited { color: #000000; }
.effect:hover { color: #FF0000; }
//-->
</style>
</head>


<body background="../../Eigene%20Bilder/indexframe.PNG" onload="dynAnimation()">

<center>
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="142" height="330" id="AutoNumber1">
  <tr>
    <td width="142" height="25" colspan="2">
    <p align="left" dynamicanimation="fpAnimflyLeftFP1" id="fpAnimflyLeftFP1" style="position: relative !important; visibility: hidden" language="Javascript1.2" fprolloverstyle="font-family: International Super Hero Exp; color: #00FFFF" onmouseover="rollIn(this)" onmouseout="rollOut(this)">
    <font face="International Super Hero Exp" color="#0066FF" style="font-size: 20pt">
    Home</font></p>
    </td>
  </tr>
  <tr>
    <td width="142" height="25" colspan="2">
    <p dynamicanimation="fpAnimflyLeftFP2" id="fpAnimflyLeftFP2" style="position: relative !important; visibility: hidden" language="Javascript1.2">
    <font color="#0066FF" face="International Super Hero Exp" style="font-size: 20pt">
    Lustiges</font></p>
    </td>
  </tr>
  <tr>
    <td width="142" height="25" colspan="2">
    <p dynamicanimation="fpAnimflyLeftFP3" id="fpAnimflyLeftFP3" style="position: relative !important; visibility: hidden" language="Javascript1.2">
    <font face="International Super Hero Exp" color="#0066FF" style="font-size: 20pt">
    Fun Pics</font></p>
    </td>
  </tr>
  <tr>
    <td width="142" height="25" colspan="2">
    <p dynamicanimation="fpAnimflyLeftFP4" id="fpAnimflyLeftFP4" style="position: relative !important; visibility: hidden" language="Javascript1.2">
    <font face="International Super Hero Exp" color="#0066FF" style="font-size: 20pt">
    Comics</font></p>
    </td>
  </tr>
  <tr>
    <td width="142" height="25" colspan="2">
    <p dynamicanimation="fpAnimflyLeftFP5" id="fpAnimflyLeftFP5" style="position: relative !important; visibility: hidden" language="Javascript1.2">
    <font face="International Super Hero Exp" color="#0066FF" style="font-size: 20pt">
    G-Book</font></p>
    </td>
  </tr>
  <tr>
    <td width="142" height="25" colspan="2">
    <p dynamicanimation="fpAnimflyLeftFP6" id="fpAnimflyLeftFP6" style="position: relative !important; visibility: hidden" language="Javascript1.2">
    <font face="International Super Hero Exp" color="#0066FF" style="font-size: 20pt">
    <a href="https://www.computerbase.de/forum/" class="effect">Forum</a></font></p>
    </td>
  </tr>
  <tr>
    <td width="142" height="25" colspan="2">
    <p dynamicanimation="fpAnimflyLeftFP7" id="fpAnimflyLeftFP7" style="position: relative !important; visibility: hidden" language="Javascript1.2">
    <font face="International Super Hero Exp" color="#0066FF" style="font-size: 20pt">
    Chat</font></p>
    </td>
  </tr>
  <tr>
    <td width="142" height="25" colspan="2">
    <p dynamicanimation="fpAnimflyLeftFP9" id="fpAnimflyLeftFP9" style="position: relative !important; visibility: hidden" language="Javascript1.2">
    <font face="International Super Hero Exp" color="#0066FF" style="font-size: 20pt">
    Links</font></p>
    </td>
  </tr>
  <tr>
    <td width="100" height="83"><p align="left">_<p align="left">
    <dfn><font color="#00AFFF">
    ~~~~~~~~~~~~</font></dfn><img src="http://s89.gratiscounter.de/hit.cgi?4889"> <sup><font color="#00AFFF"><dfn> Besucher haben sich
        meine Seite angesehen! </dfn></font></sup><dfn><font color="#00AFFF">
    ~~~~~~~~~~~~</font></dfn></td>
    <td width="42" height="90">_</td>
  </tr>
  <tr>
    <td width="142" height="50" colspan="2"><i><font face="Arial" color="#00AFFF" size="2">Aktualisiert am
<!--webbot bot="Timestamp" S-Type="EDITED" S-Format="%d.%m.%y" --> ©® Nico Jung</font></i></td>
    </tr>
</table>
</center>
<p>_</p>

</body>

</html>

Wenn du alles richtig machst wirst du sofort sehen welches.
Und änder die Pfade in relative Pfade um, sonst geht nix!
Und wegen dem Hintergrund dann schau nochmal in den Quelltext da ist eine Angabe gemacht wurden.
Die JS Datei sollte im Moment animate.js heißen.
Und im selben Ordner sein dann funktioniert es auch.
mfg

Suche

der Designer

Gast

Steffen

Technische Leitung Pro

Revil

Cadet 1st Year

der Designer

Gast

The Prophet

Rear Admiral

weird

Lt. Commander

The Prophet

Rear Admiral

weird

Lt. Commander

Steffen

Technische Leitung Pro

der Designer

Gast

weird

Lt. Commander

der Designer

Gast

der Designer

Gast

Steffen

Technische Leitung Pro

der Designer

Gast

The Prophet

Rear Admiral

Ähnliche Themen