onMouse Frage [kompliziert]

A

AvS

Erfahrenes Mitglied
hi,

ich möchte für mein homepage eine gallerie erstellen. dazu habe ich mir als menü etwas mit js ausgedacht.

also auf der linken seite stehen verschiedene namen untereinander gereiht. wenn man jetzt über einen der namen geht soll so ca. 5cm daneben ein bild erscheinen. falls man auf einen anderen namen geht soll sich das bild dementsprechend ändern. aber die position des bildes soll dieselbe sein.

gleichzeitig sollen die namen auch textlinks sein.


ist sowas möglich ?
 
klar ist das möglich. du schreibst die namen einfach in eine tabelle untereinander. jeder zelle gibst du im mouseover-ereignis eine bestimmte funktion aus deinem javascript. die funktion blendet dann einfach eine versteckte ebene ein. beim mouseout-ereignis wird die ebene dann wieder ausgeblendet.
da gibt's aber genügend beispiele zu, mit sicherheit auch eins im selfhtml. ansonsten kannst du dir auch einfach mal den code aus meiner homepage angucken, das geht auch in die richtung. :)
 
in selfhtml habe ich nichts gefunde und deine hp-quellcode sieht zwar fesch aus aber da ich nicht sehr bewandert bin mit js & html konnte ich da nicht viel raus erkennen.



klingt zwar vermessen aber am besten wäre wenn mir jemand sowas coden könnte :)
 
naja, ok. mein code ist schon etwas anderes und auch etwas unkommentiert. dann mal ein kleines beispiel:

Code: 
<html>

<head>
	<title> test </title>
	<script language="javascript">

	function blendIn(layer)
	{
		layer.style.visibility = "visible";
	}

	function blendOut(layer)
	{
		layer.style.visibility = "hidden";
	}

	</script>
</head>

<body>
	<table border="0">
	<tr>
		<td onMouseOver="blendIn(eins);" onMouseOut="blendOut(eins);">
			eins
		</td>
	</tr>
	<tr>
		<td onMouseOver="blendIn(zwei);" onMouseOut="blendOut(zwei);">
			zwei
		</td>
	</tr>
	</table>

	<div style="position: absolute; top: 10; left: 200; visibility: hidden;" name="eins" id="eins">
		eins
	</div>
	<div style="position: absolute; top: 10; left: 200; visibility: hidden;" name="zwei" id="zwei">
		zwei
	</div>
</body>

</html>
viel spass damit. :)
 
oder du machst das ganze indem du nicht ebenen ein/ausblendest sondern einfach bilder austauscht:

Code: 
<html>
<head>
<script language="JavaScript">

//hier alle gewünschten bilder definieren, wobei hier "img3"
//ein leeres-bild ist, dass angezeicht wird, wenn man auf keinem
//link ist.
var img1 = new Image();
var img1.src = "images/bild1.gif";
var img2 = new Image();
var img2.src = "images/bild2.gif";
var img3 = new Image();
var img3.src = "images/empty.gif";

function ChangeImg(imgObj)
{
  window.document.images[0].src = imgObj.src; 
}

</script>
</head>
<body>

<a href="gallery1.htm" onMouseOver="ChangeImg(img1)" onMouseOut="Change(img3)"> gallery 1 </a>

<a href="gallery2.htm" onMouseOver="ChangeImg(img2)" onMouseOut="Change(img3)"> gallery 2 </a>

<br><br>

<img src="images/empty.gif">

</body
</html>

..ich hoffe es ist verständlich.
 
hi nochmal..

das von asphyxia klappt so wie es da steht. aber ein, zwei fragen habe ich noch ! wie binde ich in diesen code noch die links ein und zweitens wo muss ich den pfad für die bilder , die auf der rechten seite eingeblendet werden sollen, angeben ?

danke :)
 
also, die links kommen in die tabelle und die bilder kommen in das <div>-tag. in meinem beispiel sieht das dann so aus:
Code: 
<html>

<head>
	<title> test </title>
	<script language="javascript">

	function blendIn(layer)
	{
		layer.style.visibility = "visible";
	}

	function blendOut(layer)
	{
		layer.style.visibility = "hidden";
	}

	</script>
</head>

<body>
	<table border="0">
	<tr>
		<td onMouseOver="blendIn(eins);" onMouseOut="blendOut(eins);">
			<a href="#">eins</a>
		</td>
	</tr>
	<tr>
		<td onMouseOver="blendIn(zwei);" onMouseOut="blendOut(zwei);">
			<a href="#>zwei</a>
		</td>
	</tr>
	</table>

	<div style="position: absolute; top: 10; left: 200; visibility: hidden;" name="eins" id="eins">
		eins <img src="bild1.jpg">
	</div>
	<div style="position: absolute; top: 10; left: 200; visibility: hidden;" name="zwei" id="zwei">
		zwei <img src="bild2.jpg">
	</div>
</body>

</html>

die bilder und verweise musst du natürlich noch austauschen, aber das ist das grundgerüst.
 
mh irgendwie scheint da der wurm drin zu stecken...als ich es ausprobiert habe wurde sah es ziemlich komisch aus....
 
was meinst du genau mit "sah ziemlich komisch aus"?
bei mir sieht das so aus, wie ich mir das vorgestellt habe. kannst du evtl. einen screenshot machen?


edit:
ich tipp einfach zu schnell. bei dem zweiten link musst du noch ein anführungszeichen setzen. also so:
Code: 
<a href="#">zwei</a>
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück