Javascript "onClick": aufrufende Funktion je nach sichtbarem DIV ändern

elamela · 11.03.2010

Hallo!

Ich bin dabei meine Internetseite ein wenig zu bearbeiten und den meisten Flash Kram rauszuwerfen und so weit es geht durch Javascript zu ersetzen.
Eine Sache ist folgende: Ich kenne mich nur halbwegs mit Javascript aus und bin noch ein ganz schöner Anfänger würd ich sagen. Daher wäre ich sehr über Hilfe erfreut!

Was ich machen möchte ist folgendes:
Ich habe ein Menü mit 10 Unterpunkten. Rechts befindet sich ein DIV für den Content. In diesem DIV öffnet sich je nach Funktion der im Menü aufgerufene DIV (mit einem document.getElementByID) welcher Standardmässig "hidden" ist.
Soweit so gut.
In diesen 10 DIVs möchte ich eine Fotogalerie erstellen. Das wäre auch kein grosses Problem.
Mit 2 Buttons die sich "vorheriges Bild" und "nächstes Bild" nennen, möchte ich dementsprechend die Bilder ansehen.
Diese Buttons befinden sich in einem DIV unterhalb der 10 verstäkten DIVs. Da ich nun allerdings nicht noch mal 10 verschiedene DIVs machen möchte mit der entsprechenden Funktion die das nächste/vorherige Bild aufruft, würde ich gerne wissen, wie man die "onClick" Funktion ändern kann.
(Ich hoffe bis hier hin kann man mir folgen

)

Also. Ich habe 2 Links ("vorheriges Bild"/"nächstes Bild") und diese haben eine entsprechende onClick Funktion, um zum nächsten/vorherigen Bild zu wechseln. Diese Funktionen nennen sich dann zb "anteriorLogotipo" / "siguienteLogotipo" bzw "anteriorPapelerias" / "siguientePapelerias" usw (für alle 10 DIVs)
Nun möchte ich gerne die Eigenschaft von dem "onClick" ändern, je nachdem welcher DIV gerade sichtbar ist.
Das heisst, wenn die Person im Menü auf "Logotipos" klickt, öffnet sich rechts der entsprechende DIV und unter ihm der DIV mit den beiden Links. In dem Zeitpunkt soll sich die aufzurufende Funktion des "onClick" der beiden Links "vorheriges Bild" / "nächstes Bild" ändern.
Und genau da weiss ich nicht weiter

Also so in etwa sieht das dann aus im HTML:

<div id="menu">

<a href="#" onClick="logotipos()">Logotipos</a>
<a href="#" onClick="papelerias()">Papelerias</a>
[...]

</div>

<div id="galerie">

<div id="logotipos">
[Galerie mit entsprechenden Bildern]
</div>
<div id="papelerias">
[Galerie mit entsprechenden Bildern]
</div>
[...]

<div id="ant_sig">
<a href="#" onClick="anteriorLogotipos">Anterior</a> vorheriges Bild
<a href="#" onCLick="siguienteLogotipos">Siguiente</a> nächstes Bild

</div>

</div>

Entsprechendes onClick soll sich dann also bei klick im Menü auf "Papelerias" zu <a href="#" onClick="anteriorPapelerias">Anterior</a>
bzw zu <a href="#" onClick="siguientePapelerias">Siguiente</a> ändern.

Sollte noch was unklar sein versuche ich es besser zu erklären

Vielen Dank im Voraus!

saila · 11.03.2010

AW: Javascript "onClick": aufrufende Funktion je nach sichtbarem DIV ändern

Hi,

wenn du das alles selbst mit JavaScript schreiben möchtest, sag noch mal kurz Bescheid. Wenn du sehr gute fertige Lösungen auch annehmen möchtest, dann such mal im Forum nach Fotogalerie und jQuery (JavaScript-Framework). Das spart viel Zeit und führt schnell zu einer sauberen Fehlerfreien Lösung

elamela · 11.03.2010

AW: Javascript "onClick": aufrufende Funktion je nach sichtbarem DIV ändern

Also mir ist es lieber, es selber zu schreiben, da ich es auch gerne lernen würde.
Also die Fotogalerie ist kein Problem, ich würd nur gern erfahren wie man die Property von dem onClick ändern kann

ich würd mich also sehr über Hilfe freuen, schau mich aber auch gerne nach den genannten Stichwörtern um!

ak56Lk · 20.03.2010

AW: Javascript "onClick": aufrufende Funktion je nach sichtbarem DIV ändern

hab zwar keine ahnung was ankersideropolous und singendesideropolous sein sollen

aber ok.

rufe doch einfach von jedem div eine "neutrale" funktion auf und übergebe einen parameter. der parameter kann z.b. die id des divs sein, welches sichtbar/unsichtbar gemacht werden soll. dann prüfst du das element, ob es sichtbar ist oder nicht und führst anhand des ergebnisses die entsprechende funktion "ankersideropolous" bzw. "singendesideropolous" auf.

elamela · 22.03.2010

AW: Javascript "onClick": aufrufende Funktion je nach sichtbarem DIV ändern

Hallo ak56lk ....
Also erstmal, ist das Spanisch und heisst ganz einfach "vorherig" und "nachfolgend"

und es schreibt sich "anterior" und "siguiente". Das Logotipo kommt von dem Wort "Logotyp" was man eigentlich wissen müsste, was das bedeutet....

Wie dem auch sei, sind das nur IDs und wie diese heissen sollte eigentlich vollkommen egal sein.

Auf jeden Fall wäre ich deutlich dankbarer über ein paar direkte Codes, oder Anwendungsbeispiele.
Und danke dir, aber genau das ist eigentlich was ich verhindern möchte, da ich keine 10 DIVs in meinen HTML packen will.

Hat keiner eine Idee wie man den onClick Befehlt variiern kann?? Mit einer Funktion?? wenn man das onClick="" leer lässt zb?

und evtl noch eine Bitte. Ich habe jetzt eine entsprechende Bildergalerie gemacht, die folgendermassen aussieht:

// JavaScript Document

var imagenes = new Array(2)
imagenes[0] = "imagenes/grafico/logotipo01.jpg";
imagenes[1] = "imagenes/grafico/logotipo02.jpg";

var i = 0;

function cargarImagenLogotipo(){
document.imgSrcLogotipo.src = imagenes;
}

function anteriorLogotipo(){
if(i<1){
var NumImagen = i;
} else {
var NumImagen = i-=1;
}
document.imgSrcLogotipo.src = imagenes[NumImagen];
}

function siguienteLogotipo(){
if(i>0){
var NumImagen = i;
} else {
var NumImagen = i+=1;
}
document.imgSrcLogotipo.src = imagenes[NumImagen];
}

Leider funktioniert es nicht ganz so gut wie gedacht.
Könnte mir jemand helfen?

ak56Lk · 22.03.2010

AW: Javascript "onClick": aufrufende Funktion je nach sichtbarem DIV ändern

Moin moin,

ich glaub, du musst es mir nochmal erklären

kurz und knackig reicht. z.b. welche ids du hast und was diese jeweils können sollen.

ich weiss gar nicht, ob man den onclick manipulieren kann. versuch mal

document.getElementById("deineID").onclick = deineFunktion();

Edit: sorry, ist noch früh ^^

Duddle · 22.03.2010

AW: Javascript "onClick": aufrufende Funktion je nach sichtbarem DIV ändern

Wenn es nur um die Bildergalerie geht - und das habe ich aus dem geschriebenen destilliert - würde ich eher zu einer fertigen Lösung tendieren, die haben meist auch schöne Übergangseffekte und mehr Features.

Ansonsten ist dein Ansatz für die eigene Lösung richtig: ein Array mit den verfügbaren Bildern definieren und mit den links-rechts-Knöpfen nur die Zählvariable als Array-Index de/inkrementieren.

Edit: hab gerade mal deinen Quellcode genommen und folgende HTML-Datei erstellt:

PHP:

<html>
	<head>
		<script type="text/javascript">
			var imagenes = new Array(2)
	imagenes[0] = "http://farm4.static.flickr.com/3474/3226358452_14572d5570.jpg";
	imagenes[1] = "http://farm5.static.flickr.com/4014/4410391795_2c5cb9e704_b.jpg";

	var i = 0;

	function cargarImagenLogotipo(){
		document.imgSrcLogotipo.src = imagenes[i];
	}

function anteriorLogotipo(){
	if(i<1){
		var NumImagen = i;
	} else {
		var NumImagen = i-=1;
	}
	document.imgSrcLogotipo.src = imagenes[NumImagen];
}

function siguienteLogotipo(){
	if(i>0){
		var NumImagen = i;
	} else {
		var NumImagen = i+=1;
	}
	document.imgSrcLogotipo.src = imagenes[NumImagen];
}
		</script>
	</head>
	<body>
		<img id="imgSrcLogotipo" src="foo.jpg" />
		<hr>
		<a href="javascript:anteriorLogotipo()">--------</a><br>
		<a href="javascript:siguienteLogotipo()">++++++++</a><br>
	</body>
</html>

Das funktioniert wunderbar, auch wenn in Zeile "var imagenes..." am Ende ein Semikolon fehlt. Vielleicht bricht bei dir deshalb der JS-Interpreter ab, Firefox scheint es offenbar nicht zu stören.

Duddle

elamela · 24.03.2010

AW: Javascript "onClick": aufrufende Funktion je nach sichtbarem DIV ändern

Hallo!

Also danke, die Bildergalerie funktioniert auch .. habs nochmal ausprobiert!

Abgesehen davon, wollte ich 10 verschiedene Bildergalerien machen.
Allerdings nicht 10 mal einen Div für "nächstes bzw vorheriges", da die Bildergalerien unsichtbar sind und per click sichtbar gemacht werden (liegen alle übereinander)

Also ich geb auch mal ein HTML beispiel an. Wie könnte ich die onClick Parameter ändern?
Ich habe es mit dem getElementById versucht, funktioniert leider nich ...

<html>
<head>

<script type="text/javascript>

function logotipos() {
if(document.getElementById('logotipos').style.visibility=='hidden') {
document.getElementById('logotipos').style.visibility='visible';
document.getElementById('ant_sig').style.visibility='visible';
}
}

function ant_sig() {
if(document.getElementById('logotipos').style.visibility='visible') {
document.getElementById('anterior').onclick = 'anteriorLogotipo()';
document.getElementById('siguiente').onclick = 'siguienteLogotipo()';
}
}

</script>
</head>
<body>
<div id="g_ident" class="menu_invisible">
<ul class="submenu">
<li><a href="#" onClick="logotipos()">Logotipos </a></li>
</ul>
</div>

<div class="disenos">
<div id="logotipos" style="visibility:hidden">
<img src="imagenes/grafico/logotipo01.jpg" id="imgSrcLogotipo" alt="Logotipo 01">
</div>
</div>

<div id="ant_sig" style="visibility:hidden">
<div class="anterior" id="anterior">
<a href="#" onClick=""><img src="imagenes/grafico/ant.gif" alt="Anterior">  Anterior</a>
</div>
<div class="siguiente" id="siguiente">
<a href="#" onClick="">Siguiente  <img src="imagenes/grafico/sig.gif" alt="Siguiente"></a>
</div>
</div>
</body>

</html>

-> das sind nur die wichtigsten Ausschnitte aus dem HTML Code.

Duddle · 24.03.2010

AW: Javascript "onClick": aufrufende Funktion je nach sichtbarem DIV ändern

Was genau spricht in dem Fall gegen eine schon fertige Lösung, siehe obige Links?

Wenn du einfach nur üben willst, stellst du vielleicht die falsche Frage. Zum Beispiel erscheint mir der Ansatz, ein Attribut anhand der Sichtbarkeit ändern zu wollen, etwas unorthodox. Viel sinnvoller wäre zum Beispiel, eine allgemeine Funktion zu haben, die nur Bildergalerien innerhalb des Kontextes des geklickten Links verändern will. In jQuery o.ä. ist eine entsprechende Funktion ziemlich schnell entwickelt.

Duddle

elamela · 24.03.2010

AW: Javascript "onClick": aufrufende Funktion je nach sichtbarem DIV ändern

