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

Bitte schnelle hilfe!

M

maex94

Neues Mitglied
Hey Leute,
Hab mich heute erst hier angemeldet und habe eine ganz dringende Frage :)
Und zwar würde ich gerne wissen, wie man in html folgendes schreibt:
Ich würde gerne eine Box erstellen, in die ich belibige sachen reintuen kann. Problem dabei ist, dass es sich mit einem klick auf einem Pfeil ausklappen lässt. Das heißt eine solche "CODE-Box":
Code: 
Bloß, dass man diese mit einem Pfeil auf und zu klappen kann.
Bitte helft mir...
Und bitte entschuldigt, dass ich nicht die sufu oder sowas genutzt habe, bloß ich weiß einfach nicht, wie soetwas heißt. Falls ihr es wisst her damit :P

Vielen Dank.
Mit freundlichen Grüßen.
 
So...Habe jetzt einen Script bei google gefunden. Nun habe ich aber noch ein Problem. Und zwar würde ich es gerne so haben, dass der Pfeil sich nach dem Draufklicken ändert bzw. dass ein sich ein anderes Bild zeigt (z.b. ein umgedrehter Pfeil)
hier mal der Code:
Code: 
<html>
<style type="text/css">
	#x1, #x2, #x3, #x4, #x5, #x6, #x7 {
		display: none;
	}
</style>
</head>
<script type="text/javascript">
function wechsel(wert) 
{ 
  
  obj = document.getElementsByTagName("div");
		    if (obj[wert].style.display == 'block'){
		        obj[wert].style.display = 'none';
		    } else {
		        obj[wert].style.display = 'block';
		    }
}
</script>
<body>
<div>Bild 1</div>
<a href="javascript:wechsel('x1');"><img src="pfeil.png" alt="bild1" /></a><div id="x1">Inhalt zu Bild 1</div>
<div>Bild 2</div>
<a href="javascript:wechsel('x2');"><img src="pfeil.png" alt="bild2" /></a><div id="x2">Inhalt zu Bild 2</div>
<div>Bild 3</div>
<a href="javascript:wechsel('x3');"><img src="pfeil.png" alt="bild3" /></a><div id="x3">Inhalt zu Bild 3</div>
</body>
</html>
Danke schonmal im Vorraus.

MFG.
 
Code: 
function MauszeigerAendern() 
{ 
document.body.style.cursor = "wait"; 
} 
 
function MauszeigerZuruecksetzen() 
{ 
document.body.style.cursor = "default"; 
}
 
<a href=[COLOR=#0000ff]"javascript:MauszeigerAendern();"[/COLOR]></a>
<a href=[COLOR=#0000ff]"javascript:MauszeigerZuruecksetzen();"[/COLOR]></a>

sollte für normale curser funktionieren (statt wait halt was anderes)
 
@ HTMLooser
Danke für die antwort aber mustang hat recht... Ich hätte gerne, dass die Pfeil.png sich ändert :)
Aber trotzdem danke.
 
Für so etwas brauchst Du kein JavaScript. Das geht komplett mit CSS.

Code: 
<a href="">&nbsp;</a>
CSS
Code: 
a:link, a:visited, a:hover, a:active, a:focus {
 background-image: url(pfeil.png);
 display: block;
 float: left;
}

a:hover { background-image: url(pfeil2.png); }

Auch das auf- und zuklappen kann man darüber regeln (Stichwort: hover). Versteht dann nur der IE6 nicht.
 
threadi schrieb:
Für so etwas brauchst Du kein JavaScript. Das geht komplett mit CSS.

Code: 
<a href="">&nbsp;</a>
CSS
Code: 
a:link, a:visited, a:hover, a:active, a:focus {
 background-image: url(pfeil.png);
 display: block;
 float: left;
}

a:hover { background-image: url(pfeil2.png); }

Auch das auf- und zuklappen kann man darüber regeln (Stichwort: hover). Versteht dann nur der IE6 nicht.
Zum Vergrößern anklicken....

Man kann das Ein- und Ausblenden über CSS :hover steuern, aber nicht ein auf und zuKLAPPEN. Ein Klappen beinhaltet für mich eine Animation.

Das könnte man z.B. mit slideDown/slideToggle oder animate() aus dem jquery-Framework hinkriegen.
Nur fürs einblenden ist natürlich :hover super.
 
Beispiel mit jQuery (mag einfacher gehen):

HTML: 
<!DOCTYPE html>

<html>

    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <title>New</title>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function () {
                $('.expandable-box').prepend($('<div class="header"><img src="ArrowDown.png" /></div>'))
                    .children('.content')
                        .hide();

                $('.expandable-box .header').toggle(function () {
                    $(this).next('.content').toggle('fast');
                    $(this).html('<img src="ArrowUp.png" />');
                }, function () {
                    $(this).next('.content').toggle('fast');
                    $(this).html('<img src="ArrowDown.png" />');
                });
            });
        </script>

        <style type="text/css">
.expandable-box {
    border: 1px solid #ccc;
    width: 300px;
    margin: 20px;
}

.expandable-box .header {
    text-align: right;
    background: #ffc;
    cursor: pointer;
    height: 20px;
}

        </style>

    </head>

    <body>
        <div class="expandable-box">
            <div class="content">
                <p>Hello, World!</p>
            </div>
        </div>

        <div class="expandable-box">
            <div class="content">
                <p>Hello, World!</p>
            </div>
        </div>

        <div class="expandable-box">
            <div class="content">
                <p>Hello, World!</p>
            </div>
        </div>

        <div class="expandable-box">
            <div class="content">
                <p>Hello, World!</p>
            </div>
        </div>
    </body>

</html>
 
@mermshaus
Danke. Mit jQuery hat es super geklappt. Ihr könnt euch ja mal das resultat angucken :)

avesproduction und dann unter html Homepage und dann den Banner My works. :)

MFG.

Ich denke das Thema kann jetzt auch geclosed werden :D
 
Zuletzt bearbeitet:
Kleiner Tip:
Du hast den Rollover-Effect eingebaut für die Images. Wenn ich die nun zum ersten Mal lade (sprich noch nicht im Cache habe), so gibt es immer eine kleine Verzögerung beim Laden und es ist zwischendurch kein Bild / ALT-Text zu sehen.

Umgehen kannst du das ganze, in dem du das Bild, was beim Rollover-Effect angezeigt wird, in einer Variable speicherst und dann einsetzt.

Beispiel:
Code: 
var Img1 = new Image(); Img1.src = "path/to/img/";

In Img1 ist jetzt das Bild gespeichert und wird beim Laden der Seite direkt mitgeladen, sodass die Verzögerung nicht mehr auftritt.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben