✔ Bild overlay mit Link bei mouseover

Also ich kann dir nur sagen, wie es bei mir: ich habe mit PHP angefangen und das vor sieben Jahren. In dieser Zeit habe ich mit einigen anderen Sprachen zu tun gehabt und fand, dass man sich in alle, basierend auf der ersten, reindenken konnte. Es gibt eben die drei Programmierparadigmen, aber ansonsten sind die meisten Sprachen hinsichtlich ihrer Sprachkonstrukte quasi gleich. Das Einzige, was sich unterscheidet, ist die Namensgebung.
 
……und noch mal ein dickes Danke!

Wobei ich jetzt irgendwas versemmelt habe… und bekomme ums verrecken nicht raus wie das lauffähig wird…

HTML: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Beschreibung der Seite</title>
<script language="JavaScript" src="jquery-1.8.0.min.js" type="text/javascript"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function() {
 
    $("#bild1").mouseover(function() {
        $("#m1").css("left", $("#bild1").offset().left);
        $("#m1").css("top", $("#bild1").offset().top);
        $("#m1").fadeIn(2000, function() {
        });
    });
    $("#bild2").mouseover(function() {
        $("#m2").css("left", $("#bild2").offset().left);
        $("#m2").css("top", $("#bild2").offset().top);
        $("#m2").fadeIn(2000, function() {
        });
    });
 
    $("#m1").mouseout(function() {
        $("#m1").fadeOut(2000, function() {
        });
    });
    $("#m2").mouseout(function() {
        $("#m2").fadeOut(2000, function() {
        });
    });
 
});
</script>
</head>
<body>

<img src="bild_1.png" width="100" height="100" style="border: 0px;"/>
<img src="bild_2.png" width="100" height="100" style="border: 0px;"/>
<div id="m1" style="display: none; width: 100px; height: 100px; border: 1px solid; position: absolute; background-color: #808080; z-index: 9;"><a href="http://www.tagesschau.de/">Tagesschau</a> </br></br>
  <a href="http://www.heise.de/newsticker/">Heise</a></div>
<div id="m2" style="display: none; width: 100px; height: 100px; border: 1px solid; position: absolute; background-color: #00FF00; z-index: 9;">  <a href="http://www.tagesschau.de/">Tagesschau</a> </br></br>
  <a href="http://www.heise.de/newsticker/">Heise</a></div>

</body>
</html>
Am HTML Code musst du dazu noch den Bildern jeweils eine eigene ID geben, im Beispiel ist es "bild1" und "bild2".
Zum Vergrößern anklicken....
Das verstehe ich nicht ganz, ich hab das mal gegoogelt finde aber nix zu Image ID und als ich die Bilder in ein Div mit der entsprechenden ID gepackt hab, sind sie verschwunden… ;o(

Kannst Du mich dazu noch mal erleuchten?
 
Zuletzt bearbeitet:
Es gibt eben die drei Programmierparadigmen
Zum Vergrößern anklicken....
hab ich auch mal gegoogelt, weil mir das erst mal nichts sagt, aber auch nichts Aussagekräftiges dazu gefunden.

Kannst Du noch mal etwas ausführen, was das genau bedeutet?

Das Einzige, was sich unterscheidet, ist die Namensgebung.
Zum Vergrößern anklicken....
Die Aussage macht mich zwar sehr hoffnungsvoll, ich denke allerdings man muss sich trotzdem jeweils rein fuchsen… sonst würde ich ja jetzt Javascript mehr oder weniger intuitiv verstehen…… stehe aber (zumindest momentan) etwas doof da…
 
So muss es aussehen:
HTML: 
<img id="bild1" src="bild_1.png" width="100" height="100" style="border: 0px;"/>
<img id="bild2" src="bild_2.png" width="100" height="100" style="border: 0px;"/>
<div id="m1" style="display: none; width: 100px; height: 100px; border: 1px solid; position: absolute; background-color: #808080; z-index: 9;">
	<a href="http://www.tagesschau.de/">Tagesschau</a>
	<br />
	<br />
	<a href="http://www.heise.de/newsticker/">Heise</a>
</div>
<div id="m2" style="display: none; width: 100px; height: 100px; border: 1px solid; position: absolute; background-color: #00FF00; z-index: 9;">
	<a href="http://www.tagesschau.de/">Tagesschau</a>
	<br />
	<br />
	<a href="http://www.heise.de/newsticker/">Heise</a>
</div>

Die ID ist beim ersten Bild <img id="bild1"..., so wie auch bei den DIVs einfach per id=.

Unabhängig davon aber eine große Bitte. Wenn du Code hier einstellst, dann setze diesen auch in die entsprechenden Code-Tags (siehe hier). Denn so wie es oben aussieht ist es kaum zu lesen.
 
Die ID ist beim ersten Bild <img id="bild1"..., so wie auch bei den DIVs einfach per id=.
Zum Vergrößern anklicken....
Hm…… ich habe den Eindruck ich denke gerade etwas kompliziert ;o)