Also danke dir auf jeden Fall für den Link der Lösungen, für meine eigene Seite werd ich mir das sicher genauer angucken

Allerdings arbeite ich mit einer Freunidn zusammen, bei der ich auch mein Praktikum mache. Und diese Art von Bildergalerien passen einfach nicht auf diese Seite. Da wir alles mögliche machen was Medien angeht, kennen wir uns allerdings nicht extrem mit Javascript aus (da wir dafür auch Leute haben, die sich damit auskennen).
Wenn es dann zu komplex wird, wär es ein wenig blöd, da ich verstehen muss was ich tue.

Mir wäre es einfach lieb wenn mir jemand ein Beispiel zeigen kann um die Parameter vom onClick zu ändern, ohne mich zu fragen was der Sinn dahinter is und warum ich das nicht anders mache

Ich würde es gerne so machen, und frage deshalb nach Hilfe.
Kannst du mir dabei helfen oder nicht?

Denn wenn mir dabei keiner helfen kann, mache ich es auf die einfache Art, welche allerdings mehr Text mit sich bringt. Leider haben wir auch nicht ewig dafür Zeit, weil die Seite an sich schon fertig ist. Es gibt ein paar wichtigere Dinge als diese Seite.

ak56Lk · 24.03.2010

AW: Javascript "onClick": aufrufende Funktion je nach sichtbarem DIV ändern

wenn du 10 bildergalerien untereinander hast - egal ob sichtbar oder nicht - dann vergib doch entsprechende IDs.

z.b. <a id="ant_4" onclick="ant('ant_4')">...</a>

also, dass du eine funktion hast und diese funktion erkennt halt an dem übergebenden parameter, in welcher galerie das vorherige bild angezeigt werden soll.

Duddle · 24.03.2010

AW: Javascript "onClick": aufrufende Funktion je nach sichtbarem DIV ändern

Mal eine "wenn ich unbedingt auf fertige und viel, viel, viel bessere Plugins verzichten will, die kostenlos und innerhalb von Minuten find- und einsetzbar sind"-Lösung:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
	<head>
		<title>Mehrere Galerien mit jQuery</title>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	</head>
	<script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" language="javascript" charset="utf-8">
	//<![CDATA[
		$(document).ready(function() {
				$('.galerie').each(function() {
					$(this).children('img').not(':first').hide(); //jedes Bild ausser das erste je Galerie verstecken
				}).not(':first').hide(); //dann jede Galerie ausser der ersten verstecken

				//menu-Link-Klick: alle Galerien verstecken, dann nur die per href identifizierte zeigen
				$('#menu a').click(function() {
					$('.galerie').hide();
					$('.galerie').filter(this.hash).show();
					return false;
				});

				//voriges Bild-Link:
				//suche ein Bild vor dem derzeit in dieser Galerie sichtbaren Bild, zeige es an,
				//verstecke den Nachfolger (bisher sichtbares Bild)
				$('a.previous').click(function() {
					$(this).parent('div').find('img:visible').prev('img').fadeIn().next('img').hide();
					return false;
				});

				//naechstes Bild-Link:
				//suche ein Bild nach dem derzeit in dieser Galerie sichtbaren Bild, zeige es an,
				//verstecke den Vorgaenger (bisher sichtbares Bild)
				$('a.next').click(function() {
					$(this).parent('div').find('img:visible').next('img').fadeIn().prev('img').hide();
					return false;
				});
		});
	//]]>
	</script>

	<body>
		<div id="menu">
			<a href="#galerie1">Galerie 1 zeigen</a>
			<a href="#galerie2">Galerie 2 zeigen</a>
			<a href="#galerie3">Galerie 3 zeigen</a>
		</div>
		<div class="galerie" id="galerie1">
			<h1>Galerie 1</h1>
			<img src="http://farm5.static.flickr.com/4035/4456981826_5171755039_m.jpg" />
			<img src="http://farm3.static.flickr.com/2708/4453685306_e0f7f24579_m.jpg" />
			<img src="http://farm3.static.flickr.com/2680/4457285969_d8cc785180_m.jpg" />
			<hr />
			<a href="#" class="previous">Voriges Bild</a>
			<a href="#" class="next">Nächstes Bild</a>
		</div>
		<div class="galerie" id="galerie2">
			<h1>Galerie 2</h1>
			<img src="http://farm3.static.flickr.com/2747/4453698773_186aa981db_m.jpg" />
			<img src="http://farm3.static.flickr.com/2762/4453900930_0ae5683748_m.jpg" />
			<hr />
			<a href="#" class="previous">Voriges Bild</a>
			<a href="#" class="next">Nächstes Bild</a>
		</div>
		<div class="galerie" id="galerie3">
			<h1>Galerie 3</h1>
			<img src="http://farm5.static.flickr.com/4046/4453967121_5e4cd3e731_m.jpg" />
			<img src="http://farm3.static.flickr.com/2799/4445667006_43ea334483_m.jpg" />
			<img src="http://farm5.static.flickr.com/4027/4456767021_4cbf6a9399_m.jpg" />
			<hr />
			<a href="#" class="previous">Voriges Bild</a>
			<a href="#" class="next">Nächstes Bild</a>
		</div>
	</body>
