html Hilfe!

Dieses Thema im Forum "Webentwicklung" wurde erstellt von Darkless, 23. Juni 2005 .

Schlagworte:
Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen
  1. #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. Anzeige
  3. #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>
     
  4. #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 >
     
  5. #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!!!
     
  6. #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
     
  7. #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. #7 23. Juni 2005
  9. #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. ^^
     
  10. #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
     
  11. #10 23. Juni 2005
  12. #11 23. Juni 2005
    Vielen Vielen Vielen Dank!!
     
  13. #12 23. Juni 2005
    np
    wenn du wieder hilfe brauchst, meldest dich :]

    ~#closed#~
     

  14. Videos zum Thema
Die Seite wird geladen...
Similar Threads - html
  1. Antworten:
    7
    Aufrufe:
    2.552
  2. Antworten:
    7
    Aufrufe:
    2.037
  3. Antworten:
    2
    Aufrufe:
    512
  4. Antworten:
    3
    Aufrufe:
    501
  5. Antworten:
    1
    Aufrufe:
    855