dann setze diesen auch in die entsprechenden Code-Tags
Zum Vergrößern anklicken....

Hups, dachet hätte ich, hatte ich dann aber gar nicht mehr kontrolliert…… hatte falsch gepastet, sry ist korrigiert.


Und noch einmal an dieser Stelle. Vielen lieben Dank für die Hilfe! Das hat mir sehr weiter geholfen… um nicht zu sagen hätte ich alleine nicht geschafft und habe jetzt ziemlich genau das was ich eigentlich wollte.
 
So um den Code nocht etwas kürzer zu gestalten:

Javascript: 
$(document).ready(function() {

	$(".bild").mouseover(function() {
		if ($(this).attr("name") == "bild1") {
			over = "#m1";
		} else if ($(this).attr("name") == "bild2") {
			over = "#m2";
		}
		$(over).css("left", $(this).offset().left);
		$(over).css("top", $(this).offset().top);
		$(over).fadeIn(2000, function() {
		});
	});

	$("#m1, #m2").mouseout(function(e) {
		$(this).fadeOut(2000, function() {
		});
	});

});

Die Funktion für die DIVs wurde zusammengefasst indem einfach in den Funktionskopf die jew. Bezeichner durch Komma getrennt eingetragen wurden.

Die Funktion für die Bilder wurde zusammengefasst indem bei jedem Bild eine Klasse class= angegeben wurde (wie vorhin mit id=).

Mit this wird dann in jeder Funktion das aktuelle Bild oder DIV angesprochen!

Funktionieren tut die bisherige Version genauso, die Neue ist halt ein bisschen kürzer. Was dir besser gefällt musst du entscheiden.
 
Ich muss noch mal stören……
ich hatte ja gesagt das ich mit dem Ergebnis echt glücklich bin und auch die Frage ob ich mit CSS da normal ran gehen kann war geklärt.
Jetzt habe ich allerdings entdeckt (ich weiss nicht ob es die ganze Zeit schon so war) dass wenn ich mit der Maus über einen Link fahre, die Überblendung, wild aus- und einblendet… das ist natürlich unschön und ich weiss nicht warum dem so ist…

Kann ich ggf. vielleicht per PM nen Link zu der aktuellen Seite schicken?

Dank & Gruss
 
Zuletzt bearbeitet:
Ich hoffe das ist kein Spam wenn ich doppelt poste, aber es geht am Ende sonst unter, daher dachte ich lieber so…

Also ich bin jetzt soweit das es offenbar etwas mit dem Hover über einen Link zu tun hat, was beim JS zum Link hin nicht abgegrenzt ist (so reim ich es mir zusammen).
Denn wenn ich über einen Link fahre, kommt erst ein Fade-out und dann ein Fade-in, hat nen Augenblick gedauert bis ich das kapiert hatte.
 
Kleine Ursache, große Wirkung.

Das mouseout-Ereignis wird immer dann ausgelöst wenn der Mauszeiger nicht mehr über dem DIV ist und das passiert auch wenn man über einem Link ist.

Zum Glück gibt es aber auch noch das mouseleave-Ereignis und das wird nur ausgelöst wenn der DIV wirklich verlassen wird.

Mach also im Code aus allen mouseout einfach mouseleave und das Flackern ist weg.
 
Yesssss ;o)
super danke!

Und nun die (hoffentlich) wirklich letzte Frage.
Die Links in dem Overlay, reagieren nicht auf CSS Styles, also weder Farbgebung, noch Position etc.
Und ich hab mir jetzt schon den Ar.... wegeditiert, finde aber nicht was das verhindern könnte.

Hast Du da noch eine Idee warum das so ist bzw. was ich tun muss um das "stylen" zu können?

Dank und Gruss

Oh P.S. für die Ferndiagnose…
Im Stylesheet sieht das dann so aus (aus den Div-Styles hab ich das logischerweise rausgenommen):

HTML: 
#m1 {
	display: none; 
	width: 200px;
	height: 92px;
	border:0.5em solid #696969; 
	border-radius: 1em;
	position: absolute; 
	background-color: #808080; 
	z-index: 9;
HTML: 
#m1 a{
	color:##000000;
    font-size:1.4em;
	font-style: bold;
	text-align: center;
	text-decoration: underline;
}
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück