.: onmouseover, mehrere Links, aber nur eine Grafik?

Hi Folks!

ich möchte einen Menüframe basteln, bei dem vor dem Linktext eine kleine Lampe steht, die beim mouseover angeht und beim mouseout wieder aus.

Da die Grafik immer desselbe ist, bei allen Links, hab ich probiert, ob das geht, daß ich nur die zwei Grafiken benutzen brauch:

browserName = navigator.appName; browserVer = parseInt(navigator.appVersion); version = "2"; if (browserName == "Netscape" && browserVer >= 3) version = "1"; if (browserName != "Netscape" && browserVer >= 4) version = "1"; if (version == "1") { punkt_an = new Image(26,24); punkt_an.src = "punkt_an.gif"; punkt_aus= new Image(26,24); punkt_aus.src = "punkt_aus.gif"; } function hiLite(imgDocID,imgObjName) { if (version == "1") {    document.images[imgDocID].src = eval(imgObjName + ".src") } }

innerhalb des <a href ...> steht dann:

onMouseOver="hiLite('menu1','punkt_an')" onMouseOut="hiLite('menu1','punkt_aus')"

aber nichts passiert!

Frage: ist das überhaupt möglich? Hab ich einen Fehler gemacht? Wie könnte es dann aussehen? Oder muß ich die Grafik tatsächlich unter mehreren Namen abspeichern?

Danke für jede Hilfe!

