nicht angemeldet
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
Der Martin
Der Martin
Ich pröble an einer Seite herum, die vier überlappende Container mit jeweils einem Bild als Inhalt haben. Wenn der Besucher mit der Maus über das Bild in einem Container fährt, erscheint ein anderes Bild (onmouseover). Das klappt gut. Was ich nicht schaffe, ist, dass dieses Bild dann auch in den Vordergrund gerückt wird - und zwar so lange wie die Maus darauf zeigt. Ziel wäre also, dass jeder container, sobald er mit der Maus gehoovert wird, das Bild wechselt und in den Vordergrund rückt.
Danke für Ideen!
Ich würde jetzt mal pauschal sagen, das nix CSS, das Javascript.
Was du willst ist der z-index, der auch per javascript verändert werden kann.
@@Multi:
nuqneH
Ich würde jetzt mal pauschal sagen
Pauschalisiere nie!
das nix CSS, das Javascript.
Nein, das nix Javascript, das CSS.
Was du willst ist der z-index, der auch per javascript verändert werden kann.
Wozu? Der kann (und sollte!!) auch per CSS verändert werden.
Qapla'
Danke, Ihr Lieben, aber:
ich habe es mit z-index versucht (den gibts auch im css) und ich habe es mit .hover versucht, das Schwierige scheint der ständige Wechsel zu sein, den ich mit der "herumwandernden" maus erreichen will.
@@Pinki:
nuqneH
und ich habe es mit .hover versucht
Du meinst :hover.
das Schwierige scheint der ständige Wechsel zu sein, den ich mit der "herumwandernden" maus erreichen will.
Das Schwierige scheint die Beschreibung dessen zu sein, was du erreichen willst.
Glaskugel: Das ist den Vordergrund gebrachte Bild soll beim Verlassen im Vordergrund bleiben, wenn kein anderes Bild in den Vordergrund gebracht wird?
Qapla'
Glaskugel trifft es sehr schön. Gibt es diese Möglichkeit?
@@Pinki:
nuqneH
Glaskugel trifft es sehr schön. Gibt es diese Möglichkeit?
Mit JavaScript.
Nicht nur z-Index des betreffenden Elements setzen, sondern auch den der anderen Elemente zurücksetzen.
Qapla'
Das hab ich letztens in dem Thema gemacht ... http://forum.de.selfhtml.org/?t=203086&m=1372551
Da funktioniert es mit onklick und die z-index werden ins unentliche adiert,
bei jedem click um 1 (glaube nicht dass jemand 60 mio mal clicken wird bis es nicht mehr funzt xD
Gute Idee, aber mich stört, dass zuerst der container "game" angeklickt werden muss, damit alles startet. Und für nicht-Javanerinnen wie mich etwas kompliziert. Keine Idee für CSS?
Gruss, Pinki
@@Pinki:
nuqneH
Gute Idee
Naja, ich finde die Idee mit dem Zurücksetzen besser.
aber mich stört, dass zuerst der container "game" angeklickt werden muss, damit alles startet.
??
Und für nicht-Javanerinnen wie mich etwas kompliziert.
Für die bleibt es halt bei der CSS-Lösung.
Keine Idee für CSS?
Keine Chance.
Qapla'
Danke Euch allen. Die Idee muss sein :), also werde ich mich ein-Javanen.
Grüsse, Pinki
Danke Euch allen. Die Idee muss sein :), also werde ich mich ein-Javanen.
Grüsse, Pinki
Versuch mal mit -webkit-transform-origin-z
http://css-infos.net/properties/webkit.php
Lieber Tolonath,
habe mir einen Crashkurs in JavaScript angedeihen lassen und habe Deine elegante Idee mit dem Zähler irgendwann mal kapiert. Hier - falls es Dich interessiert - das, was ich für meine Webpage benötige (und in Deinem Skript geändert habe). Danke! Pinki
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
<!--
html, body {
background-color: black;
margin: 0;
padding: 0;
height: 100%; /* WICHTIG!!! STRECKT ANZEIGENBEREICH AUF 100% */
}
.game {
position:absolute; top:0%; right:80%; bottom:60%; left:0%;
background-color: orange;
}
.links {
position:absolute; top:10%; right:60%; bottom:20%; left:0%;
background-color: red;
}
.mitte {
position:absolute; top:0%; right:40%; bottom:30%; left:67px; background-color: blue; height: 381px; width: 159px;
}
.rechts {
position:absolute; top:0%; right:0%; bottom:20%; left:60%;
background-color: green;
}
.unten {
position:absolute; top:70%; right:0%; bottom:0%; left:0%;
background-color: yellow;
}
-->
</style>
<script language="JavaScript">
<!--
function vor (was) {
var ind=0;
var indo=0;
for (i=0; i<5;i++)
{ indo = eval(document.getElementsByTagName("div")[i].style.getPropertyValue("z-index"));
if (ind <= indo) {
ind = indo;
}
}
ind=ind+1;
document.getElementsByName(was)[0].style.zIndex = ind;
}
//-->
</script>
</head>
<div class="game" id="game" onMouseOver="vor('game')" name="game">Game</div>
<div class="links" id="links" onMouseOver="vor('links')" name="links">links</div>
<div class="mitte" id="mitte" onMouseOver="vor('mitte')" name="mitte">mitte</div>
<div class="rechts" id="rechts" onMouseOver="vor('rechts')" name="rechts">rechts</div>
<div class="unten" id="unten" onMouseOver="vor('unten')" name="unten">unten</div>
</body>
</html>
@@Pinki:
nuqneH
<style type="text/css">
<!--
HTML-Auskommentierung von CSS-Code ist unsinnig.
<script language="JavaScript">
<!--
HTML-Auskommentierung von JavaScript-Code ist unsinnig. Das @language-Attribut ist unsinnig. Dafür fehlt das @type-Attribut. [http://de.selfhtml.org/javascript/intro.htm#javascriptbereiche@title=SELFHTML]
Qapla'
Sorry, Gunnar,
mein Beitrag hat sich wieder oben eingesetzt, was die Chronologie stört . . .
Pinki
@@Pinki:
nuqneH
for (i=0; i<5;i++)
Schleifenindizes sollten <http://de.selfhtml.org/javascript/sprache/variablen.htm@title=lokale Variablen> sein.
{ indo = eval(document.getElementsByTagName("div")[i].style.getPropertyValue("z-index"));
Wozu eval()? Das ist meist böse und meist unnütz.
Mit getPropertyValue() werden wohl auch nicht alle Browser glücklich.
Und was wilst du damit eigentlich bezwecken? Der z-Index ist initial nicht gesetzt. Was also willst du auslesen?
document.getElementsByTagName("div")[i] ist auch äußest zweifelhaft. Bei späteren Markup-Änderungen sprichst du damit evtl. div-Elemente an, die du gar nicht ansprechen willst.
ind=ind+1;
Dafür könntest du allgemein kürzer schreiben ind += 1;, beim Hochzählen um 1 natürlich einfach ind++;
document.getElementsByName(was)[0].style.zIndex = ind;
<div class="game" id="game" onMouseOver="vor('game')" name="game">Game</div>
Nö, div-Elemente dürfen gar keine @name-Attribute haben. Sie haben doch IDs, du könntest sie mit document.getElementById() ansprechen.
Solltest du aber nicht, sondern die Referenz auf das Element als Parameter übergeben. Nicht
<div class="links" id="links" onMouseOver="vor('links')" name="links">links</div>
sondern <div id="links" onmouseover="[code lang=javascript]vor(this)">links</div>[/code]
In der Funktion vor(was) hast du dann in was schon die Referenz aufs Elementobjekt.
Die unsinnigen @class- und @name-Attribute hab ich gleich mit entsorgt. Klassen machen keinen Sinn, wenn ihnen nur jeweils ein Element angehört. In CSS gibt es auch ID-Selektoren. [CSS2 §5]
Qapla'
@Pinki,
nur als Tip ... nimm niemals das Code aus dem ersten Beitrag *g*
im verlauf des Themas hab ich mit hilfe der Jungs hier es verändert und verbessert
aber dennoch war es ne Art "Basteltisch" zum verstehen der grundlegenden Funktionen.
@Gunnar
Nö, div-Elemente dürfen gar keine @name-Attribute haben. Sie haben doch IDs, du könntest sie mit
document.getElementById()ansprechen.Solltest du aber nicht, sondern die Referenz auf das Element als Parameter übergeben. Nicht
<div class="links" id="links" onMouseOver="vor('links')" name="links">links</div>
sondern
<div id="links" onmouseover="[code lang=javascript]vor(this)">links</div>[/code]
Mit dem this würde es bei dieser funktion ein Problem geben,
denn am Ende dieser wird das z-index des divs überschrieben.
document.getElementsByName(was)[0].style.zIndex = ind;
Das "was" ergibt dabei den Namen des Attributs.
Wie wird das z-index im Falle von "this" geschrieben? ö.ö
Das "was" ergibt dabei den Namen des Attributs.
Wie wird das z-index im Falle von "this" geschrieben? ö.ö
so? ö.ö
function vor (was) ...
was.style.zIndex = ind; ...
<div id="links" onmouseover="vor(this)">links</div>
Gibt es hier noch etwas auszusetzen? ö.ö
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<style type="text/css">
#links {
width: 200px; height: 200px;
position:absolute; top:100px; left:100px;
background-color: red;
}
#rechts {
width: 200px; height: 200px;
position:absolute; top:200px; left:200px;
background-color: green;
}
</style>
<script language="JavaScript">
function vor (was) {
was = was;
document.getElementById('links').style.zIndex = "1";
document.getElementById('rechts').style.zIndex = "1";
was.style.zIndex = "2";
}
</script>
</head>
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
<div id="links" onclick="vor(this)"></div>
<div id="rechts" onclick="vor(this)"></div>
</body>
</html>
@@tolonath:
nuqneH
Gibt es hier noch etwas auszusetzen? ö.ö
Ja. Du hast einige bereits gegebene Hinweise nicht beachtet.
<title></title>
Da fehlt was.
was = was;
Was was was soll das?
document.getElementById('links').style.zIndex = "1";
document.getElementById('rechts').style.zIndex = "1";
Das skaliert nicht, wenn es mehrere Bilder werden.
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">
Darstellungsangaben per CSS, nicht mit misbilligten HTML-Attributen.
<div id="links" onclick="vor(this)"></div>
<div id="rechts" onclick="vor(this)"></div>
"links" und "rechts" sind sinnfreie ID-Bezeichner.
Qapla'
Irgendwie wolte vorhin FF-Fehlerkonsole "was" definiert haben, jetzt auf einmal nicht mehr.
Jetzt ist es sogar VALIDE *Freudesprünge macht*
Sollte ich demnächst Berlin besuchen *schielt auf den 5 Juni*
dann spendiere ich dir ein Bier *g*
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Felder des Grauens</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style type="text/css">
#feld1 {
width: 200px; height: 200px;
position:absolute; top:100px; left:100px;
background-color: red;
}
#feld2 {
width: 200px; height: 200px;
position:absolute; top:200px; left:200px;
background-color: green;
}
</style>
<script type="text/javascript">
function vor (was) {
var i;
for (i=1; i<3;i++)
{ var node=document.getElementById("feld"+i);
node.style.zIndex = "1";
}
was.style.zIndex = "2";
}
</script>
</head>
<body>
<div id="feld1" onmouseover="vor(this)"></div>
<div id="feld2" onmouseover="vor(this)"></div>
</body>
</html>
@@tolonath:
nuqneH
Sollte ich demnächst Berlin besuchen *schielt auf den 5 Juni*
dann spendiere ich dir ein Bier *g*
Thx.
function vor (was) {
Spendieren wir dem Parameter mal einen sinnvollen Namen: element bietet sich an, gern auch kurz elem.
Der Funktionsbezeichner deutsch? Ein Mischmasch aus Deutsch und Englisch ist vielleicht auch nicht die beste Idee.
(@Martin: Beachte hier die Groß-/Kleinschreibung! ;-))
var i;
Die Variablendeklaration muss nicht separat stehen; for (var i = …) ist die übliche Schreibweise.
for (i=1; i<3;i++)
{ var node=document.getElementById("feld"+i);
node.style.zIndex = "1";
}
Auch das skaliert nicht. Wenn noch mehr dieser Boxen hinzukommen, möchtest du dann jedesmal die Abbruchbedingung der Schleife im Script ändern?
Sinnvoll ist die Gruppierung der Boxen: ul bietet sich an, die div werden dann li.
(Dadurch wird auch das Stylesheet einfacher, da man für alle Boxen gleiche Eigenschaften nur einmal aufschreiben muss:
ul#foo li
{
width: 200px;
height: 200px;
position:absolute;
}
~~~)
Im JavaScript sucht man sich die Liste (entweder über ihre ID – einmalig, in Variable speichern – oder per `this.parentNode`{:.language-javascript}) und geht in dieser alle Kinder durch (egal, wieviele es nun gerade sind).
Aber wie schon [erwähnt](https://forum.selfhtml.org/?t=203274&m=1374165), kann man sich das auch sparen.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
Im JavaScript sucht man sich die Liste (entweder über ihre ID – einmalig, in Variable speichern – oder per
this.parentNode) und geht in dieser alle Kinder durch (egal, wieviele es nun gerade sind).
Darauf würde ich gerne noch eingehen, aber im mom zu viel Input für heute *g*
Aber wie schon erwähnt, kann man sich das auch sparen.
also ...
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Felder des Grauens</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
<style type="text/css">
#feld1 {
width: 200px; height: 200px;
position:absolute; top:100px; left:100px;
background-color: red;
}
#feld2 {
width: 200px; height: 200px;
position:absolute; top:200px; left:200px;
background-color: green;
}
#feld3 {
width: 200px; height: 200px;
position:absolute; top:100px; left:200px;
background-color: blue;
}
</style>
<script type="text/javascript">
zmerker = 0;
function anheben (element) {
if (zmerker != 0) {
zmerker.style.zIndex = 1;
}
zmerker = element;
element.style.zIndex = 2;
}
</script>
</head>
<body>
<div id="feld1" onmouseover="anheben(this)"></div>
<div id="feld2" onmouseover="anheben(this)"></div>
<div id="feld3" onmouseover="anheben(this)"></div>
</body>
</html>
Das JS hat jedoch einen Nachteil, der Natürlich je nach Bedarf auch gewollt sein kann.
Geht man von feld1(rot) zu feld3(blau) springt das feld1(rot) hinter das feld2(grün).
Daher dann die 2te JS mit der das vorige div in der Ebene bleibt
aus der es verlassen wurde.
<script type="text/javascript">
feld = 0;
function anheben (element) {
feld++;
element.style.zIndex = feld;
}
</script>
Dabei wird der z-index natürlich ins Endlose angehoben.
Unten ein Script bei dem es nicht mehr angehoben wird.
Ist das untere nicht zu kompliziert? ö.ö
<script type="text/javascript">
zelement = 0;
zmerker = Array (0);
function anheben (element)
{
if (zmerker[zmerker.length] != element && zmerker.length == 0 ) {
zmerker[0] = element;
element.style.zIndex = zmerker.length +1;
}
if (zmerker[zmerker.length] != element && zmerker.length != 0 ) {
for (var i=0; i<zmerker.length; i++) {
if (zmerker[i] == element) {
zelement = i; break;
} else { zelement = zmerker.length; }
}
for (var s=zelement; s<zmerker.length; ++s) {
if (typeof zmerker[s+1] != "undefined") {
zmerker[s] = zmerker[s+1];
var platz = zmerker[s];
platz.style.zIndex = s+1;
}
}
if (zelement == zmerker.length) {
zmerker[zmerker.length] = element;
element.style.zIndex = zmerker.length+1;
} else { zmerker[zmerker.length-1] = element;
element.style.zIndex = zmerker.length;
}
}
}
</script>
@@tolonath:
nuqneH
Dabei wird der z-index natürlich ins Endlose angehoben.
Kurze Überschlagsrechnung, wie oft ein Nutzer denn über die Elemente hovern müsste, bis die maximale Integerzahl erreicht ist, und wie lange das dauern würde …
Unten ein Script bei dem es nicht mehr angehoben wird.
Ist das untere nicht zu kompliziert? ö.ö
Vermutlich. Ich würde es dann so machen:
für alle Objekte
wenn z-Index(Objekt) > z-Index(gehovertes Objekt) dann z-Index(Objekt) -= 1
z-Index(gehovertes Objekt) = Anzahl der Objekte
Qapla'
Hallo,
document.getElementById('links').style.zIndex = "1";
document.getElementById('rechts').style.zIndex = "1";
Das skaliert nicht, wenn es mehrere Bilder werden.
außerdem ist es semantisch unpassend: Der z-Index ist kein String, sondern ein Zahlenwert.
Ciao,
Martin
@@Der Martin:
nuqneH
document.getElementById('links').style.zIndex = "1";
außerdem ist es semantisch unpassend: Der z-Index ist kein String, sondern ein Zahlenwert.
Nein, alle Werte sind in DOM (und damit in JavaScript) Strings. [DOM Level 2 Style] Dass dieser String in CSS einen Zahlenwert repräsentiert, ist JavaScript Schnuppe.
Man könnte auch einen Zahlenwert zuweisen; JavaScript erledigt die Typumwandlung.
document.getElementById('links').style.zIndex = 1;
alert(typeof document.getElementById('links').style.zIndex); // ergibt: string
Qapla'
Hallo,
[...] und habe Deine elegante Idee mit dem Zähler irgendwann mal kapiert.
und den Code leider einfach nur k_o_piert, ohne die Folgebeiträge zu lesen - und dabei hast du sämtliche Schwächen einfach mitkopiert.
Schade eigentlich.
Ciao,
Martin
Hallo,
Gute Idee, aber mich stört, dass zuerst der container "game" angeklickt werden muss, damit alles startet.
Du willst ja statt onclick den Event http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onmouseover@title=onmouseover verwenden.
Und für nicht-Javanerinnen wie mich etwas kompliziert.
So kompliziert auch wieder nicht, siehe Gunnars Vorschlag:
- setze den z-Index genau des Objektes, das den Event auslöst, hoch
- setze den z-Index der anderen Bilder zurück
Ein schöner Effekt. Der sollte Dir Motivation genug sein, Dir die dafür erforderlichen Grundlagen von Javascript anzueignen.
Freundliche Grüße
Vinzenz
@@Vinzenz Mai:
nuqneH
So kompliziert auch wieder nicht, siehe Gunnars Vorschlag:
- setze den z-Index genau des Objektes, das den Event auslöst, hoch
- setze den z-Index der anderen Bilder zurück
oder:
Qapla'
Mit JavaScript.
Interessant, dass du mir erst widersprichst und jetzt den gleichen Tip gibst.
@@Multi:
nuqneH
Mit JavaScript.
Interessant, dass du mir erst widersprichst und jetzt den gleichen Tip gibst.
Interessant daran ist, dass du den Tip gegeben hattest, bevor die Anforderungen bekannt waren.
Qapla'
Interessant daran ist, dass du den Tip gegeben hattest, bevor die Anforderungen bekannt waren.
Meine Glaskugel ist halt besser als deine *g*
Ich ging wirklich von Anfang an davon aus, dass der z-index dynaisch verändert werden soll, deshalb mein Vorschlag mit dem Javascript.
Es geht auch in css:
Idee: den "hover"-tag auf z-index= 1 setzen.
Vielen Dank für Eure spannenden Diskussionen,
Gruss, Pinki
body {
font: 100%/1.4 Verdana, Arial, Helvetica, sans-serif;
background: #000;
color: #000;
height: 10cm;
width: 10cm;
}
#boxblau {
background-color: #06C;
height: 6cm;
width: 6cm;
left: 2cm;
top: 2cm;
position: absolute;
}
#boxblau:hover {
background-color:#0FF;
z-index: 1;
}
#boxrot {
width: 5cm;
left: 5cm;
top: 5cm;
height: 5cm;
background-color:#F00;
position: absolute;
}
#boxrot:hover {
background-color:#F0C;
z-index: 1;
}
#boxgrün {
width: 4cm;
left: 5.45cm;
top: 2.805cm;
height: 4cm;
background-color: #6C3;
position: absolute;
}
#boxgrün:hover {
background-color: #3F0;
z-index: 1;
}
</style>
</head>
<body>
<div id="boxgrün">grüne Kiste
</div>
<div id="boxrot">rote Kiste
</div>
<div id="boxblau">blaue Kiste
</div>
</body>
</html>
Hi,
Es geht auch in css:
Idee: den "hover"-tag auf z-index= 1 setzen.
es gibt kein "hover"-Tag. Du meinst die Pseudoklasse :hover, bzw. die CSS-Eigenschaft z-index.
Es handelt sich also vermutlich um ein Stylesheet für die Bildschirmdarstellung. Für ein Print-Stylesheet würde :hover ebensowenig Sinn ergeben das dynamische Verändern des z-Index.
height: 10cm;
width: 10cm;
width: 4cm;
left: 5.45cm;
top: 2.805cm;
height: 4cm;
Aber Zentimeter ist für Bildschirmdarstellung eine völlig unsinnige Einheit.
So long,
Martin
Es geht auch in css:
Idee: den "hover"-tag auf z-index= 1 setzen.
Moin,
dann schau dir wenigstens dieses Webkid an.
-webkit-transition: width 1s;
# -moz-transition: width 1s;
# -o-transition: width 1s;
# transition: width 1s;
Fügst diese mit 1s in deinem Container und mit 4s in dem hover
dann werden die Bilder richtig cool auf und zu gehen.
Link zu der Liste aller Webkids hast du ja bereits *g*
Gibts auch tut dazu ...
http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-mimic-a-click-event-with-css/
Gruß
Tolonath
@@tolonath:
nuqneH
-webkit-transition: width 1s;
# -moz-transition: width 1s;
# -o-transition: width 1s;
# transition: width 1s;
Was haben die '#' im CSS-Code verloren?
> Fügst diese mit 1s in deinem Container und mit 4s in dem hover
> dann werden die Bilder richtig cool auf und zu gehen.
Das glaube ich nicht. Ich glaube eher, du hast 'transition' nicht richtig verstanden. [[CSS3-TRANSITIONS](http://www.w3.org/TR/css3-transitions/)]
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
Ja, sry, ich bin momentan irgend wie auf dem 3D Trip und alles muss sich ändern; die Größen, Farben etc.
Der TE möchte ja nur z-index geändert haben *g*
Quatsch, macht Spass. Ich danke Euch für Eure Anregungen und mache mich 'mal hinter Gunnars Link.
Pinki
@@tolonath:
nuqneH
Ja, sry, ich bin momentan irgend wie auf dem 3D Trip und alles muss sich ändern; die Größen, Farben etc.
Wenn sich alles ändern muss, solltest du nicht angeben, dass sich nur 'width' ändern soll.
Qapla'