• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Javascrpit Slideshow mit Extras !

time77

Neues Mitglied
Javascript Menü Slideshow mit Extras !

Hallo ich möchte mit Javascript eine Art Menüslideshow bauen.
Ich möchte das so gestalten das die einzelnen Bilder zu den Themen eingeblendet werden, automatisch sollen an der seite die Themen "markiert" werden. Danach hätte ich es gerne so das Ich wenn ich auf ein Thema klicke das Bild zu dem Thema eingeblendet wird. Ich hoffe mir kan ein wenig geholfen werden. Danke schonmal im voraus.


Slideshow.jpg

Hier hab ich mal einen Link. Ich möchte es genauso wie diese Box (unten). Ich weiß nicht ob das in Javascript ist, aber ich denke schon. Ich hoffe mir kann einer helfen.
Hier der Link: Domains, Webspace, Domain Webhosting, Server-Hosting Provider ALL-INKL

Domains, Webspace, Domain Webhosting, Server-Hosting Provider ALL-INKL_1314287928936.jpg

Ein weiteres Beispiel bei 1&1 ! Ich hoffe immernoch das mir einer hilft (;
Link: http://www.1und1.info

1&1 Internet AG - Hosting, Domain, Server, Mail, Webspace, Shop_1314289431266.jpg
 
Zuletzt bearbeitet:
hi, das sind javascript und css zusammen. am besten machst du das so:
du erstellst css für deine boxen und tabs. z.B.:

#box > div {
display:none;
height:200px;
width:400px;
...
}
#tab > div {
float:left;
background:red;
...
}

die boxen sind normalerweise nicht sichtbar (display:none;). Dein HTML sollte in etwa so aussehen:

<div id="box">
<div sel="true">inhalt 1</div>
<div>inhalt 2</div>
</div>
<div di="tab">
<div sel="true" num="1">name 1</div>
<div num="2">name 2</div>
</div>

zwei passende elemente erhalten das attribut sel="true";
das musst du dann noch in css implementieren:

#box > div[sel=true] {
display:inherit;
}
#tab > div[sel=true] {
background:blue;
}

dein javascript sieht dann wie folgt aus:

document.getElementById("tab").onclick = function(e) {
box = document.getElementById("box");
for (var i in this.children) {
this.children.setAttribute("sel","false");
box.children.setAttribute("sel","false");
}
this.children.setAttribute("sel","true");
box.children.setAttribute("sel","true");
}

so müsste es eigentlich funktionieren. Solche tabs gibt es allerdings auch schon vorgefertigt für bibliotheken wie jQuery, ... Dann hast du auch noch einen Effekt.
mfg omoxen
 
In deinen beiden Beispiel ist das mit JavaScript und CSS realisiert. Genauer gesagt: beim Anklicken eines Elements wird ein anderes per JavaScript eingeblendet. Per CSS wird erreicht, dass dieses an einer bestimmten Stelle steht. Dafür braucht man eigentlich auch kein vorgefertigtes Script, nur einiges an CSS-Code und ein paar JavaScript-Zeilen.
 
Zurück
Oben