Suche im Forum:
Suchen


Autor Nachricht
Beitrag09.08.2010 um 17:30 (UTC)    
Titel: [Frage]: Aufklappmenü für Text

Hi ich wollte fragen ob das Möglich ist, dieses Aufklappmenü mit meinem Button bestehen aus Bilder mit Mouseovereffekt zu kominieren

Es soll so funktionieren Wenn ich auf meinen Button klicke soll sich das nach unten aufklappen der Mouseovereffekt soll aber nicht entfernt werden

Wer nicht versteht was ich meine dann bitte schreiben ^^

Mein Button

Code:
<img src="http://img.webme.com/pic/s/superspinsonic/einoutmouse.png" onmouseover="this.src='http://img.webme.com/pic/s/superspinsonic/einonmouse.png';" onmouseout="this.src='http://img.webme.com/pic/s/superspinsonic/einoutmouse.png';" onclick="this.src='http://img.webme.com/pic/s/superspinsonic/einklickmouse.png';" border="0" alt=" " title="Link weiterleiten" width="90" height="32" />


Aufklappmenü

Code:
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" /><style type="text/css">
<!--
#containerul, #containerul ul{
text-align:left;
margin:0; /* Removes browser default margins applied to the lists. */
padding:0; /* Removes browser default padding applied to the lists. */
}

#containerul li{
margin:0 0 0 30px; /* A left margin to indent the list items and give the menu a sense of structure. */
padding:0; /* Removes browser default padding applied to the list items. */
list-style-type:none; /* Removes the bullet point that usually goes next to each item in a list. */
}

#containerul .symbols{ /* Various styles to position the symbols next to the items in the menu. */
float:left;
padding-left:15px;
width:50px;
height:17px;
background-position:0 50%;
background-repeat:no-repeat;
}
--></style><script type="text/javascript">
<!--
var temp, temp2, cookieArray, cookieArray2, cookieCount;
function initiate(){
cookieCount=0;
if(document.cookie){
cookieArray=document.cookie.split(";");
cookieArray2=new Array();
for(i in cookieArray){
cookieArray2[cookieArray[i].split("=")[0].replace(/ /g,"")]=cookieArray[i].split("=")[1].replace(/ /g,"");
}
}
cookieArray=(document.cookie.indexOf("state=")>=0)?cookieArray2["state"].split(","):new Array();
temp=document.getElementById("containerul");
for(var o=0;o<temp.getElementsByTagName("li").length;o++){
if(temp.getElementsByTagName("li")[o].getElementsByTagName("ul").length>0){
temp2 = document.createElement("span");
temp2.className = "symbols";
temp2.style.backgroundImage = (cookieArray.length>0)?((cookieArray[cookieCount]=="true")?"url(HIER BILD-URL FÜR SCHLIESSEN)":"url(HIER BILD-URL FÜR ÖFFNEN)"):"url(HIER BILD-URL FÜR ÖFFNEN)";
temp2.onclick=function(){
showhide(this.parentNode);
writeCookie();
}
temp.getElementsByTagName("li")[o].insertBefore(temp2,temp.getElementsByTagName("li")[o].firstChild)
temp.getElementsByTagName("li")[o].getElementsByTagName("ul")[0].style.display = "none";
if(cookieArray[cookieCount]=="true"){
showhide(temp.getElementsByTagName("li")[o]);
}
cookieCount++;
}
else{
temp2 = document.createElement("span");
temp2.className = "symbols";
temp2.style.backgroundImage = "url(page.png)";
temp.getElementsByTagName("li")[o].insertBefore(temp2,temp.getElementsByTagName("li")[o].firstChild);
}
}
}

function showhide(el){
el.getElementsByTagName("ul")[0].style.display=(el.getElementsByTagName("ul")[0].style.display=="block")?"none":"block";
el.getElementsByTagName("span")[0].style.backgroundImage=(el.getElementsByTagName("ul")[0].style.display=="block")?"url(HIER BILD-URL FÜR SCHLIESSEN)":"url(HIER BILD-URL FÜR ÖFFNEN)";
}

function writeCookie(){ // Runs through the menu and puts the "states" of each nested list into an array, the array is then joined together and assigned to a cookie.
cookieArray=new Array()
for(var q=0;q<temp.getElementsByTagName("li").length;q++){
if(temp.getElementsByTagName("li")[q].childNodes.length>0){
if(temp.getElementsByTagName("li")[q].childNodes[0].nodeName=="SPAN" && temp.getElementsByTagName("li")[q].getElementsByTagName("ul").length>0){
cookieArray[cookieArray.length]=(temp.getElementsByTagName("li")[q].getElementsByTagName("ul")[0].style.display=="block");
}
}
}
document.cookie="state="+cookieArray.join(",")+";expires="+new Date(new Date().getTime() + 365*24*60*60*1000).toGMTString();
}
//-->
</script>
<ul id="containerul">
<li><font size="3">Titel Thema 1</font>
<br>
<br>
<ul>
Beispiel-Text 1. <br>
Hier könnte man nun alles mögliche Beschreiben , Bilder einfügen, oder Codes zum kopieren anbieten.
<br>
<hr>
</ul>
<p>
</li>
<li><font size="3">Titel Thema 2</font>
<br>
<br>
<ul>
Beispiel-Text 2<br>
Hier könnte man nun alles mögliche Beschreiben , Bilder einfügen, oder Codes zum kopieren anbieten.
<br>
<hr>
</ul>
<p>
</li>
<li><font size="3">Titel Thema 3</font>
<br>
<br>
<ul>
Beispiel-Text 3<br>
Hier könnte man nun alles mögliche Beschreiben , Bilder einfügen, oder Codes zum kopieren anbieten.
<br>
<hr>
</ul>
<p>
</li>
<script type="text/javascript">
initiate(); // This must be placed immediately after the menu in order to format it properly.
</script>



