OnMouseOver - Problem, keine Ahnung!! :)


  • idefix
  • 1394 Aufrufe 12 Antworten

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

  • OnMouseOver - Problem, keine Ahnung!! :)

    Hallo Leute, ich habe da mal bezüglich onMouseOver eine Frage.
    Ich habe da ein kleines Projekt, was ich realisieren möchte. dazu benötige ich mehrere "sektionen" in einem Bild, die auf verschiedene andere Bilder verweisen.
    Beispiel:
    Löschgruppenfahrzeug LF 16

    wenn man da mit der Maus über das Bild gleitet, öffnen sich die verschiedenen Fächer und Türen. Soetwas möchte ich auch nutzen.

    Aber ich warne euch schon einmal vor, ich habe absolut keine Ahnung von JavaScript
    diese Seite scheint damit gearbeitet zu haben.

    Gibt es da irgendwie ein Tool, was mir die Arbeit erleichtert??
    Das ganze möchte ich auch in mein Joomla-CMS einbauen... Wie kann ich sowas realisieren??

    HELP!!

    Danke und Gruß
    Idefix
    [SIZE="4"]
    Sei Realist, versuch das Unmögliche!
    [/SIZE]

  • Ein Tool gibt es da sicherlich.. Probier doch mal "View"=>"Source" in deinem Browser :D
    Das ist einfach ein map-Gestell, wo man onmouse-out/over verwendet und dann einfach das Bild ändert. Kuck dir den Queltzext an und ändere ihn für dich.

    Gruß
    Auf dem Abstellgleis sah man ihn liegen,
    Auf dem Abstellgleis zwischen Schwelle und Gestein,
    Auf dem Abstellgleis im strömenden Regen,
    Auf dem Abstellgleis allein.

  • kann mir denn jemand von euch dieses für mich völlige wirrwarr ein wenig erklären? Ich kenne mich mit java überhaupt nicht aus! :(
    Stehe völlig auf dem schlauch! :(


    Quellcode

    1. <SCRIPT language=JavaScript>
    2. var NN3 = false;
    3. link_links = new Image();
    4. link_links.src = "lf16/images/1342_links.JPG";
    5. link_links_1 = new Image();
    6. link_links_1.src = "lf16/images/1342_links_1.JPG";
    7. link_links_2 = new Image();
    8. link_links_2.src = "lf16/images/1342_links_2.JPG";
    9. link_links_3 = new Image();
    10. link_links_3.src = "lf16/images/1342_links_3.JPG";
    11. link_links_4 = new Image();
    12. link_links_4.src = "lf16/images/1342_links_4.JPG";
    13. link_links_5 = new Image();
    14. link_links_5.src = "lf16/images/1342_links_5.JPG";
    16. function on3_links_1(name) {
    17. document[name].src = eval(name + "_1.src");
    18. }
    19. function on3_links_2(name) {
    20. document[name].src = eval(name + "_2.src");
    21. }
    22. function on3_links_3(name) {
    23. document[name].src = eval(name + "_3.src");
    24. }
    25. function on3_links_4(name) {
    26. document[name].src = eval(name + "_4.src");
    27. }
    28. function on3_links_5(name) {
    29. document[name].src = eval(name + "_5.src");
    30. }
    31. function off3(name) {
    32. document[name].src = eval(name + ".src");
    33. }
    34. NN3 = true;
    36. function on_links_1(name) {
    37. if (NN3) on3_links_1(name);
    38. }
    39. function on_links_2(name) {
    40. if (NN3) on3_links_2(name);
    41. }
    42. function on_links_3(name) {
    43. if (NN3) on3_links_3(name);
    44. }
    45. function on_links_4(name) {
    46. if (NN3) on3_links_4(name);
    47. }
    48. function on_links_5(name) {
    49. if (NN3) on3_links_5(name);
    50. }
    51. function off(name) {
    52. if (NN3) off3(name);
    53. }
    54. </SCRIPT>
    Alles anzeigen



    wo sind denn da die areas definiert??

    und wie ist hängt das obiege mit dem hier zusammen?? ->
    <p align="center"><FONT face="Century Gothic" size=3><MAP
    name=FrontPageMap0><AREA coords='280, 97, 365, 166'
    href="lf16/links/1342_g3.htm"
    onmouseout="off('link_links');" onmouseover="on_links_4('link_links');"
    shape=RECT><AREA coords='185, 92, 272, 167'
    href="lf16/links/1342_g1.htm"
    onmouseout="off('link_links');" onmouseover="on_links_3('link_links');"
    shape=RECT><AREA coords='126, 83, 172, 170'
    href="lf16/links/mannschaft.htm"
    onmouseout="off('link_links');" onmouseover="on_links_2('link_links');"
    shape=RECT><AREA coords='44, 85, 77, 85, 76, 141, 60, 146, 46, 156, 39, 158, 37, 119'
    href="lf16/links/fahrer.htm"
    onmouseout="off('link_links');" onmouseover="on_links_1('link_links');"
    shape=POLY></MAP><a href="lf16-vorne.htm"><img border="0" src="pllink.gif" width="52" height="40"></a><IMG alt="LF 16, linke Fahrzeugseite" border=0
    height=285 name=link_links src="lf16/1342-Dateien/1342_links.JPG"
    useMap=#FrontPageMap0 width=381><a href="lf16-hinten.htm"><img border="0" src="plrecht.gif" width="52" height="40"></a></FONT>
    [SIZE="4"]
    Sei Realist, versuch das Unmögliche!
    [/SIZE]

  • Also den HTML-Code verstehst du?
    Dann ist es ja nur noch die halbe Arbeit ^^
    Also.. onmouseover heißt: "wenn der Mauszeiger auf das Element zeigt (drüber fährt)" onmouseout: "wenn der Mauszeiger das Element wieder verlässt"
    on_links_X steht für die Türen, die "aufgemacht" werden. Schaut man sich nun die Funktion mal genauer an entdeckt man zum einen etwas unnützliches (das NN3) und dann eine weitere Funktion mit dem Namen "on3_links_X(name);" Dann schaut man sich diese Funktion genauer an: document[name].src = eval(name + "_X.src"); Also, was sagt und das document[name] ist das Bild, wie man es eine Zeile unter der Map wiederfindet

    HTML-Quellcode

    1. IMG alt="LF 16, linke Fahrzeugseite" border=0
    2. height=285 name=link_links src="lf16/1342-Dateien/1342_links.JPG"
    3. useMap=#FrontPageMap0 width=381><a href="lf16-hinten.htm">
    Und dem wird halt ein neuer Bilderpfad zugewiesen und zwar versteckt der sich hinter der Variable, die sich aus "name" und "_X.src" ergibt. Die kannst du ja oben sehen.

    So fehlt nur noch onmouseout... Dort steht off('link_links'); Und das selbe Prozdere nochmal nur mit einem anderen Bild ;)
    Auf dem Abstellgleis sah man ihn liegen,
    Auf dem Abstellgleis zwischen Schwelle und Gestein,
    Auf dem Abstellgleis im strömenden Regen,
    Auf dem Abstellgleis allein.

  • Hi, ich bekomme das irgendwie nicht hin, will es mit einem Popup erledigen, also die Einbindung in das CMS.
    Dieses Popup hat dann folgenden Quelltext:

    HTML-Quellcode

    1. <html>
    2. <head>
    3. <title>Seite1</title>
    4. <meta name="author" content="Administrator">
    6. <SCRIPT language=JavaScript>
    7. var NN3 = false;
    8. link_vorne = new Image();
    9. link_vorne.src = "IMG_0014.jpg";
    10. link_vorne_1 = new Image();
    11. link_vorne_1.src = "IMG_0015.jpg";
    12. link_vorne_2 = new Image();
    13. link_vorne_2.src = "IMG_0016.jpg";
    16. function on3_vorne_1(name) {
    17. document[name].src = eval(name + "_1.src");
    18. }
    19. function on3_vorne_2(name) {
    20. document[name].src = eval(name + "_2.src");
    21. }
    22. NN3 = true;
    24. function on_vorne_1(name) {
    25. if (NN3) on3_vorne_1(name);
    26. }
    27. function on_vorne_2(name) {
    28. if (NN3) on3_vorne_2(name);
    29. }
    30. function off(name) {
    31. if (NN3) off3(name);
    32. }
    33. </SCRIPT>
    35. </head>
    37. <body text="#000000" bgcolor="#c0c0c0" link="#FF0000" alink="#FF0000" vlink="#FF0000">
    39. <MAP name=FPMap0>
    40. <AREA coords='115, 66, 147, 135'
    41. href="LINK ZUR VERGRÖßERUNG"
    42. onmouseout="off('link_vorne');"
    43. onmouseover="on_vorne_1('link_vorne');" shape="rect">
    44. <AREA coords='186, 188, 272, 257'
    45. href="LINK ZUR VERGRÖßERUNG"
    46. onmouseout="off('link_vorne');"
    47. onmouseover="on_vorne_2('link_vorne');" shape="rect">
    48. </MAP>
    49. <center><IMG alt="BESCHREIBUNG" border="3" height="299" src="IMG_0014.jpg" useMap='#FPMap0' width="448"></center>
    51. </body>
    53. </html>
    Alles anzeigen


    Mein Problem ist nun, das die Areas zwar verlinkt werden, aber der Mouseover-Bildwechsel-Effekt funktioniert nicht. Was kann ich da tun?
    [SIZE="4"]
    Sei Realist, versuch das Unmögliche!
    [/SIZE]

  • oh, okay,

    aber auch das Einfügen von:

    Quellcode

    1. function off3(name) {
    2. document[name].src = eval(name + ".src");
    3. }


    bringt nicht das erwünschte :(

    ich verzweifel hier :(

    HTML-Quellcode

    1. <html>
    2. <head>
    3. <title>Seite1</title>
    4. <meta name="author" content="Administrator">
    6. <SCRIPT language=JavaScript>
    7. var NN3 = false;
    8. link_vorne = new Image();
    9. link_vorne.src = "IMG_0014.jpg";
    10. link_vorne_1 = new Image();
    11. link_vorne_1.src = "IMG_0015.jpg";
    12. link_vorne_2 = new Image();
    13. link_vorne_2.src = "IMG_0016.jpg";
    16. function on3_vorne_1(name) {
    17. document[name].src = eval(name + "_1.src");
    18. }
    19. function on3_vorne_2(name) {
    20. document[name].src = eval(name + "_2.src");
    21. }
    22. function off3(name) {
    23. document[name].src = eval(name + ".src");
    24. }
    25. NN3 = true;
    27. function on_vorne_1(name) {
    28. if (NN3) on3_vorne_1(name);
    29. }
    30. function on_vorne_2(name) {
    31. if (NN3) on3_vorne_2(name);
    32. }
    33. function off(name) {
    34. if (NN3) off3(name);
    35. }
    36. </SCRIPT>
    38. </head>
    40. <body text="#000000" bgcolor="#c0c0c0" link="#FF0000" alink="#FF0000" vlink="#FF0000">
    42. <MAP name=FPMap0>
    43. <AREA coords='115, 66, 147, 135'
    44. href="LINK ZUR VERGRÖßERUNG"
    45. onmouseout="off('link_vorne');"
    46. onmouseover="on_vorne_1('link_vorne');" shape="rect">
    47. <AREA coords='186, 188, 272, 257'
    48. href="LINK ZUR VERGRÖßERUNG"
    49. onmouseout="off('link_vorne');"
    50. onmouseover="on_vorne_2('link_vorne');" shape="rect">
    51. </MAP>
    52. <center><IMG alt="BESCHREIBUNG" border="3" height="299" src="IMG_0014.jpg" useMap='#FPMap0' width="448"></center>
    54. </body>
    56. </html>
    Alles anzeigen
    [SIZE="4"]
    Sei Realist, versuch das Unmögliche!
    [/SIZE]