Paragraph-Inhalt ohne JS per onClick-Event ändern

[Grapefruit]

Erst mal ein "Hallo" an alle hier im Forum. Bin neu hier, beschäftige mich erst seit kurzem mit HTML und hoffe dass ich hier neben dem Spaß auch bald mindestens so viel Ratschläge geben kann wie ich kriege :).

Zu meiner Frage:

Ich habe ohne JavaScript eine kleine Gallery realisiert, dessen "BigPic" nach einem Klick auf eines der Thumbernails (minipicX) eben dieses Thumbernail anzeigt.

Das sah dann so aus:

<span class="completesplit">
<div id="picbigsplit">
            <img src="tisch.jpg" height="400px" name="bigpic">
            <img src="expic2.jpg" class="minipic" width="120"  height="100" name="minipic1" onClick="document.bigpic.src=document.minipic1.src">

Nun habe ich aber noch einen <p> unter meiner Gallery, dessen Inhalt sich als "Bildunterschrift" dynamisch je nach ausgewählten Bild ändern soll. Der <p> befindet sich zwar nicht im gleichen <div>, jedoch im gleichen <span>:

 <p id="description"> sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. </p>
</span>

Die ID hab ich gesetzt, weil ich ursprünglich vorhatte über "onclick="document.description.value=blablubb ringdingding">" im IMG-Tag das Ding zu ändern - klappt aber nicht. Liegt wohl auch vor allem daran, dass ich eigentlich keinen Plan über die möglichen Befehle beim OnClick event habe... die Gallery hab ich nur dank stundenlangen Rumprobieren hingekriegt - und hab nun kein Nerv mehr .


Hoffe mir ist zu helfen!



Grüße

 

[struppi]

Naja, dann musst du dich mit Javascript auseinandersetzen, was du möchtest ist nicht mit ein paar Zeilen Code getan. Vor allem wenn es noch gut aussehen soll.

 

[devilseye]

Korrigiert mich wenn ich dass falsch sehe aber ein span ist ein Inline element und darf keine Block elemente enthalten
Block darf in Block vorkommen jedoch nicht Block in inline.
Ansonsten könnte Switch Case eine Lösung sein.

 

[Wustersoss]

Bin neu hier, beschäftige mich erst seit kurzem mit HTML und hoffe dass ich hier neben dem Spaß auch bald mindestens so viel Ratschläge geben kann wie ich kriege

Wenn du erst seit kurzem Html lernst, würde ich noch nicht mit Javascript anfangen. Es ist besser wenn du erst mal mit HTML und CSS experementierst bist du dir ganz sicher bist was so im Einzelnen passiert.

Eine Galerie nur mit HTML und CSS ist schon die ganz hohe Kunst des Webdesigns. Javascript mag zwar auf den ersten Blick einfach erscheinen, hält aber viele Fallstricke bereit.

Ich würde an deiner Stelle erst mal alles Lesen und Lernen über HTML und CSS und was in welchem Browser funktioniert.

Die HTML Elemente im Überblick hast du hier: HTML5 Doctor, helping you implement HTML5 today
Einen Überblick über die Selektoren findest auf: Selectors Level 3
Eine Browserübersicht ist auf dieser Seite zu finden: HTML5 & CSS3 Support, Web Design Tools & Support - FindMeByIP - CSS3 & HTML5 Browser Support
Layouts gibt es hier:HTML5 & CSS3 Support, Web Design Tools & Support - FindMeByIP - CSS3 & HTML5 Browser Support

Lesen sollte man auch:
Einfhrung - berblick
Publikationen (Webdesign, Webentwicklung, Barrierefreiheit, Usability)
CSS 4 You - The Finest in Stylesheets: Workshop CSS: Allgemeines
und vieles mehr...

Tipps und Tricks mit HTML und CSS gibt es zuhauf im Internet.

 

[struppi]

Korrigiert mich wenn ich dass falsch sehe aber ein span ist ein Inline element und darf keine Block elemente enthalten

Was zeigt, dass Grapefruit noch an seinen HTML Kenntnissen feilen könnte.

 

[Tronjer]

Die ID hab ich gesetzt, weil ich ursprünglich vorhatte über "onclick="document.description.value=blablubb ringdingding">" im IMG-Tag das Ding zu ändern - klappt aber nicht. Liegt wohl auch vor allem daran, dass ich eigentlich keinen Plan über die möglichen Befehle beim OnClick event habe... die Gallery hab ich nur dank stundenlangen Rumprobieren hingekriegt - und hab nun kein Nerv mehr .


Hoffe mir ist zu helfen!



Grüße

Ich würde dir auch empfehlen, das Projekt erst einmal hinten anzustellen und dich statt dessen mit den Sprachen auseinander zu setzen. Eine Bildergalerie über CSS ist theoretisch wahrscheinlich möglich, aber wohl aufwändiger umzusetzen, als mit den zahlreichen jQuery-Plugins, die man im Netz so herunterzuladen kann.

Wenn es dir trotzdem keine Ruhe lassen sollte, dann google nach Javascript Eventhandlern und documentGetElementById().src für die Bilder, respektive documentGetElementById().innerHTML für die entsprechenden Bildunterschriften.

 

[Grapefruit]

---

Vielen Dank für die zahlreichen Antworten und entschuldigt bitte, dass ich mich erst so spät melde.

Dass man kein <div> im <span> haben darf ist gut zu wissen, vielen Dank. Mein Vorhaben hat zwar auf meine Weise soweit funktioniert, aber wo liegt dann der Nachteil, wenn man das <div> in den <span> Bereich setzt?

Vor allem an Wustersoss vielen Dank für die zahlreichen Links - werd ich mir mal alle anschauen.


Meine Galerie habe ich ja mit reinem HTML und css hingekriegt, das wie folgt aussah:


Im Style-sheet:

.minipic { position:absolute; top: 10px; left: 611px; border:1px solid #666;}    
.minipic2 { position:absolute; top: 71px; left: 640px; border:1px solid #666;}    
.minipic3 { position:absolute; top: 130px; left: 610px; border:1px solid #666;}    
.minipic4 { position:absolute; top: 185px; left: 640px; border:1px solid #666;}    
.minipic5 { position:absolute; top: 241px; left: 611px; border:1px solid #666;}    
.minipic6 { position:absolute; top: 296px; left: 640px; border:1px solid #666;}    
.minipic:hover, .minipic2:hover, .minipic3:hover, .minipic4:hover, .minipic5:hover, .minipic6:hover {z-index:100; margin-top:-2px; cursor:pointer;}

Und im Code:

<div class="nosplit">
<div id="picbigsplit">            
<img src="expic2.jpg" height="400px" name="bigpic">            
<img src="expic2.jpg" class="minipic" width="120"  height="100" name="minipic1" onClick="document.bigpic.src=document.minipic1.src">            
<img src="expic3.jpg" class="minipic2" width="120" height="100" name="minipic2" onClick="document.bigpic.src=document.minipic2.src">            
<img src="expic4.jpg" class="minipic3" width="120" height="100" name="minipic3" onClick="document.bigpic.src=document.minipic3.src">            
<img src="expic5.jpg" class="minipic4" width="120" height="100" name="minipic4" onClick="document.bigpic.src=document.minipic4.src">            
<img src="expic6.jpg" class="minipic5" width="120" height="100" name="minipic5" onClick="document.bigpic.src=document.minipic5.src">            
<img src="expic7.jpg" class="minipic6" width="120" height="100" name="minipic6" onClick="document.bigpic.src=document.minipic6.src">        
</div>
</div>

Das funktioniert eigentlich auch wunderbar. Warum ist meine Methode denn nun inakzeptabel und sollte stattdessen mit java gemacht werden?



Grüße und schönes Wochenende!

 

[devilseye]

wie gesagt span ist ein inline-Element was bedeutet

Inline-Elemente erzeugen keinen eigenen Absatz im Textfluss. Inline-Elemente sind als untergeordnete, "innere" Elemente für Block Elementen gedacht. Sie können in den meisten Fällen normalen Text und weitere Inline-Elemente enthalten, jedoch keine Block-Elemente. Ausnahmen oder Einschränkungen werden bei den Beschreibungen zu den einzelnen Elementen behandelt.

Ein Block Element

Block-Elemente erzeugen einen eigenen Absatz im Textfluss. Je nach Elementtyp kann der Browser dabei automatisch einen größeren Abstand zum vorangehenden Inhalt einfügen. So erzeugen die Browser beispielsweise beim p-Element einen sichtbaren Abstand, damit die Absatzschaltung vom einfachen Zeilenumbruch unterscheidbar ist. Beim div -Element dagegen wird beispielsweise einfach eine neue Zeile begonnen.
Block-Elemente können in der Regel normalen Text und inline Elemente enthalten. Einige Block-Elemente können auch andere Block-Elemente enthalten. Ausnahmen von der Regel werden bei den Beschreibungen zu den einzelnen Elementen behandelt.

quelle SelfHtml

 

[Grapefruit]

Sauber, vielen Dank.

Jetzt ist mir der Unterschied klarer... Habe bis jetzt immer ein großes <div> als "contentbox" für alles, das nichts mit dem logo und der navibar zu tun hatte genommen und darin dann <span>-Bereiche mit display:block eingesetzt. Nach der Definition nimmt man <span> also praktisch nur für besondere Hervorhebungen im Text und benutzt für das grobe Design fast immer <div>-Container, richtig?

Wenn mir jetzt noch jemand erklären könnte was an meiner HTML-Galerie schlecht ist (siehe http://www.html.de/html-und-xhtml/4...-js-per-onclick-event-aendern.html#post305818) könnte ich endlich wieder in Ruhe schlafen ;D.

 

[struppi]

Nach der Definition nimmt man <span> also praktisch nur für besondere Hervorhebungen im Text und benutzt für das grobe Design fast immer <div>-Container, richtig?

Nein. Das Spanelement benutzt man nur, wenn es kein anderes Element gibt, mit dem du diesen Absatz "beschreiben" kannst. Für eine besondere Hervorhebung gibt es strong oder em. Das ganze nennt sich semantisches HTML. Vorsprung durch Webstandards | Semantischer Code - Definitionen, Methoden, Zweifel
DIV und SPAN werden nur wirklich selten gebraucht. Das DIV z.b. um evtl. Elemente zu gruppieren oder um Elemente für JS zu benutzen, da für JS keine Semantik notwendig ist.