News - Features - Downloads - Forum - Team - Support - Switch View: Screen
Login - Registrierung - Passwort vergessen

Antworten: 8
Seite [1]
Dafoxx


King for a day





Beiträge: 244
 # Thema - 18.05.2009 um 17:03 Uhr
huhu!
ich habe folgendes problem:
ich will per javascript bei mouseover über <div A> eine anzeige von optionen in <div B>
hab dazu ein javascript aus ner hp geklaut, welche das so macht.
nur hab ich absolut keine ahnung von java, deswegen raff ich net, wie ich das entsprechend hinbekomm.
wäre nett, wenn mir das einer erklären könnte.

html:
<div class="navmain">
<div class="nav8"></div>
<div class="nav1">
</div>
<div class="nav2">
</div>
<div class="nav3">
</div>
<div class="nav4">
</div>
<div class="nav5">
</div>
<div class="nav6">
</div>
<div class="nav7"></div>
<div class="navoption">
<a href="{url:news}">{lang:news}</a>
<a href="{url:news}">{lang:news}</a>
<a href="{url:news}">{lang:news}</a>
<a href="{url:news}">{lang:news}</a>
<a href="{url:news}">{lang:news}</a>
usw
</div>
</div>

dazu: nav1-6 sind die buttons, die bei moueover aktiviert werden sollen. navoption ist der div, der unter den anderen liegt und dann eben die optionen anzeigen soll.
die <a> tags sind eben die optionen.

das script +-
<script language="JavaScript">
function menu(id) {
if(id == 1) {
document.getElementById('liInfo').className = 'on1';
document.getElementById('liCompeto').className = 'off';
document.getElementById('liComm').className = 'off';
document.getElementById('liFeatures').className = 'off';
document.getElementById('liPartners').className = 'off';
document.getElementById('liMisc').className = 'off';

} else if(id == 2) {
document.getElementById('liCompeto').className = 'on2';
document.getElementById('liInfo').className = 'off';
document.getElementById('liComm').className = 'off';
document.getElementById('liFeatures').className = 'off';
document.getElementById('liPartners').className = 'off';
document.getElementById('liMisc').className = 'off';
window.setTimeout("document.getElementById('liInfo').className = 'on1';", 6000);
window.setTimeout("document.getElementById('liCompeto').className = 'off';", 6000);
} else if(id == 3) {
document.getElementById('liComm').className = 'on3';
document.getElementById('liInfo').className = 'off';
document.getElementById('liCompeto').className = 'off';
document.getElementById('liFeatures').className = 'off';
document.getElementById('liPartners').className = 'off';
document.getElementById('liMisc').className = 'off';
window.setTimeout("document.getElementById('liInfo').className = 'on1';", 6000);
window.setTimeout("document.getElementById('liComm').className = 'off';", 6000);
} else if(id == 4) {
document.getElementById('liFeatures').className = 'on4';
document.getElementById('liInfo').className = 'off';
document.getElementById('liCompeto').className = 'off';
document.getElementById('liComm').className = 'off';
document.getElementById('liPartners').className = 'off';
document.getElementById('liMisc').className = 'off';
window.setTimeout("document.getElementById('liInfo').className = 'on1';", 6000);
window.setTimeout("document.getElementById('liFeatures').classNam e = 'off';", 6000);
} else if(id == 6) {
document.getElementById('liMisc').className = 'on6';
document.getElementById('liInfo').className = 'off';
document.getElementById('liCompeto').className = 'off';
document.getElementById('liComm').className = 'off';
document.getElementById('liFeatures').className = 'off';
document.getElementById('liPartners').className = 'off';
window.setTimeout("document.getElementById('liInfo').className = 'on1';", 6000);
window.setTimeout("document.getElementById('liMisc').className = 'off';", 6000);
} else if(id == 0) {
document.getElementById('liInfo').className = 'off';
document.getElementById('liCompeto').className = 'off';
document.getElementById('liComm').className = 'off';
document.getElementById('liFeatures').className = 'off';
document.getElementById('liPartners').className = 'off';
document.getElementById('liMisc').className = 'off';
}
}
</script>


wär cool, wenn jmd weiss wie das geht.
greeez, fox

