1. Diese Seite verwendet Cookies. Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies. Weitere Informationen

Mouseover-Effekt, bloß wie?

Dieses Thema im Forum "Web-Programmierung" wurde erstellt von Mark914, 26.01.09.

  1. Mark914

    Mark914 Boskoop

    Dabei seit:
    04.10.06
    Beiträge:
    41
    Hallo!

    Ich brauch für meine Homepage einen Mouseover-Effekt, doch ich weiß nicht recht was ich machen muss.

    Ich habe bisher Mouseover-Effekte doch meistens nur für Button oder Bilder, die deutlich Angezeigt werden, wenn man mit der Maus über das Bild geht.

    Nun möchte ich einen Mouseover-Effekt erstellen, ohne dass ich einen Platzhalter habe.

    Ich stelle mir dass so vor:
    Ich gehe mit der Maus über ein kleines Bild und an einer anderen Stelle soll dann das Bild in groß erscheinen. Gehe ich mit der Maus über ein anderes kleines Bild, so soll das Bild erscheinen. Wenn ich jedoch mit der Maus gar kein Bild "berühre" dann soll auch nichts angezeigt werden.

    Ist das Möglich, gibt es so einen Mouseover-Effekt? Und wenn ja, wäre es super nett, wenn Ihr mir den Html-Befehl aufgeben könntet.

    Vielen Dank und beste Grüße,

    Mark
     
  2. Moorcock

    Moorcock Becks Apfel (Emstaler Champagner)

    Dabei seit:
    27.02.07
    Beiträge:
    332
    Schau mal hier.

    Gruß
    Moorcock
     
  3. Mark914

    Mark914 Boskoop

    Dabei seit:
    04.10.06
    Beiträge:
    41
    Danke hat geklappt!


    Nun hab ich eine neue Frage:

    Ich möchte gerne einen Mouse-over Effekt und dass ein bestimmter Text an einer anderen Stelle erscheint.

    Es soll ein Lebenslauf werden:

    Also Mouse-Over Bild (Person) --> (Text) Stationen im Leben der Person.

    Der Text soll an einer bestimmten Stelle erscheinen. Und dort bleiben.

    Gibt es so einen Befehl?

    Grüße,

    Mark
     
  4. torben1

    torben1 Süsser Pfaffenapfel

    Dabei seit:
    05.08.08
    Beiträge:
    661
    Wenn ich Dich richtig verstanden habe:

    Erstelle einen Layer (Div-Container), positioniere ihn, stelle ihn per CSS auf "visibility:hidden;". Dann kannst Du ihn per JS auf "visibility:visible;" stellen.

    Fertig

    Torben
     
  5. Mark914

    Mark914 Boskoop

    Dabei seit:
    04.10.06
    Beiträge:
    41
    Das hört sich gut an. Aber ging mir einen Schritt zu schnell!
     
  6. Mark914

    Mark914 Boskoop

    Dabei seit:
    04.10.06
    Beiträge:
    41
    Um meine Frage zu spezifizieren:

    Wie setze ich den Div Container dann wieder per JS auf "visibility:visible;"

    Da hapert es momentan noch!
     
  7. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    Hi,
    am einfachsten geht es natürlich mit jQuery.

    Code:
    <style>
    	.myImage {
    		background: red;
    		height: 50px;
    		width: 50px;
    	}
    	
    	img {
    		display: block;
    		height: 50px;
    		width: 50px;
    	}
    </style>
    
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" type="text/javascript"></script>
    
    <script>
    $(document).ready(function() {
    	$('div.myImage').mouseover(function() {
    		$('div.myImage img').css("visibility", "visible");
    	});
    	
    	$('div.myImage').mouseout(function() {
    		$('div.myImage img').css("visibility", "hidden");
    	});
    });
    </script>
    
    <div class="myImage">
    	<img src="#" style="visibility: hidden;" />
    </div>
    
    P.S: Ich würde jQuery aber nicht nur für diese eine Anwendung laden.

    LG,
    Max
     
  8. torben1

    torben1 Süsser Pfaffenapfel

    Dabei seit:
    05.08.08
    Beiträge:
    661
    Da mir jQuery. für dieses kleine Problem auch zu viel wäre nun mein Ansatz im Detail

    CSS:
    Code:
    .meinDiv {visibility:hidden;}
    
    JS:
    Code:
    function wechselAn (param)
      {
      var knoten = document.getElementById(param);
      knoten.style.visibility = "visible";
      }
    function wechselAus (param)
      {
      var knoten = document.getElementById(param);
      knoten.style.visibility = "hidden";
      }
    
    HTML:
    Code:
    <div id="meinDiv"> Text im Div </div>
    <img src="meinBild" alt="Mein Bild" id="meinBild" onMouseOver="javascript:wechselAn('meinDiv');" onMouseOut="javascript:wechselAus('meinDiv');" />
    
    So sollte es funktionieren.

    Gruß

    Torben
     
  9. mschoening

    mschoening Gelbe Schleswiger Reinette

    Dabei seit:
    21.02.07
    Beiträge:
    1.764
    Yo so ist es besser ;) abgesehen davon, dass du jedem Bild jetzt eine ID geben musst, und dazu eine unterschiedliche!

    Edit: Das klang vielleicht ironisch aber ich meine das durchaus ernst. Blöde Satzstellung von mir! Es ist besser wenn du jQquery nicht für etwas anderes brauchst.
     
    #9 mschoening, 28.01.09
    Zuletzt bearbeitet: 28.01.09

Diese Seite empfehlen