#1 23. Juni 2005 Also ich habe mich wieder dem HTML gewitmet und arbeite mich langsam wieder ein ^^ Also jetzt habe ich mal ne Frage, möchte einen Efekt einarbeiten, das man wenn man mit der Maus über die Buttons (in Form von Texten, die ich ins html noch schreibe) fährt, dort dann so nen kästchen kommt... wisst ihr was ich meine? Haben viele Homepage halt diesen Efekt ^^. Ist glaub ich Java, oder nicht? Kann mir jemand den Code geben? 2. Wie ist nochmal der Code für Roll Overs? msfg Darkless
#2 23. Juni 2005 fade.js Code: /************* **** <config> **/ startColor = "#000000"; // MouseOut link color endColor = "#FFFFFF"; // MouseOver link color stepIn = 20; // delay when fading in stepOut = 20; // delay when fading out /* ** set to true or false; true will ** cause all links to fade automatically ***/ autoFade = true; /* ** set to true or false; true will cause all CSS ** classes with "fade" in them to fade onmouseover ***/ sloppyClass = true; /** **** </config> **************/ /************* **** <install> ** ** **** </install> **************/ hexa = new makearray(16); for(var i = 0; i < 10; i++) hexa[i] = i; hexa[10]="a"; hexa[11]="b"; hexa[12]="c"; hexa[13]="d"; hexa[14]="e"; hexa[15]="f"; document.onmouseover = domouseover; document.onmouseout = domouseout; startColor = dehexize(startColor.toLowerCase()); endColor = dehexize(endColor.toLowerCase()); var fadeId = new Array(); function dehexize(Color){ var colorArr = new makearray(3); for (i=1; i<7; i++){ for (j=0; j<16; j++){ if (Color.charAt(i) == hexa[j]){ if (i%2 !=0) colorArr[Math.floor((i-1)/2)]=eval(j)*16; else colorArr[Math.floor((i-1)/2)]+=eval(j); } } } return colorArr; } function domouseover() { if(document.all){ var srcElement = event.srcElement; if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1)) fade(startColor,endColor,srcElement.uniqueID,stepIn); } } function domouseout() { if (document.all){ var srcElement = event.srcElement; if ((srcElement.tagName == "A" && autoFade) || srcElement.className == "fade" || (sloppyClass && srcElement.className.indexOf("fade") != -1)) fade(endColor,startColor,srcElement.uniqueID,stepOut); } } function makearray(n) { this.length = n; for(var i = 1; i <= n; i++) this[i] = 0; return this; } function hex(i) { if (i < 0) return "00"; else if (i > 255) return "ff"; else return "" + hexa[Math.floor(i/16)] + hexa[i%16];} function setColor(r, g, b, element) { var hr = hex(r); var hg = hex(g); var hb = hex(b); element.style.color = "#"+hr+hg+hb; } function fade(s,e, element,step){ var sr = s[0]; var sg = s[1]; var sb = s[2]; var er = e[0]; var eg = e[1]; var eb = e[2]; if (fadeId[0] != null && fade[0] != element){ setColor(sr,sg,sb,eval(fadeId[0])); var i = 1; while(i < fadeId.length){ clearTimeout(fadeId[i]); i++; } } for(var i = 0; i <= step; i++) { fadeId[i+1] = setTimeout("setColor(Math.floor(" +sr+ " *(( " +step+ " - " +i+ " )/ " +step+ " ) + " +er+ " * (" +i+ "/" + step+ ")),Math.floor(" +sg+ " * (( " +step+ " - " +i+ " )/ " +step+ " ) + " +eg+ " * (" +i+ "/" +step+ ")),Math.floor(" +sb+ " * ((" +step+ "-" +i+ ")/" +step+ ") + " +eb+ " * (" +i+ "/" +step+ ")),"+element+");",i*step); } fadeId[0] = element; } und dann musst die datei in dein quellcode zwischen <head> und </head> einfügen. Code: <script language="JavaScript" src="deindateipfad/fade.js"></script>
#3 23. Juni 2005 Vielen Dank! Geht einwandfrei, nun wo kann ich die größe umstellen, das er es nicht kleiner, sondern größer macht? Und wenn ich nen a href habe also nen Link, dann ist die Schrift blau, wie bekomme ich das weg im Stylsheet oder so muss ich doch was ändern oder? [EDIT] ONLINE GEHT ES NICHT!! WARUM? PHP: <! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >< html > < head > < meta http - equiv = "content-type" content = "text/html; charset=ISO-8859-1" > < meta http - equiv = "pragma" content = "no-cache" > < meta http - equiv = "expires" content = "0" > < title >***** ******</ title > < LINK REL = "stylesheet" HREF = "text.css" TYPE = "text/css" > < script language = "JavaScript" src = "fade.js" ></ script ></ head > < body class= "bg" > < body >< div id = "header" > < table > < tr > < td >< img src = "header.gif" alt = "" width = "1002" height = "167" border = "0" ></ td > </ tr > </ table ></ div >< div id = "inhalt" > < table > < tr > < td >< img src = "inhalt.gif" alt = "" width = "772" height = "589" border = "0" ></ td > </ tr > </ table ></ div >< div id = "menu" > < table > < tr > < td >< img src = "menu.gif" alt = "" width = "228" height = "599" border = "0" ></ td > </ tr > </ table ></ div > < div id = "menu2" > < a href = "****************" > Test1 </ a > < br >< br > < a href = "****************" > Test1 </ a > < br >< br > </ div > </ body ></ html >
#4 23. Juni 2005 1.) was macht der größer oder kleiner?? versteh ich net so recht ^^^ 2.) bevor du das hier ausprobierst versuch es im Online im Internet Explorer zu öffnen und schau obs funzt. wenn net, probiers mal so...hab im bg tag vlink="#000000" alink="#000000" link="#000000" hinzugefügt, damit es dieselbe farbe hat wie wenn man noch nicht draufgeklickt hat Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="expires" content="0"> <title>***** ******</title> <LINK REL="stylesheet" HREF="text.css" TYPE="text/css"> <script language="JavaScript" src="fade.js"></script> </head> <body class="bg" vlink="#000000" alink="#000000" link="#000000"> <body> <div id="header"> <table> <tr> <td><img src="header.gif" alt="" width="1002" height="167" border="0"></td> </tr> </table> </div> <div id="inhalt"> <table> <tr> <td><img src="inhalt.gif" alt="" width="772" height="589" border="0"></td> </tr> </table> </div> <div id="menu"> <table> <tr> <td><img src="menu.gif" alt="" width="228" height="599" border="0"></td> </tr> </table> </div> <div id="menu2"> <a href="****************">Test1</a> <br><br> <a href="****************">Test1</a> <br><br> </div> </body> </html> 3.) Es funktioniert leider nur mit dem Internet Explorer!!!
#5 23. Juni 2005 Also ich meine die Schriftgröße! ... aber ich will da so ne art kasten anstatt das sich die farbe ändert verstehste? Halt so nen ding, was da runterfährt wenn man mit der maus drüber kommt. Haste auch eins, das auch bei Firefox geht msfg Frontyi
#6 23. Juni 2005 die schriftgröße kannst normal so ausprobiern und ändern z.B. mit size="13" oder so Code: <div id="menu2"> <a href="****************" size="12">Test1</a> <br><br> <a href="****************" size="10">Test1</a> <br><br> </div> meinst du mit dem kasten sowas wie hier nur dass der dann runterfahrn soll?? --> http://www.w3schools.com/dhtml/tryit.asp?filename=trydhtml_menu_slidehorizontal oder besser gesagt zeig mir mal nen screenie von irgendner seite davon wie du das meinst ^^ nee hab ich leider net, aber ich kann mal danach googeln und wenn ich was find dann sag ich dir bescheid.
#8 23. Juni 2005 so habs nun endlich geschafft. du musst nun nur wieder zwischen <head> und </head> das hier einfügen Code: <script language="JavaScript" src="java/fade.js"></script> <style type="text/css" media="Screen,Projection,TV" title="Minimal"> /* \*/ @import "deindateipfad/kasten.css"; /* \*/ #mac-ie {display:none} /* */ </style> und bei deinen links das hier Code: <div id="menu2" class=toolbar text-toolbar> <a href="****************" class="first" size="12">Test1</a> <br><br> <a href="****************" class="first" size="12">Test1</a> <br><br> </div> und diese datei im anhang bei dir hochladen. hoffe is richtig so. ^^
#9 23. Juni 2005 Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1"> <meta http-equiv="pragma" content="no-cache"> <meta http-equiv="expires" content="0"> <title>Basti Designs</title> <LINK REL="stylesheet" HREF="text.css" TYPE="text/css"> <script language="JavaScript" src="fade.js"></script> <style type="text/css" media="Screen,Projection,TV" title="Minimal"> /* \*/ @import "kasten.css"; /* \*/ #mac-ie {display:none} /* */ </style> body class="bg" vlink="#000000" alink="#000000" link="#000000"> </head> <body class="bg"> <body> <div id="header"> <table> <tr> <td><img src="header.gif" alt="" width="1002" height="167" border="0"></td> </tr> </table> </div> <div id="inhalt"> <table> <tr> <td><img src="inhalt.gif" alt="" width="772" height="589" border="0"></td> </tr> </table> </div> <div id="menu"> <table> <tr> <td><img src="menu.gif" alt="" width="228" height="599" border="0"></td> </tr> </table> </div> <div id="menu2" class=toolbar text-toolbar> <a href="****************" class="first" size="12">Test1</a> <br><br> <a href="****************" class="first" size="12">Test1</a> <br><br> </div> </body> </html> 1.Wie mache ich nen iframe? 2. Nen Roll Over wie mache ich den? Schonmal Vielen Dank für deine Hilfe! msfg Darkless
#10 23. Juni 2005 1.) schaust du hier --> http://www.6webmaster.com/homepagetools/iframe-erstellen.php 2.) guckst du da --> http://www.fineartweb.de/tool/werkzeugkiste/generatoren/mouse-over/rollover-generator.htm dann kannst es ganz individuell deinen wünschen anpassen :]