Demo

Probiere ClanSphere aus und teste daran herum. Demo


Antworten: 4
Seite [1]
br314ke


Wannabe poster





Beiträge: 29
 # Thema - 15.05.2015 um 10:49 Uhr
Hallo,

bin neu hier und versuche schon seit tagen mein Design an die aktuelle Clansphere Version anzupassen.
Es geht hauptsächlich um die Navigation, diese ist eine Dropdown Navi die über Java gesteuert wird.

Hier einmal meine einzelnen Code schnipsel:

index.htm +-
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
1. / 2. / ... 
 <div class="n"><img id="main" class="h" onmouseover="showNavi(this.id);MM_swapImgRestore();MM_swapImage('main','','../templates/trp/images/navi/navi_05_hover.png',1)" src="images/navi/navi_05.png" alt="" /><div id="n_main">
                    <ul>
                        <li><a href="{url:news_recent}" title="">News</a></li>
                        <li><a href="{url:gbook}" title="">Gbook</a></li>
                        <li><a href="{url:board}" title="">Board</a></li>
                        <li><a href="{url:search}" title="">Search</a></li>
                        <li><a href="{url:gallery}" title="">Gallery</a></li>
                    </ul>
            </div></div>


layout.css +-
 
1.
2.
3.
4.
5.
1. / 2. / ... 
 div.n                                             { position: relative; text-align:left }
