# onMouse Frage [kompliziert]



## AvS (28. Juli 2002)

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 ?


----------



## Dario Linsky (28. Juli 2002)

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.


----------



## AvS (28. Juli 2002)

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


----------



## Dario Linsky (28. Juli 2002)

naja, ok. mein code ist schon etwas anderes und auch etwas unkommentiert. dann mal ein kleines beispiel:


```
<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.


----------



## davedigital (29. Juli 2002)

oder du machst das ganze indem du nicht ebenen ein/ausblendest sondern einfach bilder austauscht:


```
<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.


----------



## AvS (30. Juli 2002)

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


----------



## Dario Linsky (30. Juli 2002)

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

```
<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.


----------



## AvS (30. Juli 2002)

mh irgendwie scheint da der wurm drin zu stecken...als ich es ausprobiert habe wurde sah es ziemlich komisch aus....


----------



## Dario Linsky (30. Juli 2002)

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:

```
<a href="#">zwei</a>
```


----------



## AvS (31. Juli 2002)

ja! jetzt klappt es genauso wie ich es mir vorgestellt hatte 

danke vielmals


----------



## theLMF (24. März 2003)

und wie stell ich das an, dass erst dann die ebenen ausgeblendet wird, wenn man über den nächsten link fährt ???


----------



## Fabian H (24. März 2003)

> onMouseOut="blendOut(eins);


Meinst du das?


----------



## theLMF (24. März 2003)

Momentan ist es ja so, dass man über "eins" (<--- den link) fährt und die ebene (in dem fall das bild) eingeblendet wird. verlässt man den "link" eins so wird die ebene auch wieder ausgeblendet.
ich würde gern wissen, wie ich das mach, dass eben dies nicht geschieht.... jaaa klar man muss onMouseOut="blendOut(eins);" raushaun.. aber wenn ich dann über den "link" zwei fahr, dann schiebt sich die eine eben über die andere --> murks
ich will eher, dass sich ebene 1 ausblendet und ebene 2 dafür erscheint.

--> http://www.defcom.de/ - ich hoffe die seite geht wieder.. da kanns man glaube ich ganz gut sehen


----------



## Fabian H (24. März 2003)

Mach wie gesagt das onMouseOut event raus und speicher dafür bei jedem drüberfahren den Layer in einer Variable, der gerade angezeigt wird. Dann machst du in die MouseOver funktion noch eine zusätzliche Zeile rein, in der der aktuell angezeige Layer wieder ausgeblended wird!


----------



## theLMF (24. März 2003)

und wie speicher/les ich variablen... ???

ich habs mal mit js probiert.. also var x = "eins" ging aber nicht wirklich :/
liegt an meinen mangelnden kenntnissen in diesem gebiet..


----------



## THE REAL TOOLKIT (24. März 2003)

selfhtml


----------



## theLMF (26. März 2003)

hmm ok.. wirklich schlauer bin ich nach eifrigem studieren der suchergebnisse von "variablen" u.ä. nicht geworden  
ich hab es zwar geschaft eine variable zu speichern.. aber eben nicht, dass sie erst gespeichert wird, wenn man auf "mouseover" geht.. das funktioniert leider nedde 

plz help


----------



## SandraN (22. August 2005)

Hallo Zusammen, 

habe das Script soweit ausprobiert und _eigentlich_ auch zum Laufen gebracht, ABER...  :suspekt: : wenn ich über das Bild gehe, welches vergrössert gezeigt werden soll krieg ich als Anzeige nur das Wörtchen 'eins'.   

*Wo* in dem Script ist bitte die richtige Stelle, in der ich das Bild *wie * (Verlinkung *?*) einsetzen muss? 

Und noch eine Frage dazu: reicht es, wenn ich 1 Bild nehme oder brauche ich ein kleines und ein großes? 'eins' und 'zwei' verwirren mich.   

Bitte keine "Na, ist doch klar - dort und dort, wie sonst auch"-Antworten, Javascript-technisch bin ich noch ziemlicher Neuling.   

Danke schon mal im Voraus,   

LG, 

Sandra


----------

