Archivlink: javarea.de Forum > JavaScript > suche mouseover-script
Vollständigen Link anzeigen: javarea.de Forum > JavaScript > suche mouseover-script

Pages: [1]
geschrieben von yulie am 23.03.2006 - 15:37
Hallo ,
ich suche ein script oder einen Tip wie das gehen könnte: bei mouseover auf eine Grafik sollen verschiedene links angezeigt werden, bei mouseout wieder die Grafik- ich dachte nicht, dass das so kompliziert ist(bin allerdings totaler Anfänger).
einen schönen Tag noch, Julia

geschrieben von Micha am 23.03.2006 - 17:04
Hallo,

was hast Du bisher versucht um beurteilen zu können, dass es so schwer ist? Vll steckt nur ein kleiner Denkfehler in Deiner bisherigen Überlegung...

Zum Thema:
Mach einen Bereich (DIV), in dem Du ein DIV mit Deinen Links(mousover) und ein IMAGE(mouseout) erzeugst. Mittels der CSS-Positionierung (position) kannst Du die Ausrichung der beiden Elemente unterschiedlich ausrichten/anzeigen.

Micha

geschrieben von okley am 23.03.2006 - 21:08
HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 
17: 
18: 
19: 
20: 
21: 
22: 
23: 
24: 
25: 
26: 
27: 
28: 
29: 
30: 
31: 
32: 
33: 
34: 
35: 
36: 
37: 
38: 
39: 
40: 
41: 
42: 
43: 
44: 
45: 
46: 
47: 
48: 
49: 
50: 
51: 
52: 
53: 
54: 
55: 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, http://www.pspad.com">
  <title></title>
  </head>
  <body>
    <style>
      .linkContainer{
        background: silver;
      }
      
      .showHide{
        width: 20px;
        height: 20px;
      }
      
      .linkContainer a{
        color: red;
        text-decoration: none;
      }
      
      #itemContainer{
        border: 2px solid brown;
        width: 200px;
      }
    </style>

            <script type="text/javascript">
            
            function showHide(elToShow, src){
              var el = document.getElementById(elToShow);
              var elToHide = document.getElementById(src);

              if(el!=null && el != "undefined"
                 && elToHide!=null && elToHide != "undefined")
              {
                elToHide.style.visibility = "hidden";
                el.style.visibility = "visible";
              }
            }
            
            </script>
    <div id="itemContainer" onmouseout="showHide('item','links')">
        <img class="showHide" alt="" id="item" src="./images.jpg" onmouseover="showHide('links', 'item');" />
        <div class="linkContainer" id="links">
          <a href="#">Link 1</a>
          <a href="#">Link 1</a>
          <a href="#">Link 1</a>
        </div>
    </div>

  </body>
</html>


Ich frage mich nur warum das so flackert

Aber ich denke vom Ansatz her sollte das so hinhauen ...

geschrieben von yulie am 25.03.2006 - 13:38
Vielen Dank erstmal-
bin auf dem Weg. Zu Michas Tip: hab ich gemacht, funktioniert bei mir nur einmal, dh, ich lege meine beiden Ebenen(nr1 und nr2) übereinander, dann schreibe ich <div id ="nr1" onMouseOver ="this.id='nr2'">, aber der Rückweg mit mouseout funktioniert nicht(da nr2 jetzt gleich nr1 ist?), brauche also eine Funktion- die Funktion von okley funktioniert bei mir nur halbwegs: ich kann die Ebenen nicht wirklich übereinanderlegen, dann funktionieren nämlich die Links nicht mehr....Jetzt habe ich mir überlegt, ob ich nicht eine einfache Funktion schreiben kann mit:
if(weiss nicht was hier jetzt reinmüsste){
nr1=nr2;
nr2=nr3;
nr3=nr1;
}ich finde bloss nicht raus , wie ich die Ebenen mit javascript anspreche: mit document.getElementById klappt bei mir nicht-hat da vieleicht jemand noch einen Tip? Gruß, Julia

geschrieben von Micha am 25.03.2006 - 13:56
Hallo Yulie oder Julia(?),

so ganz bin ich noch nicht schlau aus Deinem Versuch geworden; so habe ich es verstanden.

HTML-Quelltext
1: 

<div id="nr_1">Hier ist was genau drin?</div>


Mir ist leider noch nciht klar, wo sich das Bild befindet, so dass Du etwas puzzeln musst gegebenenfalls mit meinen Vorschlägen:

Du kannst mit getElementById zugreifen, wie Du es möchtest; solltest aber dies von "außen tun"
HTML-Quelltext
1: 

var myDIV = document.getElementById("nr_1");

Nun hast Du eine Referenz(?)[1] auf Dein Objekt erzeugt. Ich würde jedoch die ID nicht wieder ändern, da Du sie dann zerstörst und Dein DIV "nicht wieder findest". Gibt Deinem Knoten nun die Eigenschaften des EventHandlers mit:

HTML-Quelltext
1: 
2: 

myDIV.onmouseover = function() { window.alert("Mit der Maus drauf!"); return false; };
myDIV.onmouseout = function() { window.alert("Nun ist sie wieder runter von mir!"); return false; };


Statt der direkten verknüpfung mit der Methode, kannst Du auch eine "externe" Methode benutzen:

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 

function bar() {
  window.alert("foo");
  return false;
}
myDIV.onmouseover = bar;
//usw...


Liebe Grüße Micha

[1] Ich weiss atm nicht, ob Referenz die richtige Bezeichnung ist, korrigiert mich...

geschrieben von yulie am 26.03.2006 - 21:06
Hallo liebe Leute, vor allem natürlich Micha ( ich heiße Julia ,in echt) und 'okley'-
bin jetzt so weit, das ich das Problem definieren kann: alle scripts mit euren Vorschlägen ( dabei hab ich was gelernt, danke!) machen im Prinzip, was ich will, aber bloss bei einem DIV-element, ich möchte aber alle <a href>-Elemente zusammengefasst haben,also bei mouseover über die Grafik werden mehrere Links untereinander gezeigt,zwischen den Links darf kein mouseout passieren, nur wenn ich den Link-Bereich nach aussen(Norden, Süden, Osten,Westen) verlasse erscheint wieder die Grafik.Ich habe einen ewig langen Quelltext gesehen, den ich nicht verstehe, da passiert das glaub ich mit csaction und das javascript ist ausgelagert-vieleicht ist, was ich will, so wie ich es will( mehr mit Hammer und Nagel als mit Verstand, ausserdem als Dreisatz, nicht als drei Seiten langes Script)gar nicht möglich, aber ein heisser Tip wäre natürlich toll...
So, mal schauen ob ich noch in den Tatort reinkomme
Schönen Abend noch :-), Julia

geschrieben von Micha am 26.03.2006 - 21:53
Hallo Julia,

Deine Links werden also von diesem DIV gruppiert?

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 

<div id="Bereich">
  <a href="#">Link1</a>
  <a href="#">Link1</a>
  <a href="#">Link1</a>
  <a href="#">Link1</a>
</div>

an der _selben_ Stelle existiert im normalfall ein Bild (bei mouseover kommen die Links)?

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 

<div id="Bereich">
  <img src="meinBild.jpg" width="xxx" height="yyy" alt="ein Bild von mir">
  <a href="#">Link1</a>
  <a href="#">Link1</a>
  <a href="#">Link1</a>
  <a href="#">Link1</a>
</div>


Greife mit getElementById auf diese ID zu:

HTML-Quelltext
1: 
2: 
3: 
4: 
5: 
6: 
7: 
8: 
9: 
10: 
11: 
12: 
13: 
14: 
15: 
16: 

var meinDIV = document.getElementById("Bereich");
var meinBild = meinDIV.getElementsByTagName("img")[0];
var meineLinks =  meinDIV.getElementsByTagName("a");

//meinDIV.style.height = document.defaultView.getComputedStyle(meinDIV,"").getPropertyValue("height");
meinDIV.style.height = meinDIV.offsetHeight+"px";

