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
.............................................
.....................................
die imagemenu.js
und die imagemenu.CSS
.....................................
Wo und wie und was muss ich tun???
Danke für eure Bemühungen
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
.............................................
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
Java:
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
Code:
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
Zuletzt bearbeitet:
