nicht angemeldet
onclick-event vererben: Probleme mit div bzw. mit IE
Gunnar Bittersmann
StruppiHallo!
Hab mich hier an einem Konstrukt versucht, dass meine Fotos blättert; VOR bei Klick rechte Bildhälfte und rechts daneben und RÜCK bei Klick linke Bildhälfte und links daneben. Dazu hab ich zwei divs mit je einem onclick nebeneinander gesetzt.
Leider kommt der IE mit dem "margin-right: -100%" der Grafik nicht zurecht und setzt sie nicht schön mittig wie es FF und Safari tun ;-(
Wie könnte ich das lösen???
Danke!
Jürgen
div#balken_links {
width: 50%;
height: 400px;
text-align: center;
cursor: pointer;
background-color: ff0000;
float: left;
}
div#balken_links img{
margin-right: -100%;
}
div#balken_rechts {
width: 50%;
height: 400px;
cursor: pointer;
background-color: 0000ff;
float: left;
}
<div id="balken_links" onclick="previmg();">
<img alt="" name="img" src="fotos/hochzeit1/01.jpg">
</div>
<div id="balken_rechts" onclick="nextimg();">
</div>
-
WEITERES Problem!
In FF und Safari klappts wie gewünscht, dass ich schlicht DURCH das Foto den onklick des jeweiligen div auslösen kann wenn ich an der jeweiligen Stelle klicke.
Im IE allerdings ragt das Bild durch margin: -100% wie (fast) gewünscht über das rechte div drüber, ein klick AUF das Foto - auch ganz rechts über dem rechten div - löst das onclick des linken div aus, anscheinend, weil dort das Foto den Klick "hinvererbt".
Mist ...
-
Om nah hoo pez nyeetz, Jürgen!
Was hältst du denn davon, die Grafiken einfach zu zerlegen, dem umgebenden Element (ggf. body)
text-align: center;zu verpassen und den Teilgrafiken die onklicks zu verpassen?Matthias
--
-
Om nah hoo pez nyeetz, Jürgen!
Was hältst du denn davon, die Grafiken einfach zu zerlegen, dem umgebenden Element (ggf. body)
text-align: center;zu verpassen und den Teilgrafiken die onklicks zu verpassen?Hi Matthias!
Das wäre für mich Laien vom Verständnis her sicher das einfachste und sofort anwendbar aber ich befürchte, dass bei häufiger Foto-Fluktuation das häufige Zerteilen der Fotos nervt. Aber es wäre eine Überlegung wert da ich da ein recht einfaches HTML- und JS-Konstrukt beibehalten könnte. Gibt´s sonst Bedenken bei so einer Lösung? Etwa holpriger Seitenaufbau mit halben Fotos bei langsamen Verbindungen oder so?
Danke erstmal!
(Muss noch die anderen Vorschläge verdauen - die überfordern mich etwas ...)
-
Om nah hoo pez nyeetz, Jürgen!
Das wäre für mich Laien vom Verständnis her sicher das einfachste
Da du ja links und rechts des Bildes auch maus-sensitive Bereiche haben möchtest, halte ich meinen zweiten Vorschlag mit Chris' Verbesserungen für einen guten Kompromis. Du hättest dann allerdings für jedes Bild ein neues Dokument, könntest aber im Gegenzug auf Javascript verzichten.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1"> <title>Titel</title> <style type="text/css"> html, body {margin: 0; padding: 0;} #zurueck, #vor { width: 50%; background-color: red; display: block; text-decoration: none;} #zurueck {float: left; text-align:right;} #vor {text-align:left; overflow: hidden;} a img {border: none;} </style> </head> <body> <a id="zurueck" href="foo"><img src="bla.png" alt="bild"></a> <a id="vor" href="bar"><img src="bla.png" alt="bild"></a> </body> </html>Mit den einzelnen HTML-Dateien hättest du auch gleichzeitig das Problem des ersten und letzten Bildes gelöst. Aber es bedeutet auch Aufwand mehrere HTML-Dokumente zu pflegen, wenn du sie nicht dynamisch erzeugen kannst.
Denkbar wäre auch, die Bilder in den Hintergrund verschwinden zu lassen, dann bräuchtest du wieder nur ein Dokument ... allerdings dann wieder Javascript zum dauerhaften Ändern der background-position-Eigenschaft oder der Klassenzugehörigkeit.
Es ist allerdings immer besser, so wenig wie möglich Ressourcen anzufordern. Das würde wieder gegen das Teilen des Bildes sprechen.
Matthias
--
-
@@Matthias Apsel:
nuqneH
Da du ja links und rechts des Bildes auch maus-sensitive Bereiche haben möchtest, halte ich meinen zweiten Vorschlag mit Chris' Verbesserungen für einen guten Kompromis.
Ich nicht.
<a id="zurueck" href="foo"><img src="bla.png" alt="bild"></a>
<a id="vor" href="bar"><img src="bla.png" alt="bild"></a>Warum
<a><img/></a><a><img/></a>? Es geht doch mit<img/><a/><a/>, wenn die 'a'-Elemente auf dem 'img' positioniert werden.Es ist allerdings immer besser, so wenig wie möglich Ressourcen anzufordern. Das würde wieder gegen das Teilen des Bildes sprechen.
Nicht nur das. Es macht auch Aufwand.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)
-
-
-
-
Om nah hoo pez nyeetz, Jürgen!
Damit auch der gesamte Bereich rechts und links des geteilten Fotos auf die Onklicks reagieren kann, hilft folgendes Konstrukt.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1"> <title>Titel</title> <style type="text/css"> html, body {margin: 0; padding: 0;} #links, #rechts { width: 50%; background-color: red;} #links {float: left; text-align:right;} #rechts {text-align:left; overflow: hidden;} </style> </head> <body> <div id="links"><img src="bla.png" alt="bild"></div> <div id="rechts"><img src="bla.png" alt="bild"></div> </body> </html>Für gewöhnlich sind links und rechts schlechte Bezeichner, ich denke aber, hier durchaus vernünftig.
Event-Handler sollten genau wie inline-CSS aus dem Quelltext verschwinden. Da gibts bei molily ein interessantes Tutorial.
Matthias
--
-
Hi,
Für gewöhnlich sind links und rechts schlechte Bezeichner, ich denke aber, hier durchaus vernünftig.
Die Elemente sind zum Blättern gedacht, also wäre vor/zurueck, prev/next o.ä. geeigneter.
Und statt DIVs Links zu nehmen, die auch bei deaktiviertem JavaScript auf das nächste/vorherige Bild *verlinken* können, wäre auch angebracht.
MfG ChrisB
--
RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?-
Om nah hoo pez nyeetz, ChrisB!
berechtigte Einwände.
Matthias
--
-
-
-
-
@@Jürgen:
nuqneH
Da fällt auf, dass die clickbaren Bereiche links und rechts vom Bild nicht so hoch sind wie das Bild. Nicht nutzerfereundlich ist auch, dass der Mauscursor beim ersten und letzten Bild eine Funktionalität signalisiert, die überhaupt nicht vorhanden ist: Beim ersten Bild gibt es kein Zurück, beim letzten kein Vor.
Die bestehende Funktionalität könntest du auch einfacher haben, indem du einfach einen clickbaren Bereich über die gesamte Breite vorsiehst und beim Click die Mausposition abfragst. Linke Hälte heißt zurück, rechte heißt vorwärts:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>TEST</title> <style> [code lang=css]figure#prevnextimg { cursor: pointer; display: block; width: 100%; } figure#prevnextimg img { display: block; margin: auto; }</style>
</head>
<body>
<figure id="prevnextimg"><img src="foo.jpg"/></figure>
<script>//<![CDATA[ document.getElementById("prevnextimg").addEventListener("click", prevnextimg, false); function prevnextimg(e) { if (e.clientX < window.innerWidth/2) previmg(); else nextimg(); } function previmg() { alert("previmg"); // zur Demonstation } function nextimg() { alert("nextimg"); // zur Demonstation } //]]></script>
</body>
</html>[/code]Die Ergänzungen für IE überlasse ich dir. Molily hilft dabei: http://molily.de/js/event-handling-objekt.html, http://molily.de/js/event-handling-fortgeschritten.html.
Sinnvoller dürfte aber sein, zur Verlinkung wirklich 'a'-Elemente vorzusehen:
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <title>TEST</title> <style> [code lang=css]figure#prevnext { display: block; position: relative; width: 100%; } figure#prevnext img { display: block; margin: auto; } figure#prevnext a { height: 100%; position: absolute; top: 0; width: 50%; } figure#prevnext a#prev { left: 0; } figure#prevnext a#next { right: 0; }</style>
</head>
<body>
<figure id="prevnext">
<img src="foo.jpg"/>
<a id="prev"></a>
<a id="next"></a>
</figure>
<script>document.getElementById("prevnext").addEventListener("click", prevnextimg, false); function prevnextimg(e) { switch (e.target.id) { case "prev": previmg(); break; case "next": nextimg(); break; } } function previmg() { alert("previmg"); // zur Demonstation } function nextimg() { alert("nextimg"); // zur Demonstation }</script>
</body>
</html>[/code]Die Ergänzungen für IE überlasse ich wieder dir.
Die 'a'-Elemente könnten nun (wie ChrisB schon sagte) per @href auf andere Ressourcen verlinken; '
return false;' in den jeweiligen Funktionen verhindert das Folgen der Links bei aktiviertem JavaScript.Beim ersten Bild sollte kein Link "prev" und beim letzten kein Link "next" vorhanden sein.
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
Da fällt auf, dass die clickbaren Bereiche links und rechts vom Bild nicht so hoch sind wie das Bild.
Ist nur für die Demo, wird jedenfalls Grafikhöhe haben.
Nicht nutzerfereundlich ist auch, dass der Mauscursor beim ersten und letzten Bild eine Funktionalität signalisiert, die überhaupt nicht vorhanden ist: Beim ersten Bild gibt es kein Zurück, beim letzten kein Vor.
Daran bin ich bis dato gescheitert, daran mach ich mich aber nach der Lösung dieses Problems ... ;-)
Die bestehende Funktionalität könntest du auch einfacher haben, indem du einfach einen clickbaren Bereich über die gesamte Breite vorsiehst und beim Click die Mausposition abfragst. Linke Hälte heißt zurück, rechte heißt vorwärts:
Vielen Dank für Deine Mühe Gunnar!
Den Code muss ich erst - wie immer - durchackern und dann hoffentlich halbwegs verstehen. Das Prinzip ist super, wusste nicht dass es sowas gibt ...Danke vorerst!
-
Die bestehende Funktionalität könntest du auch einfacher haben, indem du einfach einen clickbaren Bereich über die gesamte Breite vorsiehst und beim Click die Mausposition abfragst. Linke Hälte heißt zurück, rechte heißt vorwärts:
Hab ich HIER umgesetzt - gefällt mir hervorragend!
Die Ergänzungen für IE überlasse ich dir.
da dies ein völlig anderes/neues Thema ist bin ich so frei und öffne einen neuen JS-Thread dazu. Ich hoffe, das ist in Ordnung!
LG, Jürgen
-
@@Jürgen:
nuqneH
Die Ergänzungen für IE überlasse ich dir.
da dies ein völlig anderes/neues Thema ist bin ich so frei und öffne einen neuen JS-Thread dazu. Ich hoffe, das ist in Ordnung!Grenzwertig.
Da die nötigen Hinweise aber schon in diesem Thread kamen, bleiben wir doch besser hier.
Leis dir nochmals die verlinkten Stellen in molilys JavaScript-Einführung durch!
document.getElementById("balken").attachEvent(click, prevnextimg);Welchen Wert hat die Variable
click?if (e.clientX < document.documentElement.clientWidth/2)Welchen Wert hat
eim IE?Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
document.getElementById("balken").attachEvent(click, prevnextimg);Welchen Wert hat die Variable
click?if (e.clientX < document.documentElement.clientWidth/2)Welchen Wert hat
eim IE?Sorry, ich hab einiges versucht, aber irgendwo hakt´s und ich hab keinen Schimmer was (alles) ich da wahrscheinlich völlig falsch codiere.
Bei dieser Codierung zB: null
document.getElementById("balken").attachEvent(click, blaettern); alert(click); function blaettern(e) { alert(e); if (e.clientX < document.documentElement.clientWidth/2) voriges(); else naechstes(); }Ich krieg keine Werte raus, da rührt sich gar nichts ...
-
Ich krieg keine Werte raus, da rührt sich gar nichts ...
Auch keine Fehlermeldung? (Du weißt wo du diese suchen musst?)
Struppi.
-
Ich krieg keine Werte raus, da rührt sich gar nichts ...
Auch keine Fehlermeldung? (Du weißt wo du diese suchen musst?)
Struppi.
Meinst Du die Fehlerkonsole im FF? Die kenn ich schon, bringt mich aber nicht weiter.
-
Meinst Du die Fehlerkonsole im FF? Die kenn ich schon, bringt mich aber nicht weiter.
Eben, ich denke das Skript läuft im IE nicht?
Struppi.
-
Meinst Du die Fehlerkonsole im FF? Die kenn ich schon, bringt mich aber nicht weiter.
Eben, ich denke das Skript läuft im IE nicht?
So ist es, ich weiss aber nicht, wie ich das Script im IE testen kann ...
-
-
-
-
@@Jürgen:
nuqneH
document.getElementById("balken").attachEvent(click, blaettern);
Der ertes Paramater muss ein String sein, der das Event (mit "on" davor) angibt. Hat molily doch ausführlich beschrieben.
function blaettern(e)
{
alert(e);eist im IE nicht definiert. Hat molily doch ausführlich beschrieben. Und auch, was man tun muss.Würdest du bitte die verlinkten Quellen lesen?
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain)-
document.getElementById("balken").attachEvent(click, blaettern);
Der ertes Paramater muss ein String sein, der das Event (mit "on" davor) angibt. Hat molily doch ausführlich beschrieben.
Würdest du bitte die verlinkten Quellen lesen?
Hallo Gunnar!
Ok, hab ich gemacht, ob ich alles nun umgesetzt habe ist die andere Frage.
Bin nach dutzenden Versuchen nun völlig frustriert.
Danke für den Hinweis mit der Präfix "on" etc. .... *schäm*Ich komm im IE nicht mal soweit, dass in der Funktion ein Hinweisfenster erzeugt wird. Es rührt sich NICHTS und ich weiss nicht mehr wo und wie ich was ändern soll.
document.getElementById("balken").attachEvent("onclick", maus_position_IE); // nur für IE function maus_position_IE() { alert("Funktions-Test"); // Testmeldung e_IE = window.event; if (e_IE.clientX < document.documentElement.clientWidth/2) voriges(); else naechstes(); }
-
-
-
-
-
-
Endlich ...
Hab´s nun geschafft, auch den IE mit ins Boot zu holen: klickt man nun links bzw. rechts im/vom Foto wird vor bzw. rückgeblättert.
Ich hab allerdings für den IE eine eigene Funktion codiert, ich hoffe, das ist nicht allzu holprig? Anders hab ichs aber nicht geschafft.
WEITERE FRAGE (ich bin so frei):
Ist es als Noob schaffbar, per JS die jeweilige Mausposition (noch ohne Klick) auszulesen UND dazu dann per CSS einen jeweils passenden Cursor (links vom Bild "Pfeil-links", rechts vom Bild "PFeil-rechts") anzeigen zu lassen???Wenn ja, nach welchen Schlagworten sollte ich da recherchieren??
Danke!
-
@@Jürgen:
nuqneH
Ich hab allerdings für den IE eine eigene Funktion codiert, ich hoffe, das ist nicht allzu holprig?
Doch, das ist es. Es ist nicht sinnvoll, Code für IE vs. für andere Browser zu schreiben; sondern für Browser, die eine bestimmte Methode unterstützen, vs. solche, die dies nicht tun.
Du nimmst an, dass alle Browser, die window.addEventListener unterstützen, auch window.innerWidth unterstützen und dass alle, die window.addEventListener nicht unterstützen, sowohl attachEvent als auch document.documentElement.clientWidth unterstützen. Das geht nicht unbedingt gut.
Besser eine Funktion und an der jeweigen Stelle die gerade(!) nötige Fallunterscheidung machen:
if (window.addEventListener) document.getElementById("balken").addEventListener("click", maus_position, false); else if (window.attachEvent) // Die Abfrage nicht vergessen! document.getElementById("balken").attachEvent("onclick", maus_position_IE); else // Code für Browser, die weder addEventListener noch attachEvent unterstützen document.getElementById("balken").onclick = maus_position;In der Funktion maus_position() dann:
if (e.clientX < (window.innerWidth || document.documentElement.clientWidth) / 2)Sonstiges:
<script>In HTML 4 ist das @type-Attribut http://de.selfhtml.org/javascript/intro.htm#javascriptbereiche@title=Pflicht.
//<, 'Ü' als '`Ü`{:.language-html}' zu notieren. Hm, macht mein HTML-Editor (NVU) automatisch. Werde ich in der endgültigen Version im Editor bereinigen, danke für den Hinweis. > Es ist auch [nicht](http://forum.de.selfhtml.org/archiv/2009/7/t188567/#m1255902) sinnvoll, im Markup in Majuskeln zu schreiben. Ich werd später mal recherchieren, was Majuskel sind ... > > WEITERE FRAGE (ich bin so frei): > > Ist es als Noob schaffbar, per JS die jeweilige Mausposition (noch ohne Klick) auszulesen UND dazu dann per CSS einen jeweils passenden Cursor (links vom Bild "Pfeil-links", rechts vom Bild "PFeil-rechts") anzeigen zu lassen??? > > Hättest du auf [mich](https://forum.selfhtml.org/?t=200965&m=1355138) gehört, als ich sagte „Sinnvoller dürfte aber sein …“, dann wäre das überhaupt kein Problem. Ok, hab ich umgesetzt und sogar geschafft, den IE zufrieden zu stellen. PROBLEM: Das Foto überdeckt im IE allerdings jeweils die a-Elemente sodass bei Klick auf das Foto selbst nix passiert sondern nur seitlich des Fotos. Hab ich da was falsch gemacht oder is´n Trick notwendig? > > Wenn ja, nach welchen Schlagworten sollte ich da recherchieren?? > > Nach der CSS-Eigenschaft 'cursor'. Na soweit war ich auch schon ;-)-
@@Jürgen:
nuqneH
Es ist auch nicht sinnvoll, im Markup in Majuskeln zu schreiben.
Ich werd später mal recherchieren, was Majuskel sind ...Der Unterschied zu Minuskeln entspricht dem zwischen Mallorca und Menorca.
Und wenn du dem begegenest, der in Majuskeln spricht, lauf!
Qapla'
--
Gut sein ist edel. Andere lehren, gut zu sein, ist noch edler. Und einfacher.
(Mark Twain) -
PROBLEM: Das Foto überdeckt im IE allerdings jeweils die a-Elemente sodass bei Klick auf das Foto selbst nix passiert sondern nur seitlich des Fotos. Hab ich da was falsch gemacht oder is´n Trick notwendig?
Problem mit Hilfe eines Tipps aus einem anderen Forum gelöst:
den a-Elemtenten per background-image ein transparentes gif zuweisen!
-
-
-