Rollover Menü mit JS

Get help with installation and running phpwcms here. Please do not post bug reports or feature requests here.
Post Reply
homie25
Posts: 8
Joined: Tue 29. Mar 2005, 14:02

Rollover Menü mit JS

Post by homie25 »

Hallo Leute,

ich bin ein absoluter Newbie in Sachen WCMS, aber da ich den eindruck habe, dass ich mit diesem CMS am besten zurechtkommen werde habe ich es ausgesucht.

Ich habe vor eine Galleryseite zu erstellen, dh. Fotos und Partyberichte sollen als Inhalt dienen.

So jetzt habe ich mein design mehr oder weniger fertig und habe es auch bis zum header im HTML und JS umgesetzt. Das Problem ist jedoch die Navigation, denn ich verwende image rollover und würde diese auch gerne weiterhin verwenden, da ich am Aussehen der Navigation nichts verändern möchte(außer man kann eine solche Navigation in css oder php umsetzten und ihr helft mir dabei:D) .

Frage ist jezt also wie kann ich die Navigation mit den Rolloverimages in PHPWCMS umsetzten.

Ich habe es zwar geschaft, dass das normale image angezeigt wird aber ich kriege es nicht hin, dass beim Drüberfahren das rollover Bild angezeigt wird.

http://home.arcor.de/kda/bonnp/
spirelli
Posts: 996
Joined: Tue 27. Jul 2004, 13:37
Location: London

Post by spirelli »

Ich hab auch so ein menu in der Seite.

Das script ist seperat als datei und ich habe es i mit

Code: Select all

<script src="scripts/mainnavigation.js" language="javascript" type="text/javascript"></script>
verlinkt. Das kommt in "html head" in die Vorlage.

Dann gibts da noch ein Feld "js on load". Da die bilder alle vorladen lassen, bspw:

Code: Select all

XM_initImages('01','picture/nav/navover_01.gif','picture/nav/navover_01.gif','nolinkstart','Home','picture/nav/navover_02.gif','picture/nav/navover_02.gif','homelink','St MaryMagdalene','picture/nav/navover_03.gif','picture/nav/navover_03.gif','St Mary Magdalene link','St David','picture/nav/navover_04.gif','picture/nav/navover_04.gif','St David link','Academy','picture/nav/navover_05.gif','picture/nav/navover_05.gif','Academy link','Refugee Centre','picture/nav/navover_06.gif','picture/nav/navover_06.gif','Refugee Centre link','Paradise Project','picture/nav/navover_07.gif','picture/nav/navover_07.gif','Paradise Project link','Anonymous','picture/nav/navover_08.gif','picture/nav/navover_08.gif','Anonymous link','**** Office','picture/nav/navover_09.gif','picture/nav/navover_09.gif','**** Office link','10','picture/nav/navover_10.gif','picture/nav/navover_10.gif','nolinkend')
Und dann noch das menu noch irgendwo in die Vorlage, z.B.

Code: Select all

 <tr>
          <td><img name="01" src="picture/nav/nav_01.gif" width="8" height="22" border="0" alt="" /></td>
          <td><a href="index.phtml" onmouseout="document.XM_img[1].restore();" onmouseover="document.XM_img[1].swap();" onclick="document.XM_img[1].stick();"><img name="Home" src="picture/nav/nav_02.gif" width="52" height="22" border="0" alt="Home" /></a></td>
          <td><a href="index.php?mm" onmouseout="document.XM_img[2].restore();" onmouseover="document.XM_img[2].swap();" onclick="document.XM_img[2].stick();"><img name="St Mary Magdalene" src="picture/nav/nav_03.gif" width="107" height="22" border="0" alt="St Mary Magdalene" /></a></td>
usw.
homie25
Posts: 8
Joined: Tue 29. Mar 2005, 14:02

Post by homie25 »

Danke erst einmal das du so schnell geantwortet hast! Ich habe das gefühl, dass ich dem ganzen schon etwas näher gekommen bin aber mein Problem ist "mainnavigation.js". Wo bekomme ich die denn her?

Kann ich die "frontend.js" von phpWcms verwenden? Wenn ja muss ich doch nur noch die Pfade im Preloadcode an meine Bilder anpassen und die <img> links natürlich auch oder?
spirelli
Posts: 996
Joined: Tue 27. Jul 2004, 13:37
Location: London

Post by spirelli »

Ach so, Also ich habe das Menu im Dreamweaver gebastelt und da geht
das halt so automatisch. Das Resultat ist dann, dass ein ganzer Batzen
Javascript im <head> erscheint. Diesen Script-Code habe ich dann
genommen und in diese externe Datei "mainnavigation.js" kopiert, damit
es in meinen Templates nicht zu unuebersichtlich wird. Wie man das von
Hand alles programmiert - keine Ahnung. Ich kann dir aber natuerlich
mein script hier mal hinkopieren. Ansonsten kann ich Dir da nicht mit
weiterhelfen. Da versteh ich naehmlich sonst auch nur Bahnhof.

Code: Select all

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}
function XM_images(n,o,d,l) { //v1.0
	this.obj=MM_findObj(n);this.n=n;this.u=this.obj.src;this.s=1;this.o=o;this.d=d;
	this.swap=function() {if(this.s==1){this.obj.src=this.o;this.s=2}}
	this.stick=function() {this.obj.src=this.d;this.s=3;XM_unStick(this.n)}
	this.restore=function(){if(this.s==2){this.obj.src=this.u;this.s=1}}
	if (document.location.href.indexOf(l)!=-1) this.stick()
}
function XM_unStick(n){ //v1.0
	for (var i=0;i<document.XM_img.length;i++)if (document.XM_img[i].n!=n) 
	{document.XM_img[i].s=2;document.XM_img[i].restore()}
}
function XM_initImages() { //v1.0
	var a=XM_initImages.arguments;document.XM_img=new Array();for(i=0;i<a.length;i=i+4){
	document.XM_img[document.XM_img.length]=new XM_images(a[i],a[i+1],a[i+2],a[i+3])}
}
east
Posts: 17
Joined: Mon 11. Apr 2005, 12:30

Post by east »

Hallo spirelli,

kann man sich deine Navi mal irgendwo ansehen ?

east
Post Reply