# MooTools



## kapitän Forelle (9. Aug 2010)

Hallo alle beisammen,

Ich schlage mich jetzt mit Mootools rum und versuche einige Anwendungen zu "basteln", um diese später in meiner Webseite nutzen zu können. Versuche ein Imagesmenü mit Einblendfunktion zu Bauen. Dabei geht es mit den Bildern alles OK. Nun möchte ich aber, das sich in dem Aufgeschlagenem Bild (Mouse over) ein Text einblendet. Das geht bisher nicht!!

Anbei der Code der testseite und der abgeänderte imagemenue.js. die anderen Scripte habt ihr ja auch.
Start.html
.............................................

```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

	<title>HeCom</title>
	<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
	<script type="text/javascript" src="js/mootools.js"></script>
	<link rel="stylesheet" href="css/imageMenu.css" type="text/css" media="screen" />
	<script type="text/javascript" src="js/fx.elements.js"></script>
	<script type="text/javascript" src="js/imageMenu.js"></script>
	<script type="text/javascript">
	
		window.addEvent('domready', function(){
			var standardMenu = new ImageMenu($$('#imageMenuHeCom a'),{
				openWidth:600, 
				openhight:400,
				border:0
			});
		});
</script>
	<script type="text/javascript">
var xmlHttpObject;

function loadContent()
{
    xmlHttpObject = new XHR({method: 'get', onSuccess: handleContent}).send('hallo.txt');
}

function handleContent()
{
    $('myContent').innerHTML = xmlHttpObject.response.text;
}
</script>

</head>

<body>
		<div class="container">
			<div class="content">
				<div id="imageMenuHeCom" class="imageMenu">
				<ul>
					<li class="img1"><a href="(EmptyReference!)">img1</a></li>
					<li class="img2"><a href="(EmptyReference!)">img2</a></li>
					<li class="img3"><a href="(EmptyReference!)">img3</a></li>
					<li class="img4"><a href="(EmptyReference!)">img4</a></li>
				</ul>
				</div>
			</div>
			

</div>
 

	</body>
</html>
```

.....................................

die imagemenu.js


```
var ImageMenu = new Class({
	
	getOptions: function(){
		return {
			OnOpen: false,
			OnClose: Class.empty,
			openWidth: 256,
			transition: Fx.Transitions.Quad.easeOut,
			duration: 600,
			open: null,
			border: 0
		};
	},
	/*event bezogen*/
	initialize: function(elements, options){
		var me = this;
		me.setOptions(this.getOptions(), options);
		me.elements = $$(elements);
		me.widths = {};
		me.widths.closed = me.elements[0].getStyle('width').toInt();
		me.widths.openSelected = me.options.openWidth;
		me.widths.openOthers = Math.round(((me.widths.closed*me.elements.length) - (me.widths.openSelected+me.options.border)) / (me.elements.length-1))
		me.fx = new Fx.Elements(me.elements, {wait: false, duration: me.options.duration, transition: me.options.transition});
		me.elements.each(function(el,i){
			
			el.addEvent('mouseenter', function(e){
				new Event(e).stop();
				me.reset(i);
				if(me.options.OnOpen){
					me.options.OnOpen(el, i);	}
			}.bind(me));
			
			el.addEvent('mouseleave', function(e){
				new Event(e).stop();
				me.reset(me.options.open);
				if(me.options.OnClose){
				me.options.OnClose(el, i);}
			}.bind(me));
			/*objekt bezogen*/
			var obj = this;
			el.addEvent('click', function(e){
				if(obj.options.OnClickOpen){
					new Event(e).stop();
					if(obj.options.open == i){
						obj.options.open = null;
						obj.options.OnClickClose(this.href, i);
											 }
					else{
						obj.options.open = i;
						obj.options.OnClickOpen(this.href, i);
						 }
					}
			})
		}.bind(this));
		if(this.options.open != null){
			if($type(this.options.open) == 'number'){
				this.reset(this.options.open);
			}else{
				this.elements.each(function(el,i){
					if(el.id == this.options.open){
						this.reset(i);
					}
				},this);
			}
		}
	},
	reset: function(num){
		if($type(num) == 'number'){
			var width = this.widths.openOthers;
			if(num+1 == this.elements.length){
				width += this.options.border;
			}
		}else{
			var width = this.widths.closed;
		}
		var obj = {};
		this.elements.each(function(el,i){
			var w = width;
			if(i == this.elements.length-1){
				w = width+5
			}
			if(w < 200){					/*Prüfung ob Maus außerhalb des scriptes ist*/
			obj[i] = {'width': w, 'opacity':.4};}
			else{
			obj[i] = {'width': w, 'opacity':1};}
			
		}.bind(this));
		if($type(num) == 'number'){
			obj[num] = {'width': this.widths.openSelected, 'opacity':1};/*actives Fenster eventhandling ?*/
			
		}
		this.fx.start(obj);
	}
}
);
ImageMenu.implement(new Options);
ImageMenu.implement(new Events);



/*************************************************************/
```