PS: falls irgendwem das bekannt vorkommt: ja ich habs schonmal gepostet, aber es war erstens im falschen forum und 2. unübersichtlich deswegen hab ich lieber n 2. thread aufgemacht... steigert die chancen auf support denk ich - hoffe das vermindert sie aufgrund von spamm nich^^ wird auch nich mehr vorkommen^^
Inaktiv
ThePutzy


Try to beat me





Beiträge: 173
 # Antwort: 1 - 18.05.2009 um 17:10 Uhr
Naja du brauchst auch das Passende CSS dazu^^.

Da er ja immer die Class bei einem Mouseover setzt.
Und du musst die passenden ID's vergeben^^

document.getElementById('liInfo')
Heißt das er den div, oder a oder halt den tag mit der ID aufruft.

document.getElementById('liInfo').className = 'off';
Heißt das er das Elemtent mit der ID auf die Class Off stellt.

Also ohne das passende style geht da wenig und wie gesagt ID's vergeben .


------------------
Meine Projekte:
Inaktiv
|
Dafoxx
Thread-Ersteller


King for a day





Beiträge: 244
 # Antwort: 2 - 18.05.2009 um 19:26 Uhr
ok
sprich für den ersten block im script
if(id == 1) {
document.getElementById('liInfo').className = 'on1';
document.getElementById('liCompeto').className = 'off';
document.getElementById('liComm').className = 'off';
document.getElementById('liFeatures').className = 'off';
document.getElementById('liPartners').className = 'off';
document.getElementById('liMisc').className = 'off';

heisst dass wenn ich
den ersten div mit class="nav1"
und dafür die links (<a>) mit id="menu(1)" habe, dann muss das script so aussehen:
document.getElementById('nav1').className = 'on1';
document.getElementById('nav2').className = 'off';
document.getElementById('nav3').className = 'off';
usw
?
kannst du (oder irgendwer) mir noch kurz n paar infos bezüglich dem rest geben?
was is on1/on2? was genau heisst off? sind des beides classen die ich in der css nochmal definieren muss?
className = 'off';", 6000 was hat die 6000 zu bedeuten? is das auch was spezifisches oder was allgemeines?

thx schonmal soweit, damit is mir auf jeden fall schonmal um einiges geholfen, werds nachher mal einbaun, meine code-muse is grad bier holen^^


Inaktiv
|
Nachtmeister


Specialist




Herkunft: Bern
Beiträge: 2091
 # Antwort: 3 - 18.05.2009 um 22:01 Uhr
on1 und on2 sind einfach zwei verschiedene Klassen genau so wie off. Mit className änderst du die Klasse was zum Beispiel heissen kann, dass das Element die Eigenschaften der neuen Klasse annimmt, also z.B. CSS Eigenschaften.

Die 6000 ist einfach die Zeit, die abgewartet wird, bis diese ganze Aktion innerhalb der Klammern ausgeführt wird. In deinem Fall 6000 = 6 Sekunden.


------------------
"God created the universe in 1 Day, and then spent 5 days making it look good In Internet Explorer"

Inaktiv
|
Dafoxx
Thread-Ersteller


King for a day





Beiträge: 244
 # Antwort: 4 - 18.05.2009 um 23:18 Uhr
ok..... langsam...
on1 und on2 sind vordefiniert?
oder muss ich dazu noch in der css was reinschreiben?
also was ich mir vorstellen könnte wäre irgendwas mit hide.... alternativ auch
.on1{z-index:1;background=blabla;owerflow:hide}
.off{z-index:2}

zu den 6s: heisst das, bevor das nächste element (also zb die 2.hoverbox) aktiviert wird müssen mindestens 6s vergehen? oder heisst das es dauert 6s bis die navigation aufgebaut ist... -> die elemente... ne is auch quatsch....
hab nochmal gesucht: hier is die seite von der das script geklaut is: http://www.competo-sports.org/index.html merke da nix von 6s

edit: habs gefunden:
#nav li.on1 ul, #nav li.on2 ul, #nav li.on3 ul, #nav li.on4 ul, #nav li.on5 ul, #nav li.on6 ul {
display: block;
z-index: 6000;
}
#nav li.off:hover ul {
display: block;
z-index: 6000;
}


mal schaun ob das reicht^^