div.n div                                         { position: absolute; top: 45px; background-color: #090b0d; display: none; }
div.n, div.n *                                    { z-index: 99; }

div.n div#n_main                                { width:123px; left: 5px;}


und hier die

navi.js +-
 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
1. / 2. / ... 
 ////////////////////Navigation/////////////////////
var isHover = new Array(); var clearMe = new Array(); var zIndex=1;
function changePic(id,hide)
{
  isHover['main'] = 0; isHover['clan'] = 0; isHover['misc'] = 0; isHover['race'] = 0; isHover['comm'] = 0; isHover['lobby'] = 0;
  hideNavi('main'); hideNavi('clan'); hideNavi('misc'); hideNavi('race'); hideNavi('comm'); hideNavi('lobby'); 
  if(!$('#' + id)[0].src.match(/\_hover/))
    $('#' + id)[0].src = $('#' + id)[0].src.replace(/\.png/, '_hover.png');

  if(hide != 0) {
    $('#' + id)[0].onmouseout = function() {
      if(isHover[this.id] != 1) this.src = this.src.replace(/\_hover\.png/, '.png');
    }
  } else {
    $('#' + id)[0].onmouseout = function() {
      isHover[this.id] = 0;
      hideNavi(this.id);
    }
  } 
}

function hideNavi(id,timer)
{

  if(timer == 1 && isHover[id] != 1)
  { 
    $('#n_' + id)[0].style.display = 'none';
    $('#' + id)[0].src = $('#' + id)[0].src.replace(/\_hover\.png/, '.png');
  } else window.setTimeout("hideNavi('"+id+"',1)",100);
}

//////////////////////////////////////////////////////////////////////////

function showNavi(id)
{
  changePic(id, 0);
  isHover[id] = 1;
  $('#n_' + id)[0].style.display = 'block';
  $('#n_' + id)[0].style.zIndex = zIndex; zIndex++;
  
  $('#n_' + id)[0].onmouseover = function() {
    var id = this.id.replace(/n\_/, '');
    isHover[id] = 1;
  }

  $('#n_' + id)[0].onmouseout = function() {
    var id = this.id.replace(/n\_/, '');
    changePic(id);
  }
}

var img = new Array();
function initNavigation()
{
  var tags = $('#navi')[0].getElementsByTagName('img');
  for(var i=0;i<tags.length;i++)
  {
    if(tags[i].className == 'h')
    {
      img[tags[i].id] = new Image();
      img[tags[i].id].src = tags[i].src.replace(/\.png/,'_hover.png');
    }
  }
}

////////////////////Mouse-Over/////////////////////
var subid = false;
var timeout = false;

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

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 MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

////////////////////Images Preloader/////////////////////
function preloadImages()
{
    var grafik = new Array();
    grafik[0] = new Image(); grafik[0].src = "../templates/trp/images/navi/navi_05_hover.png";
    grafik[1] = new Image(); grafik[1].src = "../templates/trp/images/navi/navi_07_hover.png";
    grafik[2] = new Image(); grafik[2].src = "../templates/trp/images/navi/navi_09_hover.png";
    grafik[3] = new Image(); grafik[3].src = "../templates/trp/images/navi/navi_11_hover.png";
    grafik[4] = new Image(); grafik[4].src = "../templates/trp/images/navi/navi_13_hover.png";
    grafik[5] = new Image(); grafik[5].src = "../templates/trp/images/navi/navi_15_hover.png";
    grafik[6] = new Image(); grafik[6].src = "../templates/trp/images/bg.jpg";
}


Das seltsame ist jetzt, habe ich die Option Hübsche URL´s deaktiviert funktioniert die Navi in allen Bereichen.
Habe ich die Funktion aktiviert, funktioniert die Navi lediglich auf der Startseite.
In allen anderen Bereichen wird das Hauptbild geladen, jedoch nicht das Hover Bild.
Und beim Mouseover bzw. Out verschwindet dann auch das Hauptbild.
Bekomme schon beim Laden der Seite folgende Meldung: Resource interpreted as Image but transferred with MIME type text/html:.

Kann mir hierbei einer Helfen, bin über jeden Denkanstoß dankbar.

EDIT:

Kann mir dabei keiner Helfen, oder wird hier der Support nicht so ernst genommen?


------------------
beste Grüße

Zuletzt editiert von bre1ake am 17.05.2015 um 12:34 Uhr (1x Editiert)
Inaktiv
sgraewe ClanSphere Team

Supporter
Supporter




Beiträge: 6116
 # Antwort: 1 - 18.05.2015 um 11:37 Uhr
15.05.2015 um 10:49 Uhr - bre1ake:
Es geht hauptsächlich um die Navigation, diese ist eine Dropdown Navi die über Java gesteuert wird.


Das glaube ich nicht ^^
Java != javascript

Wofür die Navi überhaupt mit js machen?
Welchen effekt brauchst du denn?
Nen link wäre hilfreich.


15.05.2015 um 10:49 Uhr - bre1ake:
Kann mir dabei keiner Helfen, oder wird hier der Support nicht so ernst genommen?

Tatsächlich verbringen auch wir unser Wochenende ab und an ganz gerne unter der Sonne, mit freunden oder Familie.


Zuletzt editiert von sgraewe ClanSphere Team am 18.05.2015 um 11:37 Uhr (1x Editiert)
Inaktiv
|
br314ke
Thread-Ersteller


Wannabe poster





Beiträge: 29
 # Antwort: 2 - 18.05.2015 um 19:26 Uhr
Hiho,

ja sry, sollte nicht als Angriff zu verstehen sein, war an dem Tag nur ziemlich gefrusstet. Sry

Ich habe mir halt gedacht, da ich diese Navi Version schon in einem anderen CMS so genutzt hatte, wäre es ein einfaches diese einfach zu übernehmen.
Es geht mir halt darum, dass ich eine Dropdown Navi mit Hover Effekt habe.
Habe für die Navi insgesamt 12 Bilder (png) erstellt, wobei 6 davon bei Seitenaufruf vorgeladen werden und die anderen 6 erst bei Mousover als Hover angezeigt und bei Mousout wieder gegen die ersten 6 ausgetauscht werden.

Habe es jetzt auch ziemlich unschön hinbekommen.

Link zur Testpage ist in meinem Profil oder >>Klick mich zart<<


------------------
beste Grüße

Inaktiv
|
Tress13


Highlander




Herkunft: Lüdenscheid
Beiträge: 3048
 # Antwort: 3 - 18.05.2015 um 20:10 Uhr
Ich sehe an deiner Navi nichts, was man nicht auch mit einfachem HTML und CSS lösen könnte. Kann dir aber leider nicht helfen, da mir etwas Zeit fehlt. Aber eine Umsetzung mit HTML und CSS wäre dann bestimmt die schönere Lösung.


------------------


www.iv-gaming.de | www.iv-artwork.de

Inaktiv
|
br314ke
Thread-Ersteller


Wannabe poster





Beiträge: 29
 # Antwort: 4 - 19.05.2015 um 18:55 Uhr
Habe mittlerweile schon diverse Anregungen dazu gefunden.
Muss mir nur noch nen Plan machen wie ich das alles umgesetzt bekomme, bin leider schon sehr lange aus der Materie raus und Lese mich gerade erst neu in HTML5 und CSS3 ein.

Danke dennoch für eure Antworten.

[Closed]


------------------
beste Grüße

Inaktiv
|

Dieses Thema wurde von Deaktiviert PM geschlossen.
Antworten: 4
Seite [1]