Mouseover-Effekt, bloß wie?

[Mark914]

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

 

[Moorcock]

Schau mal hier.

Gruß
Moorcock

 

[Mark914]

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

 

[torben1]

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

 

[Mark914]

Das hört sich gut an. Aber ging mir einen Schritt zu schnell!

 

[Mark914]

Um meine Frage zu spezifizieren:

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

Da hapert es momentan noch!

 

[mschoening]

Hi,
am einfachsten geht es natürlich mit jQuery.

<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

 

[torben1]

Da mir jQuery. für dieses kleine Problem auch zu viel wäre nun mein Ansatz im Detail

CSS:

.meinDiv {visibility:hidden;}

JS:

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:

<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

 

[mschoening]

Da mir jQuery. für dieses kleine Problem auch zu viel wäre nun mein Ansatz im Detail

CSS:

.meinDiv {visibility:hidden;}

JS:

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:

<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

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.