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

Spoiler mit Verlinkten Cover

A

Akirazx3

Neues Mitglied
Hai Leute,
Ich bin auf der Suche auf ein HTML code für ein Spoiler.
Er sollte aber so sein das Ich da ein Titel einfügen kann hier mal ein Beispiel:

Ego-Shooter [Aufklappen]
Black Ops II

Ego-Shooter ist der Titel - Aufklappen sagt es ja schon - zum aufklappen (soll man natürlich auch wider schließen koennen)
Black Ops II ist dan halt der angezeigte text. Ich hoffe ich versteht was ich meine.

Koennte man das vllt. auch so machen das stat der Text Black Ops II ein Cover von Black Ops 2 wäre, so das wenn man drauf klickt auf eine andre seite weiter geleitet wird?
Das Cover sollte dan aber die größe von max. 50x75px sein, so das man 5 weiter Cover von andren spielen einfügen kann.


Wäre echt cool wenn ihr mir Heflen keonnte.

Mfg. AkirazLP
 
Akirazx3 schrieb:
Hai Leute,
Ich bin auf der Suche auf ein HTML code für ein Spoiler.
Er sollte aber so sein das Ich da ein Titel einfügen kann hier mal ein Beispiel:

Ego-Shooter [Aufklappen]
Black Ops II

Ego-Shooter ist der Titel - Aufklappen sagt es ja schon - zum aufklappen (soll man natürlich auch wider schließen koennen)
Black Ops II ist dan halt der angezeigte text. Ich hoffe ich versteht was ich meine.

Koennte man das vllt. auch so machen das stat der Text Black Ops II ein Cover von Black Ops 2 wäre, so das wenn man drauf klickt auf eine andre seite weiter geleitet wird?
Das Cover sollte dan aber die größe von max. 50x75px sein, so das man 5 weiter Cover von andren spielen einfügen kann.


Wäre echt cool wenn ihr mir Heflen keonnte.

Mfg. AkirazLP
Zum Vergrößern anklicken....

Hallo, nur mit HTML wird das nichts, da muss JavaScript her!

Cover:
Code: 
<img src="" height="" width="" alt="" />

Weiterleitung:
Code: 
<a href="neue_seite.php">link</a>
<a href="neue_seite.php"><img src="" height="" width="" alt="" /></a>

Ich hoffe ich habe verstanden was du meintest ;)

Frohe Weihnachten :)
 
Hai, ich muss sagen das ich ein Absoluter noob bin in der Sache Programierung, deswegen habe ich jetzt auch keine ahnung wie ich das jetzt mit dem code mache.

Ich denke mal der Erste code ist ja nur dafür da das, das Cover Angezeigt wird oder? und der Zweite dafür das wenn man drauf Klickt weiter geleitet wird?

Wenn ja, wie arbeiten die Codes zusammen? weil ich will ja mehrer Cover neben einander haben :D
 
Ja der erste Code ist dazu da. Der soll dir dein Cover in die Seite mit einfügen, dort kannst du dann auch sämtliche weitere änderungen vornehmen z.b. Größe.

HTML: 
  <div><div class="pre-spoiler"><input name="button" type="button" style="width:120px;font-size:10px;margin:0px;padding:0px;margin-bottom:30px" onClick="spoil(this);" value="Ego-Shooter [Aufklappen]"/></div> <div><div class="spoiler" style="display: none;">
        <p>
                <img src="" height="" width="" alt="" />   <!-- Hier musst du dein Cover einfügen bei src musst du den Pfad der Datei eingeben der Rest ist denke ich klar (: --> 
     
                <img src="" height="" width="" alt="" />   <!-- Das gleiche kannst du dann immer so weiter machen -->

                <img src="" height="" width="" alt="" />   <!-- So viele Cover wie du willst -->

                <a href=""><img src="" height="" width="" alt="" /></a>
        </p>
        </div><div><div class="spoiler" style="display: none;">

Code: 
 <script type="text/javascript">
    function spoil(me) {
    if (me.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') {
    me.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';
    me.innerText = '';
    me.value = 'Ego-Shooter [Schließen]'; //Hier soll rein, was stehen soll, wenn der Spoiler offen ist und geschlossen werden soll.
    } else {
    me.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none';
    me.value = 'Ego-Shooter [Aufklappen]';  //Hier soll rein was auf dem Button steht, bevor der Spoiler sich öffnet.
    }}
    </script>

Den Rest des Rest des Skripts brauchst du nicht ändern. Du musst ihn nun nur noch in den head bereich einfügen.

Um deine Frage zu beantworten wie die Codes zusammen arbeiten. Der eine Code mit dem img ist für das Bild zuständig und der darunter fügt dem Bild einen Link hinzu zu einer Seite deiner Wahl :D.
Also dient der zweite Code zu Verlinkung zu einer anderen Seite und der obere soll ein Bild zur Seite hinzufügen.

Den ersten Code packst du an eine Stelle, deiner Wünsche nach und der zweite Code muss unbedingt in den Head-Bereich

Tut mir leid für die unordnung war nur schnell gemacht :D.

Kleiner Tipp noch ich würde im Div den value="Ego-Shooter [Aufklappen] gleich lassen.

Ich hoffe ich konnte dir helfen :D

Frohe Weihnachten
12kukan
 
Zuletzt bearbeitet:
Code: 
if (me.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '')

Hast du das selber geschrieben oder nur kopiert? Umständlicher geht es ja kaum noch.
 
Danke dir 12Kukan habe deine Codes übernommen, Ich konnte auch was damit anfangen danke :) ( habe mir gestern von 20:00 - 01:30 HTML-Codes angeguckt und ein bischen geübt, hat sehr geholfen! :D )

Jeztzt habe ich leider das Problem das die Cover unter einader sind, möchte sie aber nebeneinander :/

Unbenannt.jpg

Habe es auch schon ohne Spoiler ausprobiert also einfach nur mit

HTML: 
<a herf="LINK ADRESSE"><img scr="BILD ADRESSE" "einstellung" /></a>

geht aber auch nicht. Hat das irgendein grund? :s
 
du könntest den Bildern jeweils id's geben (oder eine class) und sie dann mit CSS ansprechen.

Ich würde es aber (wenn du es nebeneinander haben möchtest) mit einer Tabelle ansprechen.

Siehe: SELFHTML: HTML/XHTML / Tabellen / Aufbau einer Tabelle

Also in deinem Falle:
(das border kannst du dann wegmachen)
PHP: 
<table border=1>
  <tr>
     <td><a href="seite1.html"><img src="verzeichnis1/bild1.png" height="100" width="100" alt="Ein Bild" /></a></td>
     <td><a href="seite2.html"><img src="verzeichnis2/bild2.png" height="100" width="100" alt="Noch ein Bild" /></a></td>
  </tr>
</table>

Beachte:
Es heißt href=""
Es heißt src=""


 
Freut mich, dass ich dir helfen konnte (:
Ich würde probieren die Bilder zu verschieben. Du gibst jedem Bild eine ID z. b.
HTML: 
<a herf="LINK ADRESSE"><img id="mw3" scr="BILD ADRESSE" "einstellung" /></a>
HTML: 
<a herf="LINK ADRESSE"><img id="blackops" scr="BILD ADRESSE" "einstellung" /></a>
usw.
Nun gehst du in deine CSS Datei und schreibst die ID an Beispiel:

Code: 
#mw3 {
   margin-left: 300px;  // Hiermit kannst du den Abstand nach links aus von dem Bild einstellen also würde das Bild nun 300px vom Rand entfernt sein.
   margin-top: 20px;  //Hier das selbe du bestimmst den Abstand zur Decke oder zur 'top' :D
}
   usw.

Kleiner Tipp noch: Du kannst auch in den Minusberich gehen mit den Maßen z.b. anstatt 300px, sagst du -40px. Alles möglich (:

Das margin ist dazu da, um den Abstand um das Bild herum zu deklarieren(festzulegen).

Das ist nur ein vereinfachtes beispiel (:

Ob die Verlinkung zur ADRESSE mit kommt weiss ich ehrlich gesagt nicht genau, tut mir leid musst du mal ein bisschen rum tüfteln :P

Ich hoffe ich konnte dir damit helfen :D


EDIT: Habe nicht gesehen das ge_fabian schon geantwortet hat, sry.
Aber wir meinen ja ungefähr das gleiche :D
 
Mal eine Frage:
was soll :
PHP: 
"einstellung"
das hier?


&& was soll das hier:

PHP: 
herf="LINK ADRESSE"
Es heißt href=""

&& was soll das hier:
PHP: 
scr="BILD ADRESSE"
???

Es heißt src=""

Naja Frohe Weihnachten :)
 
oh lol ich habs falsch übernommen :/
Tut mir Leid eig. solte es anstatt herf, href heißen und anstatt scr, src sry mein fehler :/

Wahrscheinlich wollte er nicht alle möglichen Attribute aufführen und hat das ganze mit einstellungen abgekürtzt (:
 
12Kukan schrieb:
oh lol ich habs falsch übernommen :/
Tut mir Leid eig. solte es anstatt herf, href heißen und anstatt scr, src sry mein fehler :/

Wahrscheinlich wollte er nicht alle möglichen Attribute aufführen und hat das ganze mit einstellungen abgekürtzt (:
Zum Vergrößern anklicken....

Jap. ^^ Ich dachte mir, ihr wisst was ich meine :D:D

HTML: 
#mw3 {
   margin-left: 300px;  // Hiermit kannst du den Abstand nach links aus von dem Bild einstellen also würde das Bild nun 300px vom Rand entfernt sein.
   margin-top: 20px;  //Hier das selbe du bestimmst den Abstand zur Decke oder zur 'top' :D
}
   usw.

Muss das in den Header? :s ich habe echt keine ahnung sorii. :/

Koennte mir das jemand als ein Komplettes Beispiel zeigen? dann weiß ich wie das gemeint ist, wäre echt nett :)
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben