✔ Bild overlay mit Link bei mouseover

Joe Public · 10. März 2013

Hallo,

ich möchte gerne meiner Homepage etwas schmackes geben.
Dabei bin ich auf die Idee gekommen, dass ich für Referenzen, gerne ein Bilderraster (3x3 o.ä.) einbauen möchte und dann, wenn man über eines der Bilder mit der Maus fährt, ein overlay kommt (in je nach Thema anderen Farben, vlt. einfach ein anderes Bild?) auf dem aber klickbare Links liegen sollen.
Also so etwas wie "Website" "sonstiges" usw., sprich Textlinks.

Ich suche jetzt schon einige Stunden und entweder gibt es da nichts in der Art (glaub ich aber nicht) oder ich kenne nicht die jeweiligen Bezeichnungen, so dass ich die aneinander gehängt in eine Suchmaschine eingeben kann…

Kann mir bitte jemand weiter helfen?

tombe · 10. März 2013

Sind nur 2 Bilder und ist auch sonst sicher noch ausbaufähig aber du kannst ja mal schauen ob das deiner Vorstellung zumindest in etwa entspricht:

Javascript:

<script language="javascript" type="text/javascript">
function m_show(img, pos_x, pos_y){
	document.getElementById("m" + img).style.display = "block";
	document.getElementById("m" + img).style.left = pos_x;
	document.getElementById("m" + img).style.top = pos_y;
}

function m_hide(img){
	document.getElementById("m" + img).style.display = "none";
}
</script>

HTML:

<img src="1.png" width="100" height="100" style="border: 0px;" onmouseover="m_show(1, this.offsetLeft, this.offsetTop)" />
<img src="2.png" width="100" height="100" style="border: 0px;" onmouseover="m_show(2, this.offsetLeft, this.offsetTop)" />
<div id="m1" style="display: none; width: 100px; height: 100px; border: 1px solid; position: absolute; background-color: #808080; z-index: 9;" onmouseout="m_hide(1)">Hier kommen die Links des ersten Men&uuml;s rein</div>
<div id="m2" style="display: none; width: 100px; height: 100px; border: 1px solid; position: absolute; background-color: #00FF00; z-index: 9;" onmouseout="m_hide(2)">Hier kommen die Links des zweiten Men&uuml;s rein</div>

Joe Public · 10. März 2013

wow… und das mit so wenigen Zeilen Code……
prinzipiell ist das ziemlich genau das was ich möchte…… aaaaaaber ;o)
das zweite (overlay) Objekt sollte am besten auch ein Bild sein (ich weiss nicht ob ich das damit auch könnte) und noch viel wichtiger, es sollte immer über dem jeweiligen Bild eingeblendet werden… also bild1 bekommt ein overlay, das aber die selben Dimensionen etc. wie bild1 hat und dieses dadurch verdeckt…… ich weiss nicht wie ich es schriftlich besser erklären soll… Wenn ich zwei Spielkarten habe, dann sieht man zunächst karte1, wenn ich diese berühre, rutscht karte2 darüber und hat links etc……
doofes Bild aber so ist es glaube ich am plastischsten…

Was ich oben noch nicht gesagt habe… vielen lieben Dank!

tombe · 10. März 2013

Wenn das "Overlay-Objekt" ein Bild ist, kannst du dort aber keine Textlinks unterbringen. Das wolltest du oben noch!

Was du machen könntest wäre via CSS ein Hintergrundbild einzufügen und die Links dann darüberlegen.

Wenn es wirklich ein zweites Bild sein soll, dann ersetze im obigen Beispiel einfach die DIVs durch das entsprechende Bild.

Was die gleiche Größe und jeweilige Position angeht, das ist oben ja auch schon der Fall!

Joe Public · 10. März 2013

Wenn das "Overlay-Objekt" ein Bild ist, kannst du dort aber keine Textlinks unterbringen.

Ah, ok das wusste ich nicht… ich kann das natürlich genau so mit farbigen Boxen machen… Da hast Du schon recht.

Was die gleiche Größe und jeweilige Position angeht, das ist oben ja auch schon der Fall!

Öhm, nö… s.h.

Bildschirmfoto 2013-03-10 um 17.29.21.png

Ich paste mal den Code von der "Seite", kann natürlich auch sein das ich da handwerklich/geistig was verzockt habe…
Ich habe alles möglichst minimalistisch gehalten, aber das sollte ja nicht schaden und kann später beliebig verändert werden, ging ja zunächst nur um den Code von Dir zu testen.

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" type="text/javascript">
function m_show(img, pos_x, pos_y){
    document.getElementById("m" + img).style.display = "block";
    document.getElementById("m" + img).style.left = pos_x;
    document.getElementById("m" + img).style.top = pos_y;
}
 
function m_hide(img){
    document.getElementById("m" + img).style.display = "none";
}
</script>
</head>
<body>

<img src="bild_1.png" width="100" height="100" style="border: 0px;" onmouseover="m_show(1, this.offsetLeft, this.offsetTop)" />
<img src="bild_2.png" width="100" height="100" style="border: 0px;" onmouseover="m_show(2, this.offsetLeft, this.offsetTop)" />
<div id="m1" style="display: none; width: 100px; height: 100px; border: 1px solid; position: absolute; background-color: #808080; z-index: 9;" onmouseout="m_hide(1)">href</div>
<div id="m2" style="display: none; width: 100px; height: 100px; border: 1px solid; position: absolute; background-color: #00FF00; z-index: 9;" onmouseout="m_hide(2)">Hier kommen die Links des zweiten Men&uuml;s rein</div>

</body>
</html>

tombe · 11. März 2013

Sorry ich habe es mir wieder zu einfach gemacht und nur in der Vorschau meines Editors getestet, dieser nimmt wohl die CSS Angaben nicht ganz so genau.

Javascript:

document.getElementById("m" + img).style.left = pos_x + "px";
document.getElementById("m" + img).style.top = pos_y + "px";

Hänge an die Positionsangaben einfach noch "PX" hinten dran und es sollte klappen.

NACHTRAG: Wenn du ein Bild einsetzen möchtest welches mehrere Links beinhalten soll, könntest du das Bild als Image Map gestalten!

Joe Public · 11. März 2013

Hänge an die Positionsangaben einfach noch "PX" hinten dran und es sollte klappen.

Läuft, super vielen Dank!

Den Rest (also optisch) kann ich ja via CSS steuern, korrekt? Das hat ja keine Auswirkung auf die Funktionalität…
Das einzige was ich mir jetzt noch wünschen würde, wäre dass das ein- und ausblenden "weicher" läuft. Aber wahrscheinlich ist dass dann ein höherer Aufwand und man muss Frameworks einbinden (was das ganze wohl verlangsamt)…… also reine Spekulation… falls das wieder nur eine Zeile Code ist und Du die Muse hättest, fänd ich das noch einen tollen Effekt.

Wenn du ein Bild einsetzen möchtest welches mehrere Links beinhalten soll, könntest du das Bild als Image Map gestalten!

Das käme aber nur in Frage wenn ich tatsächlich eine Grafik zum "drüberlegen" nutzen würde, oder? Im Moment nutze ich ja einfach farbige Kästen die ich an das entsprechende Projekt/Referenz anpassen kann… ich finde das mittlerweile ehrlich gesagt sogar reizvoller…

tombe · 11. März 2013

Richtig, die Optik kannst du mit CSS gestalten wie du es möchtest.

Was das "weiche" ein- und ausblenden angeht das müsstest du dann wohl mit jQuery arbeiten! Die Frage ist da halt ob du das bereits hast bzw. ob du es dir "installieren" willst.

Image Map brauchst du nur wenn du mit einem zusätzliche Bild arbeiten willst.

Joe Public · 11. März 2013

Was das "weiche" ein- und ausblenden angeht das müsstest du dann wohl mit jQuery arbeiten!

Also auf dem Server habe ich schon "jquery-1.8.0.min.js" liegen, da das für eine andere Komponente genutzt wird (wird schwer zu erklären)…
Ich weiss das wohl zu "importieren" aber wie ich dann damit den Effekt mache… ist wieder (für mich) kryptisches JS…

Mal ganz anders gefragt… ich darf wohl langsam behaupten das ich Java programmieren kann… also nicht Fortgeschritten, aber das was man so braucht, kann ich mittlerweile. Gibt es eine (einfache) Möglichkeit, das mein Java Wissen mir bei JavaScript etwas bringt und ich ggf. selbst was basteln und vor allem verstehen kann was ich da tue? Also mir ist klar das die Namensähnlichkeit eher Zufall als Verwandtschaft ist, das war es dann aber auch schon was ich so an Gemeinsamkeiten kenne…

tombe · 11. März 2013

So dann hier eine jQuery Lösung:

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() {
		});
	});

});

Am HTML Code musst du dazu noch den Bildern jeweils eine eigene ID geben, im Beispiel ist es "bild1" und "bild2".

Die Dauer des ein- und ausblenden kannst du durch die Zahl steuern die angegeben ist (2000). Je niedriger der Wert desto schneller geht es.

Bin in Sachen jQuery nicht so wirklich fit, deshalb denke ich das man das auch noch einfacher lösen kann und nicht für jedes Bild/Menü eine eigene Funktion schreiben muss.

Den bisherigen Javascript Code kannst du dann natürlich komplett löschen und die onmouseover-/onmouseout-Aufrufe natürlich auch!

Java und Javascript hat eigentlich gar nichts miteinander zu tun.
Wobei ich mich leider mit Java auch gar nicht auskenne und somit keine wirkliche Aussage machen kann wo es eventuell zufällige Übereinstimmungen geben könnte.

✔ Bild overlay mit Link bei mouseover

Joe Public

Mitglied

tombe

Erfahrenes Mitglied

Joe Public

Mitglied

tombe

Erfahrenes Mitglied

Joe Public

Mitglied

tombe

Erfahrenes Mitglied

Joe Public

Mitglied

tombe

Erfahrenes Mitglied

Joe Public

Mitglied

tombe

Erfahrenes Mitglied

Neue Beiträge