[Habe noch einen Satz hinzugefügt den ich vergessen habe, deswegen einmal Editiert Very Happy]


Zuletzt bearbeitet von brawl-crushers am 09.08.2010, 18:32, insgesamt einmal bearbeitet
Beitrag09.08.2010 um 17:48 (UTC)    
Titel:

Rein theoretisch redest du ja von einem Cool/Drop-Dwon Menue, dass nur aus einem Menuepunkt besteht.

Schau dir dazu mal dieses Tut an:
http://www.homepage-baukasten.de/forum/viewtopic.php?t=121876
______________
Rechtschreibfehler sind gewollt und erhöhen die Qualität des Beitrags.
Beitrag09.08.2010 um 18:50 (UTC)    
Titel:

eigentich nicht, es ist dieses menü

http://vorschau.de.tl/Klappmen.ue.--s--Text.htm

aber es soll mein button eingefügt werden ^^
Beitrag09.08.2010 um 19:09 (UTC)    
Titel:

du willst den Code beibehalten? Nur deine Grafiken mit der "Öffnen" und "Schliessen" Grafik austauschen? Das geht so:


Code:
[...]
cookieArray=(document.cookie.indexOf("state=")>=0)?cookieArray2["state"].split(","):new Array();
temp=document.getElementById("containerul");
for(var o=0;o<temp.getElementsByTagName("li").length;o++){
if(temp.getElementsByTagName("li")[o].getElementsByTagName("ul").length>0){
temp2 = document.createElement("span");
temp2.className = "symbols";
temp2.style.backgroundImage = (cookieArray.length>0)?((cookieArray[cookieCount]=="true")?"url(HIER BILD-URL FÜR SCHLIESSEN)":"url(HIER BILD-URL FÜR ÖFFNEN)"):"url(HIER BILD-URL FÜR ÖFFNEN)";
temp2.onclick=function(){
showhide(this.parentNode);
writeCookie();
}
temp.getElementsByTagName("li")[o].insertBefore(temp2,temp.getElementsByTagName("li")[o].firstChild)
temp.getElementsByTagName("li")[o].getElementsByTagName("ul")[0].style.display = "none";
if(cookieArray[cookieCount]=="true"){
showhide(temp.getElementsByTagName("li")[o]);
}
cookieCount++;
}
else{
temp2 = document.createElement("span");
temp2.className = "symbols";
temp2.style.backgroundImage = "url(page.png)";
temp.getElementsByTagName("li")[o].insertBefore(temp2,temp.getElementsByTagName("li")[o].firstChild);
}
}
}

function showhide(el){
el.getElementsByTagName("ul")[0].style.display=(el.getElementsByTagName("ul")[0].style.display=="block")?"none":"block";
el.getElementsByTagName("span")[0].style.backgroundImage=(el.getElementsByTagName("ul")[0].style.display=="block")?"url(HIER BILD-URL FÜR SCHLIESSEN)":"url(HIER BILD-URL FÜR ÖFFNEN)";
}
[...]
_____

[...]
temp=document.getElementById("containerul");
for(var o=0;o<temp.getElementsByTagName("li").length;o++){
if(temp.getElementsByTagName("li")[o].getElementsByTagName("ul").length>0){
temp2 = document.createElement("span");
temp2.className = "symbols";
temp2.style.backgroundImage = (cookieArray.length>0)?((cookieArray[cookieCount]=="true")?"url(HIER BILD-URL FÜR SCHLIESSEN)":"url(HIER BILD-URL FÜR ÖFFNEN)"):"url(HIER BILD-URL FÜR ÖFFNEN)";
temp2.onclick=function(){
showhide(this.parentNode);
writeCookie();
[...]


Bei (HIER BILD-URL FÜR SCHLIESSEN) und (HIER BILD-URL FÜR ÖFFNEN) einfach die URL von deiner Grafik einfügen.


lg
Jonas
______________
Updates:
http://twitter.com/JonasKaufmann

Danke dass ich im Baukasten so viel lernen & erfahren durfte!

Beitrag09.08.2010 um 19:11 (UTC)    
Titel:

genau das will ich nur dass der Mousovereffekt der zum Button dabei ist auch bleibt
Beitrag09.08.2010 um 22:30 (UTC)    
Titel:

Ah achso, jetzt bin ich dabei.
Ich nehme stark an, dass der Hover über JavaScript eingebaut werden
muss ,da die Anzeige der Buttons scheinbar mit JavaScript geregelt wird.

Da ich kein Java kann:
Tut mir sry, keine Ahnung.
______________
Rechtschreibfehler sind gewollt und erhöhen die Qualität des Beitrags.
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de