edit: es reicht nicht :(
kann mir wer sagen was ich falsch mache?

java atm +-
<script language="JavaScript">
function menu(id) {
if(id == 1) {
document.getElementById('navtext1').className = 'on1';
document.getElementById('navtext2').className = 'off';
document.getElementById('navtext3').className = 'off';
document.getElementById('navtext4').className = 'off';
document.getElementById('navtext5').className = 'off';
document.getElementById('navtext6').className = 'off';

} else if(id == 2) {
document.getElementById('navtext2').className = 'on2';
document.getElementById('navtext1').className = 'off';
document.getElementById('navtext3').className = 'off';
document.getElementById('navtext4').className = 'off';
document.getElementById('navtext5').className = 'off';
document.getElementById('navtext6').className = 'off';
window.setTimeout("document.getElementById('navtext1').className = 'on1';", 6000);
window.setTimeout("document.getElementById('navtext2').className = 'off';", 6000);
} else if(id == 3) {
document.getElementById('navtext3').className = 'on3';
document.getElementById('navtext1').className = 'off';
document.getElementById('navtext2').className = 'off';
document.getElementById('navtext4').className = 'off';
document.getElementById('navtext5').className = 'off';
document.getElementById('navtext6').className = 'off';
window.setTimeout("document.getElementById('navtext1').className = 'on1';", 6000);
window.setTimeout("document.getElementById('navtext3').className = 'off';", 6000);
} else if(id == 4) {
document.getElementById('navtext4').className = 'on4';
document.getElementById('navtext1').className = 'off';
document.getElementById('navtext2').className = 'off';
document.getElementById('navtext3').className = 'off';
document.getElementById('navtext5').className = 'off';
document.getElementById('navtext6').className = 'off';
window.setTimeout("document.getElementById('navtext1').className = 'on1';", 6000);
window.setTimeout("document.getElementById('navtext4').className = 'off';", 6000);
} else if(id == 6) {
document.getElementById('navtext6').className = 'on6';
document.getElementById('navtext1').className = 'off';
document.getElementById('navtext2').className = 'off';
document.getElementById('navtext3').className = 'off';
document.getElementById('navtext4').className = 'off';
document.getElementById('navtext5').className = 'off';
window.setTimeout("document.getElementById('navtext1').className = 'on1';", 6000);
window.setTimeout("document.getElementById('navtext6').className = 'off';", 6000);
} else if(id == 0) {
document.getElementById('navtext1').className = 'off';
document.getElementById('navtext2').className = 'off';
document.getElementById('navtext3').className = 'off';
document.getElementById('navtext4').className = 'off';
document.getElementById('navtext5').className = 'off';
document.getElementById('navtext6').className = 'off';
}
}
</script>


css atm +-
.on1, .on2, .on3, .on4, .on5, .on6 {
display: block;
z-index: 6000;
}
.off{
display: block;
z-index: 6000;
}
.navmain{
width:1000px;
height:64px;
background:url('Bilder/header__16.jpg');
float:left;
}
.nav1{
height:37px;
width:89px;
float:left;
background:url('Bilder/header_15.jpg');
}
.nav2{
height:37px;
width:102px;
float:left;
background:url('Bilder/header_17.jpg');
}
.nav3{
height:37px;
width:85px;
float:left;
background:url('Bilder/header_19.jpg');
}
.nav4{
height:37px;
width:102px;
float:left;
background:url('Bilder/header_21.jpg');
}
.nav5{
height:37px;
width:95px;
float:left;
background:url('Bilder/header_23.jpg');
}
.nav6{
float:left;
height:37px;
width:74px;
background:url('Bilder/header_25.jpg');


html atm +-
<div class="navmain">
<div class="nav8"></div>
<div class="nav1" onmouseover="menu(1)"></div>
<div class="nav2" onmouseover="menu(2)"></div>
<div class="nav3" onmouseover="menu(3)"></div>
<div class="nav4" onmouseover="menu(4)"></div>
<div class="nav5" onmouseover="menu(5)"></div>
<div class="nav6" onmouseover="menu(6)"></div>
<div class="nav7"></div>
<br/>
<div>
<div id="navtext1">test asdf asd</div>
<div id="navtext2">test asadfasdas</div>
<div id="navtext3">test asdfasdfd dsdfa a </div>
<div id="navtext4"></div>
<div id="navtext5"></div>
<div id="navtext6"></div>
</div>

</div>

da tut sich rein garnix :(
ich meine ich hätte gelesen dass man javascripts extern einbinden muss
wenns daran liegt.... lad ichs halt so hoch^^ aber mein anderes "browser updaten" script läuft ja auch 1a :(

ne idee?

edit³: is das eingetlich legal? scripts einfach so von seiten zu fischen? ich glaub kaum aber viel wichtiger: interresiert das wen? ich mein wer prüft schon jedes js nach? und kann mans bei so simplen scripts überhaupt nachvollziehen wohers kommt?


Zuletzt editiert von Dafoxx am 18.05.2009 um 23:50 Uhr (3x Editiert)
Inaktiv
|
Nachtmeister


Specialist




Herkunft: Bern
Beiträge: 2091
 # Antwort: 5 - 19.05.2009 um 00:09 Uhr
Nein, so etwas ist nicht legal. Oder ist es legal, wenn dir jemand deinen Code klaut?


------------------
"God created the universe in 1 Day, and then spent 5 days making it look good In Internet Explorer"

Inaktiv
|
Dafoxx
Thread-Ersteller


King for a day





Beiträge: 244
 # Antwort: 6 - 19.05.2009 um 17:52 Uhr
ja ne
aber kannste mirs trotzdem erklären ?
hab den selben code ja auch noch auf ner freeware seite gefunden.... so isses ja nich.
nur hat der hier 6 buttons und der auf der freewareseite hatte nur 2 den link such ich noch....
da isser:
http://www.jswelt.de/showscript.php?artid=983230401#

edit ²: hab auch schon bei jswelt im forum geschaut und in den kommentaren gewälzt nur:
ich hab die erfahrung gemacht dass jswelt ein forum ohne freundlichkeit, kompetenz und kostenlosen support is. ob man da hilfe findet oder nur dumme anmache is irgendwie glückssache - aber ich will ja net schlecht reden. jedenfalls hab ich ca 500 themen zu den layerscripts gefunden, und nachdem die ersten 20 entweder mit links zu seiten, dies nimmer gibt, blöden anmachen oder rückfragen ohne antwort vollgestopft waren hol ich mir lieber hier den suport. wollte nur nich den eindruck machen ich würd net suchen


Zuletzt editiert von Dafoxx am 19.05.2009 um 19:56 Uhr (2x Editiert)
Inaktiv
|
Nachtmeister


Specialist




Herkunft: Bern
Beiträge: 2091
 # Antwort: 7 - 19.05.2009 um 20:23 Uhr
Binde es erstmal extern ein. Dann kontrollier mal, ob die ID's die er anspricht, auch vorhanden sind.

Ich hab mich jetzt nicht so in das Script eingelesen. Ich hab leider auch nur 'nen Javascript Grundkurs. Den Rest mach ich per jQuery. Such dir doch mal ein jQuery Menü nach deinen Wünschen. Die sind einfacher anzupassen und besser dokumentiert und bringen meistens auch die Funktion mit, auch ohne eingeschaltenes Javascript funktionieren zu können.

Ich hab meine Hand leider heute verknackst und kann gerade nicht so gut tippen. Deswegen musst ein bischen auf eigene Faust suchen.


------------------
"God created the universe in 1 Day, and then spent 5 days making it look good In Internet Explorer"

Inaktiv
|
Dafoxx
Thread-Ersteller


King for a day





Beiträge: 244
 # Antwort: 8 - 19.05.2009 um 20:26 Uhr
werd ich... gute besserung!
und thx... hatte bis jez noch nic was von jQuery gehört... werd gleich mal googeln
hab was gefunden
thx für den tipp!
http://jqueryui.com/home
kann ich jedem empfehlen, der mal irgendwas in richtung tab, einfache animationen usw sucht.... geile seite und echt einfach einzubaun! (anpassen hat ne weile gedauert, aber wenn ich net ständig in der falschen datei rumgewurschtelt hätte wär auch das schnell gegangen )
in diesem sinne: der tipp war gold wert (thx!)


Zuletzt editiert von Dafoxx am 01.06.2009 um 02:00 Uhr (2x Editiert)
Inaktiv
|
Antworten: 8
Seite [1]


Sie müssen sich registrieren, um zu antworten.

ClanSphere Project - Mailus - Imprint - Disclaimer - Scriptinfo