</html>

Anleitung: neue HTML-Datei erstellen, Quellcode reinkopieren, diese Datei in einem Unterverzeichnis "js" als "jquery.js" speichern, die HTML-Datei öffnen, sich des Lebens erfreuen.

Der gezeigte ist sicherlich nicht der beste Ansatz, aber er funktioniert.

Und wenn du jetzt sagst, dass du auch kein jQuery benutzen willst, dann werfe ich meine Hände in die Luft und gebe auf.

Duddle

ak56Lk · 24.03.2010

AW: Javascript "onClick": aufrufende Funktion je nach sichtbarem DIV ändern

Auf ein Framework wie JQuery (oder Prototype oder Mootools) sollte nicht verzichtet werden, denn diese nehmen einen Haufen arbeiten ab. Ebenfalls braucht man nicht auf die Eigenheiten eines jeden Browsers zu achten, da diese schon in den Frameworks berücksichtigt sind.

elamela · 29.03.2010

AW: Javascript "onClick": aufrufende Funktion je nach sichtbarem DIV ändern

Hey danke.. allerdings werde ich nach wie vor nicht verstanden

Ich hab nie gesagt dass es mir hauptsächlich um die Bildergalerie geht, ich hab gesagt ich will von den links "Vorheriges" und "nächstes" den onclick befehl ändern damit ich das eben nicht 10 mal schreiben muss wie das in dem Beispiel genau der Fall ist.
Ausserdem, mir gefällt es meine eigenen Sachen zu machen und es zu lernen und nich einfach zu kopieren!

Danke euch für die Mühe, ich habe mittlerweile eine andere Lösung gefunden die ich eig nicht wollte aber es funktioniert. Mehr brauch ich nicht!

Danke euch trotzdem

ak56Lk · 29.03.2010

AW: Javascript "onClick": aufrufende Funktion je nach sichtbarem DIV ändern

ein Framework zu benutzen ist keinesfalls "kopieren". Es gibt halt so allgemeine Sachen die man beachten muss. Bekanntestes Beispiel ist wohl document.getElementById("elementID"). Die meisten Frameworks oder vielleicht sogar alle vereinfachen dieses, indem das Framework eine Funktion bereitstellt, nämlich $().
Bsp.:

Code:

//ohne Framework
document.getElementById("elementID");
//mit Framework
$('elementID');

Es ist nicht nur kürzer und somit schneller zu schreiben, sondern wird auch noch mit den Framework-Funktionen erweitert.

Code:

//mit Framework
$('elementID').show();
//ohne Framework
document.getElementById("elementID").style.display = 'block';
 
//mit Framework
$('elementID').hide();
//ohne Framework
document.getElementById("elementID").style.display = 'none';

Man kann das sogar noch verketten ^^

Code:

//Erst verstecken, dann Inhalt schreiben, dann wieder anzeigen
//auch wenn man es so nie machen würde, aber möglich
$('elementID').hide().update('Hallo Welt!').show();

Wie du siehst, es ist kein kopieren, sondern vereinfachen. Kenner werden jetzt wohl erkennen, dass ich Prototype benutze