PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : quadratal menü


Panther
07.01.2003, 21:12
aalso
ich hätt da ne ziemlich große bitte an einen von euch. irgendwie hört sich das blöd an, aber ich würd einen von euch bitten, mir ein menü einzubauen. schaut euch mal das menü von dieser site an:

http://zeichnen.iscool.net/

ich hätt gern genauso eines.
ich würd ja diese quadrate machen, aber den rest kapier ich net, und ich will hier auch net irgendwelche links oder sonstiges, ich bräucht nur jemanden, der mir des in meine page einbaut.

Panther
07.01.2003, 22:34
i will jetzt nix editieren, also dann mal los....
wenn ma des schon keiner einbaut, dann hätt ich ne bitte:
schauts euch nochmal das menü an und i würd euch bitten, mir zu sagen, wie ich dieses textfeld mache, wenn man mit der maus rüberfahrt!

b.rog
08.01.2003, 14:06
entweder sind das alternatives mit 'nem eigenen style oder javas / xhtmls.

plädiere eher für eigene alternatives... oder schaue dir ma die site mit nem anderen browser an.

Scar
08.01.2003, 15:32
Eigentlich isses nur ein javascript...guck in den quellcode...kann doch nit so schwer sein...

Panther
08.01.2003, 15:57
1. wo soll ich nen anderen browser herkriegen?
2. danke für deine tolle antwort, wenns eh net so schwer is, dann hättest es ja jetzt posten können.

Panther
08.01.2003, 18:06
also mir fehlt jetzt nur mehr eins, denn wenn ihr euch die site, die ich euch oben angegeben habe anschaut, dann seht ihr, dass die beschreibung des links gleich sofort neben dem bild steht. aber bei mir is des weeeeit weg.....
hier is der code des scripts, vielleicht kann mir ja einer sagen, warum bei mir der text soweit absteht....




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">



