Javascript Div aus-/einblenden

[String]

Hallo Leutz,

ich habe folgendes Problem:

Ich habe zwei Boxen mit folgendem Code.

<div id="gal-frame">

	<div class="gal-listing">

		<div id="gal-listing-pic">

				<a class="gal-pic-link" href="">

					<img class="gal-pic" src="" alt="" />

				</a>

			<div id="gal-listing-desc">

			</div>

		</div>

		<div id="gal-listing-meta">

			<div id="gal-listing-name">

				<a class="gal-name-link" href="">

				</a>

			</div>

			<div id="gal-listing-price">

				<a class="gal-price">

				</a>

			</div>

		</div>

	</div>

</div>

Dieser Code wird genau so mit einem PHP-Script generiert. Die Klassen und id's sind fest, dass bedeutet jede Box hat die gleichen klassen und id's wie die vorherige. Ich möchte an dem Punkt nicht um den Sinn diskutieren, der Code ist nicht von mir, ich arbeite nur damit.

Ich möchte nun, wenn ich mit der Maus über das a-Tag mit der id 'gal-pic-link' hover, dass das DIV mit der id 'gal-listing-desc' display:block gestylt wird. Das Problem, dass ich nun habe ist wie folgt, wenn ich über das a-Tag hover, werden natrülich von allen Boxen die DIV's mit der id 'gal-listing-desc' sichtbar gemacht. Ich möchte aber, dass nur das DIV der Box, welche ich gehovter habe, sichbar wird.

Wie kann ich das realisieren. Es geht, da ich es schon oft gesehen habe.

Beispiel

Wenn man dort über ein Schuh hovert, wird genau das erreicht, was ich möchte. Wie kann ich das erreichen?

Ich hoffe mein Text war relativ klar ??^^

Danke im vorraus.

grüße String

[Guybrush Threepwood]

Na entweder indem du eindeutige IDs vergibst was der vernünftige Weg wäre oder indem du dir das parent div von deinem gehoovertem Link suchst und davon dann das child div welches die gewünschte ID hat...

[String]

Vielen Dank für deine Antwort.

Wie würde die Lösung mit dem Childelement aussehen?

[CSharp92]

Sowas vielleicht?

How to find and access parent nodes via JavaScript

Allerdings musst du dort auch wiederrum eindeutige Ids haben, denn sonst passiert das selbe wie du es von Anfang an hattest.

[Dragon8]

Also wenn die Struktur deiner HTML Datei wirklich immer so ist, wie du sie oben genannt hast, sollte folgendes funktionieren:

[...]

<a class="gal-pic-link" href="" onmouseover="this.parentNode.lastElementChild.style.display='block';">

[...]

[String]

Super, sehr cool. Im FF gehts, allerdings im IE nicht. Gibt es dafür auch eine Lösung?

[lit-web]

Super, sehr cool. Im FF gehts, allerdings im IE nicht. Gibt es dafür auch eine Lösung?

Ja schau dir mal JQuery an. In welchen IE gehts denn nicht? Die Infos darfst natürlich nicht verheimlichen.

[String]

jQuery einbinden um eine sone Funktion zu nutzen, finde ich dann schon etwas übertrieben.

Bei mir geht es in allen FF', Crome, Safarie und Opera aber bei keiner IE-Version. Funktionieren solte es aber IE7.

[lit-web]

Ich möchte an dem Punkt nicht um den Sinn diskutieren, der Code ist nicht von mir, ich arbeite nur damit.

Grad erst das mit gelesen. Darüber soltest du aber sehr wohl diskutieren, denn das ist Mist. Eine ID ist und bleibt ein eindeutiger Wert und soll und darf nicht dran gerüttelt werden.

Hast du selber mal ein wenig Code geschrieben wo man sieht was dein Ansatz ist?

In der Regel kannst du mit dem target des aktuellen Objektes zu deinem nächsten im DOM oder zum vorherigen im DOM navigieren.

Ich habe mir mal so ein Ding gebastelt.

var eventValues = function(pEvent) {

	pEvent = pEvent || window.event;

	var target = pEvent.target || pEvent.srcElement;


	var xE = null;

	var yE = null;


	if(pEvent.pageX && pEvent.pageY) {

		xE = pEvent.pageX;

		yE = pEvent.pageY;

	} else {

		xE = pEvent.clientX + ( document.body.scrollLeft + document.body.parentNode.scrollLeft );

		yE = pEvent.clientY + ( document.body.scrollTop + document.body.parentNode.scrollTop );

	}


	var conf = {

		'pM' : {

			'x' : xE,

			'y' : yE

		},

		'pE' : {

			'x' : target.offsetLeft,

			'y' : target.offsetTop

		},

		'sE' : {

			'w' : target.offsetWidth,

			'h' : target.offsetTop

		},

		'currentElem' : {

			'e' : pEvent = pEvent || window.event,

			't' : target = pEvent.target || pEvent.srcElement

		}

	}


	return conf;

}

Da drin sind alle Werte die brauchst.

Wie du diese Funktion in einer Funktion anwendest und Zugriff auf die Parameter hast weist du aber oder?

Gruß Lit-Web