The Dot

  1. Hi .,

    der ansatz war doch völlig ok...so hat's auf jeden fall bei mir funktioniert (mir waren nur gerade die dots ausgegangen, deswegen andere grafiken):

    ---------- >=8 ------------------------

    <script language="JavaScript" type="text/javascript"><!--
    browserName = navigator.appName;
    browserVer = parseInt(navigator.appVersion);
    version = "2";
    if (browserName == "Netscape" && browserVer >= 3) version = "1";
    if (browserName != "Netscape" && browserVer >= 4) version = "1";
    if (version == "1") {
    punkt_an = new Image(66,66);
    punkt_an.src = "images/face3.gif";
    punkt_aus= new Image(66,66);
    punkt_aus.src = "images/face2.gif";
    }
    function hiLite(imgDocID,imgObjName) {
    if (version == "1") {
       document.images[imgDocID].src = eval(imgObjName + ".src")
    }
    }
    //--></script>

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

    <html>
    <head>
    <title>Untitled</title>
    </head>

    <body>

    <a href="dummy.dum" onMouseOver="hiLite('menu1','punkt_an')" onMouseOut="hiLite('menu1','punkt_aus')">
    <img name="menu1" src="images/face2.gif" width="66" height="66" alt="">
    </a>

    <a href="dummy.dum" onMouseOver="hiLite('menu2','punkt_an')" onMouseOut="hiLite('menu2','punkt_aus')">
    <img name="menu2" src="images/face2.gif" width="66" height="66" alt="">
    </a>

    </body>
    </html>

    ---------- >=8 ------------------------

    so long...
    /*,*/
    Wowbagger

    1. Hi .,

      der ansatz war doch völlig ok...so hat's auf jeden fall bei mir funktioniert (mir waren nur gerade die dots ausgegangen, deswegen andere grafiken):

      Schön zu hören, daß ich auf dem richtigen Weg bin g

      »

      <a href="dummy.dum" onMouseOver="hiLite('menu1','punkt_an')" onMouseOut="hiLite('menu1','punkt_aus')">

      »»  <img name="menu1" src="images/face2.gif" width="66" height="66" alt="">

      </a>

      Also mein <a href...> sieht, denke ich, genauso aus, aber... es funktioniert nicht. So sieht meiner aus...:

      <a href="ideen.htm" target=Main onMouseOver="hiLite('ideen','punkt_an')"                                                                                           onMouseOut="hiLite('ideen','punkt_aus')"> <img name="ideen" src="punkt_aus.gif" width=26 height=24 border=0>                   <img src="ideen.gif" width=80 height=30 border=0></a>

      Kann das womöglich daran liegen, daß ich innerhalb des <a>-Tags zwei images habe aber immer nur eines ändere?

      Danke schonmal für Deine Mühe.

      the dot.

      1. Hallo .,

        Also mein <a href...> sieht, denke ich, genauso aus, aber... es funktioniert nicht.

        kommt ganz darauf an, wie deine ganzen *anderen* HREFs aussehen. Damit das in der gezeigten weise funktionieren kann, ist es wichtig pro href jeweils immer aufs neue <img name="ideen" src="punkt_aus.gif" width=26 height=24 border=0>
        einzubauen, wobei du natürlich immer einen neuen namen vergeben mußt (also name="ideen1", name="ideen2" u.s.f.), denn du sprichst im grunde unterschiedliche grafiken an, denen dann im script jeweils das gleiche image zugewiesen wird.

        Das wiederholte zuweisen der immer gleichen grafik in den einzelnen <img>-tags ist unproblematisch, da die grafik ab dem zweiten zugriff aus dem cache gefischt wird, also mach' dir darum keine gedanken.
        Man könnte auch an dieser stelle jeweils eine 1-pixel-dummy-grafik laden und diese dann später per script gegen die (größere) eigentliche grafik austauschen

        So sieht meiner aus...:

        <a href="ideen.htm" target=Main onMouseOver="hiLite('ideen','punkt_an')"                                                                                           onMouseOut="hiLite('ideen','punkt_aus')">

        »»  <img name="ideen" src="punkt_aus.gif" width=26 height=24 border=0>

        <img src="ideen.gif" width=80 height=30 border=0></a>

        Kann das womöglich daran liegen, daß ich innerhalb des <a>-Tags zwei images habe aber
        immer nur eines ändere?

        nein, obwohl ich ihm zur sicherheit auch einen namen geben würde (sowas wie 'dummy'), da ich nicht weis, ob ältere browser (3te generation abwärts) darauf reagieren könnten, wenn er in *diesem* fall fehlt.
        Im IE4 und NN4 geht's allerdings völlig problemlos.

        tschau...
        /*,*/
        Wowbagger

  2. Hi Folks!

    browserName = navigator.appName;
    browserVer = parseInt(navigator.appVersion);
    version = "2";
    if (browserName == "Netscape" && browserVer >= 3) version = "1";
    if (browserName != "Netscape" && browserVer >= 4) version = "1";
    if (version == "1") {

    »»  punkt_an = new Image(26,24);
    »»  punkt_an.src = "punkt_an.gif";
    »»  punkt_aus= new Image(26,24);
    »»  punkt_aus.src = "punkt_aus.gif";

    }
    function hiLite(imgDocID,imgObjName) {

    »»  if (version == "1") {

    document.images[imgDocID].src = eval(imgObjName + ".src")

    »»  }

    }
    innerhalb des <a href ...> steht dann:
    onMouseOver="hiLite('menu1','punkt_an')" onMouseOut="hiLite('menu1','punkt_aus')"
    aber nichts passiert!
    Frage: ist das überhaupt möglich? Hab ich einen Fehler gemacht? Wie könnte es dann
    aussehen? Oder muß ich die Grafik tatsächlich unter mehreren Namen abspeichern?

    Hallo,

    Erstmal ein paar Antworten:
    Moeglich is das.
    Schau mal in meine Gegenfragen.
    Prinzipiell so.
    Nein.

    Und nun ein paar Gegenfragen:
    Hat jede Stelle an der Du die Grafik einbindest einen eigenen individuellen Namen (NAME="") innerhalb des IMG-Tags?
    Refeernzierst Du innerhalb des HREF-Tag auch immer das richtige Image?
    Hast Du alle zu schliesenden Tags auch sauber geschlossen?

    Bis dann
    Michael N.

    PS.: Das waren einige uebliche Copy&Paste-Fehler, die auch dem gewieftesten passieren koennen.

    1. Hi Micha,

      hab von JavaScript nur wenig Ahnung muß ich gleich sagen, daher eine Frage:

      if (browserName == "Netscape" && browserVer >= 3) version = "1";
      if (browserName != "Netscape" && browserVer >= 4) version = "1";

      es würde doch reichen wenn er nur

      if (browserName == "Netscape" && browserVer >= 3) version = "1";

      schreiben würde, oder?? browserVer >=3 ist doch auch gleich >=4 oder denk ich da falsch??

      Gruß

      Viktor

      1. Hi Micha,

        hab von JavaScript nur wenig Ahnung muß ich gleich sagen, daher eine Frage:

        if (browserName == "Netscape" && browserVer >= 3) version = "1";
        if (browserName != "Netscape" && browserVer >= 4) version = "1";

        es würde doch reichen wenn er nur

        if (browserName == "Netscape" && browserVer >= 3) version = "1";

        schreiben würde, oder?? browserVer >=3 ist doch auch gleich >=4 oder denk ich da falsch??

        Hallo Viktor,
        der feine Unterschied liegt bei dem zweiten "if" in dem "!=" (ungleich) hinter der Variablen "browserName", deswegen die zwei Zeilen, das ist so naemlich uebersichtlicher als:
        if ((browserName == "Netscape" && browserVer >= 3) (browserName != "Netscape" && browserVer >= 4)) version = "1";

        Bis dann
        Michael N.

        1. der feine Unterschied liegt bei dem zweiten "if" in dem "!=" (ungleich) hinter der Variablen

          UPS, da hab ich doch glatt das " ! " übersehen *hust*

          Dennoch vielen Danke :o)

          Gruß

          Viktor