Roll-Over Effekt


Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Roll-Over Effekt

    So, ich will eine Tabelle mit allen Tagen im Jahr machen . So an einnigen Tagen sollen Termine seien.Rechts daneben soll ein Info Fenster seien das auch im Normalzustand dort ist, doch wenn man jetzt mit der Maus über die Zahlen geht soll etwas im Infofeld über den Termin stehen.
    Meine ersten Ideen waren das man im frameset einen kleinen Bereich auswählt (KA ob das geht) Der im Normal zustand unsichtbar ist ! Wenn man dann mit der Maus Über die Zahlen geht kann man diesen Bereich vieleicht als target nehmen und dort solange man der Maus darauf ist eine Seite zeigen ! Die andere IDee wäre irgendetwas mit sensitiven Bereichen (Nur noch ka wie das gehen sollte) ! Vieleicht fällt jemanden ja ein andere Weg ein oder er weiß wie man meine Ideen umsetzt ! Bitte um Rückmeldung! Bitte Bitte ! Ist wichtig für meine Facharbeit!

  • mach es doch mit innerHTML ;)
    hier mal ein beispiel (ist mit den meisten brwosertypen gültig;))

    HTML-Quellcode

    1. <html>
    2. <head>
    3. <script type="text/javascript">
    4. <!--
    5. var NS4 = (document.layers) ? 1 : 0;
    6. var IE4 = (document.all) ? 1 : 0;
    7. var NS6 = (document.getElementById) ? 1 : 0;
    8. function andererText(where) {
    9. if(NS4) {
    10. document.meinText.document.open();
    11. document.meinText.document.write(where);
    12. document.meinText.document.close();
    13. }
    14. if(IE4) {
    15. window.document.all.meinText.innerHTML=where;
    16. }
    17. if(NS6) {
    18. document.getElementById("meinText").innerHTML=where;
    19. }
    20. }
    22. //-->
    23. </script>
    24. </head>
    25. <body>
    26. <a onmouseover="javascript:andererText('over');" onmouseout="javascript:andererText('out');">hier</a>
    27. <div id="meinText"></div>
    28. </body>
    29. </html>
    Alles anzeigen

    Musst halt nur das <div id="meinText"> in die gewünchte Tabelle einsetzen oder die td mit id="meinText" kennzeichnen ;)

  • HTML-Quellcode

    1. <html>
    2. <head>
    3. <title>RollOverTest</title>
    4. </head>
    5. <script language="JavaScript">
    6. function setInfo(text)
    7. {
    8. document.getElementById("info").innerText = text;
    9. }
    10. </script>
    11. <body>
    12. <table width="100%">
    13. <tr>
    14. <td onMouseOver="setInfo('Info zu diesem text\nOMG');"
    15. onMouseOut="setInfo('Infos');">
    16. test
    17. </td>
    18. <td onMouseOver="setInfo('Infos zum zweiten text\nLOL^^');"
    19. onMouseOut="setInfo('Infos');">
    20. 2.
    21. </td>
    22. </tr>
    23. </table>
    24. <div id="info">
    25. Infos
    26. </div>
    27. </body>
    28. </html>
    Alles anzeigen


    ich hoffe mal das ist das, was du suchst

    cya dn87p

    //edit:
    da war aber einer schneller^^
    nimm seins, das is besser ;)

    cya

  • @BloodVortex
    danke ich werd das mal ausprobieren
    hoffe es klappt

    @$Newbie$
    Textfeld wäre auch ok aber ich wollte das eigentlich so machen, dass das da ganz normal (normaler Text) neben oder drunter steht.
    Mit onMouseClick wäre das ja nicht das problem, aber ich wollte das mit onMouseOver machen.

  • @stimmt, aber ich bin leider noch kein Profi und hab deinen code zuerst nicht richtig verstanden (jetzt schon)
    werd gucken was meine Lehrer(für die Facharbeit) fordern.

    Aber danke nochmal an euch, ich denke das es jetzt klappen wird.

    Calli

  • naja, eigentlich gibt es keine großen unterscheide zwischen meinem und BloodVortexs code; bis auf:
    1. er hat innerHTML statt innerText genommen; bei ersterem kann man html benutzen bei zweiterem nicht (logisch, oder? :D )
    2. sein script ist zu fast allen browsern kompatibel
    --> seins ist ja wohl klar besser
    der einfachheit halber habe ich meins jedoch so aufgebaut, damit es leicht zu verstehen und nachvollziehbar ist (auch für die weniger geübten).

    document.getElementById("meinText").innerHTML=where;

    ist fast identisch mit meiner zeile; sein script unterstützt jedoch auch IE4 und NS4, welche auf getElementById("id") nicht klarkommen
    gewöhne dir am besten an, diese browserkompatibilität zu gebrauchen, weil du so einfach ein größeres feld von benutzern abdeckst und deine seite für mehr user funktionsfähig ist

    //edit:
    @ BloodVortex:
    mein script unterstützt nicht nur NS6; das script sollte auf:
    NS5 aufwärts (NS5,6,7), IE5 aufwärts (IE5,6), Opera6 aufwärts (Opera6,7) laufen
    welche version vom firefox nötig ist, weiß ich nicht :/

    cya dn87p

  • dn87p schrieb:


    mein script unterstützt nicht nur NS6; das script sollte auf:
    NS5 aufwärts (NS5,6,7), IE5 aufwärts (IE5,6), Opera6 aufwärts (Opera6,7) laufen
    welche version vom firefox nötig ist, weiß ich nicht :/

    cya dn87p

    schon klar ;)
    doch laufen die alle über die selbe Variabel NS6 :D

    Gruß
    BloodVortex

  • Hi,

    <script language="JavaScript">
    <!--
    function na_change_img_src(name, nsdoc, rpath, preload)
    {
    var img = eval((navigator.appName.indexOf('Netscape', 0) != -1) ? nsdoc+'.'+name : 'document.all.'+name);
    if (name == '')
    return;
    if (img) {
    img.altsrc = img.src;
    img.src = rpath;
    }
    }

    function na_preload_img()
    {
    var img_list = na_preload_img.arguments;
    if (document.preloadlist == null)
    document.preloadlist = new Array();
    var top = document.preloadlist.length;
    for (var i=0; i < img_list.length-1; i++) {
    document.preloadlist[top+i] = new Image;
    document.preloadlist[top+i].src = img_list[i+1];
    }
    }

    function na_restore_img_src(name, nsdoc)
    {
    var img = eval((navigator.appName.indexOf('Netscape', 0) != -1) ? nsdoc+'.'+name : 'document.all.'+name);
    if (name == '')
    return;
    if (img && img.altsrc) {
    img.src = img.altsrc;
    img.altsrc = null;
    }
    }

    // -->
    </script>
    </head>

    <body bgcolor="white" text="black" link="blue" vlink="purple" alink="red" OnLoad="na_preload_img(false, 'file:DATEI HIER EINTAGEN');">
    <p><a href="#" OnMouseOut="na_restore_img_src('image1', 'document')" OnMouseOver="na_change_img_src('image1', 'document', 'file:DATEI HIER EINTRAGEN', true)"><img border="0" src="file:DATEI HIER EINTRAGEN" width="117" height="27" name="image1"></a></p>


    VIEL SPAß

    Sammy254

  • @sammy254


    <body bgcolor="white" text="black" link="blue" vlink="purple" alink="red" OnLoad="na_preload_img(false, 'file:DATEI HIER EINTAGEN');">
    <p><a href="#" OnMouseOut="na_restore_img_src('image1', 'document')" OnMouseOver="na_change_img_src('image1', 'document', 'file:DATEI HIER EINTRAGEN', true)"><img border="0" src="file:DATEI HIER EINTRAGEN" width="117" height="27" name="image1"></a></p>


    VIEL SPAß

    Sammy254


    wollte es einmal testen und kam nicht wirklich zurecht ?
    was muß ich da nune genau einsetzen ... 'file:DATEI HIER EINTAGEN'
    ( was für eine datei ? )
    thx4help