und die imagemenu.CSS

```
body { margin:0; padding:20px 20px 20px 0; font-family: arial, Helvetica, sans-serif; font-size:12px; color:#666; background: #1e1e1e; }
/*

*, html {
	margin: 0;
	padding: 0;
}

*/
/* ----- basic --------------------------------------------------------------------------------------------------------------------------------- */
object { display:block; margin:0 auto; }
div.container { background-color: transparent; margin: auto; width: 1024px; }
div.content_text { color: white; background-color: transparent; margin: -200px auto auto; width: 1024px; }
/**********************

	Image Menu
	v 2.3

.1  *********************/
.imageMenu { position: relative; width: 1024px; height: 400px; overflow: hidden; }
.imageMenu ul { list-style: none; margin: 0; display: block; height: 400px; width: 1600px; padding: 0; }
.imageMenu ul li { width: auto; float: left; margin: 0; padding: 0; }
.imageMenu ul li a { background-image: none; background-repeat: repeat; background-attachment: scroll; background-position: 0 50%; text-indent: -1600px; cursor:pointer; display:block; overflow:hidden; width:256px; height: 400px; }
.imageMenu ul li.img1 a { background: url(../img/111.png) 0 50%; }
.imageMenu ul li.img2 a { background: url(../img/computer.png) 0 50%; }
.imageMenu ul li.img3 a { background: url(../img/Service.png) 0 50%; }
.imageMenu ul li.img4 a { background: url(../img/Image3.png) 0 50%; width: 600px; }
/*************************************************************/
.text1 { color: maroon; font-size: 28px; margin-left: 200px; }
.text2 { color: black; }
.text3 { color: yellow; font-size: 28px; margin-left: 400px; }
.text4 { color: white; }
.clear {
	clear: both;
}
```
.....................................


Wo und wie und was muss ich tun???

Danke für eure Bemühungen


----------



## SlaterB (9. Aug 2010)

JavaScript? verschoben, 

nach dem letzten Thema
http://www.java-forum.org/fuer-veri...t/88759-dynamischer-headbereich-webseite.html
immer noch hier richtig?

zumindest hättest du nicht bei Java-Anfängerfragen posten müssen


----------



## XHelp (9. Aug 2010)

Könnte es sein, dass du wieder das falsche Forum erwischt hast?


----------



## kapitän Forelle (9. Aug 2010)

Wie gesagt, es hätte jemand eine Lösung haben können!!!

Oder einen Ansatz !!!

Trotzdem Danke


----------



## SlaterB (9. Aug 2010)

das Thema steht ja weiterhin offen, auch wenn es helfen würde, Satzzeichen immer nur einmal zu verwenden!!!
ein JavaScript-Forum gibt aber so viel mehr Chancen..


----------



## XHelp (9. Aug 2010)

Natürlich könnte/kann jemand eine Lösung haben. Aber die Struktur sollte man dennoch bewahren.
Aber ich denke mal, dass Fragen über Javascript eher in einem... nun ja... Javascript-Forum beantwortet werden können.


----------



## Tomate_Salat (10. Aug 2010)

Kapitän Forelle hat gesagt.:
			
		

> Das Java nicht gleich Javascript ist, ist bekannt und auch die UNTERSCHIEDLICHEN Auffassungen. Aber mit Java kann ich auch web-programme schreiben, die ......!





kapitän Forelle hat gesagt.:


> Wie gesagt, es hätte jemand eine Lösung haben können!!!



Naja. Das man u.U mal fragen zu JS hat, ok, habe ich ja garnichts dagegen. Aber wenn man doch schon weis Java != JavaScript, wieso macht man sich die Mühe und meldet sich in einem Forum an, um JS-Fragen zu stellen :-/. (Zumal es hier einen Gastzugang gibt). 

Iwie erinnert mich die ganze Geschichte hier ein wenig an die PHP-Geschichte vor einigen Tagen :autsch:

Ja GL HF, vllt bekommst hier ja doch noch eine zufriedenstellende antwort, aber für zukünftiges wärste in einem JS-Forum wohl besser aufgehoben.

MFG

Tomate_Salat


----------



## Jango (10. Aug 2010)

Tomate_Salat hat gesagt.:


> Aber wenn man doch schon weis Java != JavaScript, wieso macht man sich die Mühe und meldet sich in einem Forum an, um JS-Fragen zu stellen



Weil man vielleicht, der offensichtlichen Arroganz wegen, woanders keine Antworten erhält?


----------