<style type="text/css">
.clDescriptionCont{position:absolute; width:200; visibility:hidden; layer-background-color:#cccccc; z-index:200;}
.clDescription{width:70; left:0; top:0; font-family:tahoma,verdana,arial,helvetica; overflow:hidden; border: 1px solid #999999; padding:3px; font-size:11px; background-color:#cccccc; layer-background-color:#cccccc;}
.clLinks{position:absolute; left:100; top:200; z-index:1;}
.clCaption{position:absolute; width:157; font-family:tahoma,verdana,arial,helvetica; font-size:11px; left:0; top:0; height:15; clip:rect(0,157,15,0); background-color:#999999; layer-background-color:#999999;}

</style>
<script language="JavaScript" type="text/javascript">
/************************************************** ********************************
PopupDescriptions
* Copyright (C) 2001 <a href="/dhtmlcentral/thomas_brattli.asp">Thomas Brattli</a>
* This script was released at DHTMLCentral.com
* Visit for more great scripts!
* This may be used and changed freely as long as this msg is intact!
* We will also appreciate any links you could give us.
*
* Made by <a href="/dhtmlcentral/thomas_brattli.asp">Thomas Brattli</a>
************************************************** *******************************/
function lib_bwcheck(){ //Browsercheck (needed)
this.ver=navigator.appVersion
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.opera5=(navigator.userAgent.indexOf("Opera")>-1 && document.getElementById)?1:0
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
this.ie=this.ie4||this.ie5||this.ie6
this.mac=this.agent.indexOf("Mac")>-1
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
return this
}
var bw=new lib_bwcheck()

/************************************************** *************************************
Variables to set:
************************************************** *************************************/
messages=new Array()
//Write your descriptions in here.
messages[0]="Home"
messages[1]="Magie"
messages[2]="Zaubersprüche"
messages[3]="Rezepte"
messages[4]="Rituale"
messages[5]="Serien"
messages[6]="Sammlung"
messages[7]="Partner"
messages[8]="Jobs"
messages[9]="Fun"

//To have more descriptions just add to the array.

fromX=5 //How much from the actual mouse X should the description box appear?
fromY=-10////How much from the actual mouse Y should the description box appear?

//To set the font size, font type, border color or remove the border or whatever,
//change the clDescription class in the stylesheet.

//Makes crossbrowser object.
function makeObj(obj){
this.evnt=bw.dom? document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?document.layers[obj]:0;
if(!this.evnt) return false
this.css=bw.dom||bw.ie4?this.evnt.style:bw.ns4?thi s.evnt:0;
this.wref=bw.dom||bw.ie4?this.evnt:bw.ns4?this.css .document:0;
this.writeIt=b_writeIt;
return this
}
function b_writeIt(text){if(bw.ns4){this.wref.write(text);t his.wref.close()}
else this.wref.innerHTML=text}

//Capturing mousemove
var descx=0
var descy=0
function popmousemove(e){descx=bw.ns4||bw.ns6?e.pageX:event .x; descy=bw.ns4||bw.ns6?e.pageY:event.y}

var oDesc;
//Shows the messages
function popup(num){
if(oDesc){
oDesc.writeIt('<div class="clDescription">'+messages[num]+'</div>')
if(bw.ie5||bw.ie6) descy=descy+document.body.scrollTop
oDesc.css.left=descx+fromX; oDesc.css.top=descy+fromY
oDesc.css.visibility='visible'
}
}
//Hides it
function popout(num){
if(oDesc) oDesc.css.visibility='hidden'
}
function setPopup(){
if(bw.ns4)document.captureEvents(Event.MOUSEMOVE)
document.onmousemove=popmousemove;
oDesc=new makeObj('divDescription')
}
</script>
</head>

<body TEXT="#FFFFFF" LINK="#000000" VLINK="#000000" ALINK="#000000" BGCOLOR="#ffffff">
<div id="divDescription" class="clDescriptionCont">
<!--Empty div-->
</div>
<center>
<!-- Just delete this layer, it's just here for the example links --><br>
<a href="index.html" onmouseover="popup(0)" onmouseout="popout(0)" target="haupt"><img src="button1.bmp" border=1></a> <br><br>
<a href="magie.html" onmouseover="popup(1)" onmouseout="popout(1)" target="haupt"><img src="button2.bmp" border=1></a><br><br>
<a href="zs.htm" onmouseover="popup(2)" onmouseout="popout(2)" target="haupt"><img src="button3.bmp" border=1></a><br><br>
<a href="rezepte.html" onmouseover="popup(3)" onmouseout="popout(3)" target="haupt"><img src="button4.bmp" border=1></a> <br><br>
<a href="rituale.html" onmouseover="popup(4)" onmouseout="popout(4)" target="haupt"><img src="button5.bmp" border=1></a><br><br>
<a href="serien.html" onmouseover="popup(5)" onmouseout="popout(5)" target="haupt"><img src="button6.bmp" border=1></a><br><br>
<a href="download.html" onmouseover="popup(6)" onmouseout="popout(6)" target="haupt"><img src="button7.bmp" border=1></a><br><br>
<a href="partner.html" onmouseover="popup(7)" onmouseout="popout(7)" target="haupt"><img src="button8.bmp" border=1></a><br><br>
<a href="jobs.html" onmouseover="popup(8)" onmouseout="popout(8)" target="haupt"><img src="button9.bmp" border=1></a><br><br>
<a href="fun.html" onmouseover="popup(9)" onmouseout="popout(9)" target="haupt"><img src="button10.bmp" border=1></a><br><br>




<script>setPopup()</script>


</body>
</html>

b.rog
08.01.2003, 18:20
das hier ist das wichtige:



<script language="JavaScript" type="text/javascript">
/************************************************** ********************************
PopupDescriptions
* Copyright (C) 2001 <a href="/dhtmlcentral/thomas_brattli.asp">Thomas Brattli</a>
* This script was released at DHTMLCentral.com
* Visit for more great scripts!
* This may be used and changed freely as long as this msg is intact!
* We will also appreciate any links you could give us.
*
* Made by <a href="/dhtmlcentral/thomas_brattli.asp">Thomas Brattli</a>
************************************************** *******************************/
function lib_bwcheck(){ //Browsercheck (needed)
this.ver=navigator.appVersion
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.opera5=(navigator.userAgent.indexOf("Opera")>-1 && document.getElementById)?1:0
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
this.ie=this.ie4||this.ie5||this.ie6
this.mac=this.agent.indexOf("Mac")>-1
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
return this
}
var bw=new lib_bwcheck()

/************************************************** *************************************
Variables to set:
************************************************** *************************************/
messages=new Array()
//Write your descriptions in here.
messages[0]="Home"
messages[1]="Magie"
messages[2]="Zaubersprüche"
messages[3]="Rezepte"
messages[4]="Rituale"
messages[5]="Serien"
messages[6]="Sammlung"
messages[7]="Partner"
messages[8]="Jobs"
messages[9]="Fun"

//To have more descriptions just add to the array.

fromX=5 //How much from the actual mouse X should the description box appear?
fromY=-10////How much from the actual mouse Y should the description box appear?

//To set the font size, font type, border color or remove the border or whatever,
//change the clDescription class in the stylesheet.

//Makes crossbrowser object.
function makeObj(obj){
this.evnt=bw.dom? document.getElementById(obj):bw.ie4?document.all[o bj]:bw.ns4?document.layers[obj]:0;
if(!this.evnt) return false
this.css=bw.dom||bw.ie4?this.evnt.style:bw.ns4?thi s.evnt:0;
this.wref=bw.dom||bw.ie4?this.evnt:bw.ns4?this.css .document:0;
this.writeIt=b_writeIt;
return this
}
function b_writeIt(text){if(bw.ns4){this.wref.write(text);t his.wref.close()}
else this.wref.innerHTML=text}

//Capturing mousemove
var descx=0
var descy=0
function popmousemove(e){descx=bw.ns4||bw.ns6?e.pageX:event .x; descy=bw.ns4||bw.ns6?e.pageY:event.y}

var oDesc;
//Shows the messages
function popup(num){
if(oDesc){
oDesc.writeIt('<div class="clDescription">'+messages[num]+'</div>')
if(bw.ie5||bw.ie6) descy=descy+document.body.scrollTop
oDesc.css.left=descx+fromX; oDesc.css.top=descy+fromY
oDesc.css.visibility='visible'
}
}
//Hides it
function popout(num){
if(oDesc) oDesc.css.visibility='hidden'
}
function setPopup(){
if(bw.ns4)document.captureEvents(Event.MOUSEMOVE)
document.onmousemove=popmousemove;
oDesc=new makeObj('divDescription')
}
</script>


und gleich mit integrierter bedienungsanleitung.

greetz,

Panther
08.01.2003, 18:51
also ich dank da jetzt natürlich herzlich, aber ich versteh net ganz.......
soll das jetzt der komplette code fürs menü sein????
weil dann fehlen da irgendwie die bilder.............
und wenn net der ganze code, wo soll ich denn den dann hintun?

b.rog
08.01.2003, 19:00
also ich dank da jetzt natürlich herzlich, aber ich versteh net ganz.......
soll das jetzt der komplette code fürs menü sein????
weil dann fehlen da irgendwie die bilder.............
und wenn net der ganze code, wo soll ich denn den dann hintun?

brauchst keine pics, wird alles definiert. die kommentare können weggelöscht werden.

den code - nachdem du ihn für deine zwecke abgeändert hast - packst du dann in den header deiner site, also irgendwo zwischen <head> und </head>. natürlich darf du ihn nicht in irgendeine syntax reinquetschen, sondern packst das ganze nach einem </xxxxx> rein.

much success,