function showLinks(anker, methode){
  for (var i=0; i<anker.length; i++){
    anker[i].style.display = methode;
  }
}

showLinks(meineLinks, "none")
meinDIV.onmouseover = function() { showLinks(meineLinks, "inline"); meinBild.style.display = "none"; return false; }
meinDIV.onmouseout = function() { showLinks(meineLinks, "none"); meinBild.style.display = "inline"; return false; }



Micha

geschrieben von yulie am 28.03.2006 - 21:14
so, jetzt hab ich was gefunden, das genau macht, was ich will, ich würd nur gerne wissen, ob an der Methode was auszuseztzen ist:
ich hab also eine Funktion, die DIVs per Statusabfrage anzeigt oder versteckt. Im ersten DIV ist meine Grafik und da erzeuge ich ein mouseover, so dass die Grafik versteckt wird und die zweite Ebene mit den Links wird sichtbar:

<div id ='nr1' onmouseover="showHide('nr1',0)"><img src ="bild.gif"></div>

unter der zweiten ebene liegt ein leere dritte ebene, die aber etwas grösser ist. Auf der zweite Ebene mit den Links gibt es gar kein Ereignis, dafür auf der dritten wieder ein mouseover, das aber auf der Seite wie ein mouseout aussieht, also so:

<div id ='nr2><a href ="#">link1</a><br><a href ="#">link2</a><br>usw..</div>
<div id ='nr3' onmouseover ="showHide('nr1',1)"></div>

Ich bin zufrieden mit dem Ergebnis,es kommt mir nur so dilletantisch vor, dass ich mich frage, ob das Probleme geben könnte..
Liebe Grüße, Julia

geschrieben von Micha am 28.03.2006 - 21:26
Hallo Julia,

Mir scheinen, das ein paar DIV's zuviel sind bzw. unnötig sind; aber wenn es geht und Du damit glücklich bist, ist das doch das angestrebte Ziel oder?

HTML-Quelltext
1: 

aber auf der Seite wie ein mouseout aussieht

Wenn man Dich so reden hört; scheinst Du doch die Sinnhaftigkeit des driiten Div's verstanden zu haben; es hat keinen. Ein anderes DIV (und Du brauchst nur eins; siehe mein Beispiel); kann diese onmouseover-Methode mit Hilfe eines onmouseout übernehmen.

Zu Deiner Funktion kann man nichts sagen, Du hast sie ja nicht gepostet ;)

Micha

geschrieben von yulie am 28.03.2006 - 22:05
mouseout funktioniert bei mir nicht, egal mit welcher funktion! da passiert gar nichts oder die Zeilen zwischen den Links reagieren, das sollen sie aber nicht- die Funktion die ich jetzt benutze ist nicht von mir-also einwandfrei(denke ich)! ( div_ref-style(id).visibility = stat?"visible":"hidden"; Naja, im Moment kann ich es nicht anders lösen, das 3. DIV hat hier die Funktion, das die Links stabil bleiben-aber ich hätts natürlich gerne sauberer-dazu werd ich mich aber wohl noch ein paar Tage mit Javascript beschäftigen müssen!Ich konnte deine Vorschläge leider nicht richtig zusammen puzzlen-versuch ich aber auch nochmal. Wenigstens hab ich jetzt eine zuverlässige Notlösung,
Bis dahin, Julia

geschrieben von Micha am 29.03.2006 - 09:54
Hallo Julia,

so lange Du Dich in schweigen hüllst, wie Du was versuchst, kann Dir sicher keiner helfen. Das ein onmouseout geht, sollte Dir

diese Beispielseite

zeigen.

Das geschilderte Problem, das "das die Links stabil bleiben" sollen, ist afaik berücksichtigt; das umliegende DIV muss eine Größe bekommen, die entweder der Bildgröße entspricht oder den Links. Das habe ich mit .offsetHeight gelöst; kann aber sinnvollerweise auch über CSS passieren.

Micha


Powered by: JBB v.2.0.4 Copyright ©2000-2006, www.javarea.de.