1. Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!
    Information ausblenden

[ERLEDIGT] wasserzeichen auf bild einfügen

Dieses Thema im Forum "Alles rund HTML und XHTML" wurde erstellt von _R_A_L_F_, 20 Dezember 2016.

  1. _R_A_L_F_

    _R_A_L_F_ Mitglied

    Registriert seit:
    16 Februar 2014
    Beiträge:
    138
    Punkte für Erfolge:
    18
    Hallo zusammen,

    ich hab ein Problem mit Einfügen eines Wasserzeichens per CSS.

    Und zwar gehts um eine Bildergallerie welches ein kleines Bild zeigt auf der Website und wenn ich darauf klicke öffnet sich dann das große in einer Gallerie zum durchzappen.

    Ich gebe die Bilder per Schleife aus und der HTML Code schaut wie folgt aus:

    HTML:
    1.                                    
    2. <div class="grid_3">
    3.     <figure><div class="bild_wasserz"><div class="wasserz">&nbsp;</div><a href="bild.jpg" class="magnifier2"></div>
    4. <img src="bild.jpg" class="kl"><span class="zoom"></span></a></figure>
    5. </div>
    6.  
    CSS dazu:
    HTML:
    1.  
    2. .bild_wasserz {
    3.  position: relative;
    4. }
    5.  
    6. .wasserz {
    7.  position: absolute;
    8.  left: 200px;
    9.  top: 250px;
    10.  width: 500px;
    11.  height: 50px;
    12.  background-image:url(../images/wasserzeichen.png);
    13.  background-repeat: no-repeat;
    14. }
    15.  
    Falls die anderen CSS Klassen auch noch benötigt werden, ergänze ich diese auch noch gerne aber denke ich mache in den beiden beschriebenen bereits einen Fehler.

    Ich möchte erreichen, dass das Wasserzeichen beim großen Bild angezeigt wird.

    Danke schon mal ;)
     
    Werbung:

    Jetzt registrieren, damit diese Werbung verschwindet
  2. Spicelab

    Spicelab Mod | ZENmechanic Team Moderator

    Registriert seit:
    27 November 2015
    Beiträge:
    1.569
    Punkte für Erfolge:
    83
    Nö. Dafür aber im HTML-Code, der fatale Folgen bei der Ausgabe hat.

    Anhand der Texteinrückung leicht zu erkennen, dass hinten raus mit den schließenden </div>-Tags was nicht stimmen kann:
    Code (html5):
    1. <div class="grid_3">
    2.   <figure>
    3.     <div class="bild_wasserz">
    4.       <div class="wasserz">&nbsp;</div>
    5.       <a href="bild.jpg" class="magnifier2"></div>
    6.         <img src="bild.jpg" class="kl">
    7.         <span class="zoom"></span>
    8.       </a>
    9.   </figure>
    10. </div>
    ... und tatsächlich, .bild_wasserz wird in Zeile 5 vorzeitig geschlossen, was in Deinem präsentierten Code-String so nicht direkt ins Auge fallen mag.

    Umso mehr bei https://jsfiddle.net/SpiceLab/4g97ckts/

    Zum Vergleich zwischen </a></figure> an der richtigen Stelle gesetzt: https://jsfiddle.net/SpiceLab/25pt4f89/

    Moderation: Thema von CSS nach HTML verschoben.
     
    _R_A_L_F_ gefällt das.
  3. _R_A_L_F_

    _R_A_L_F_ Mitglied

    Registriert seit:
    16 Februar 2014
    Beiträge:
    138
    Punkte für Erfolge:
    18
    Danke Spicelab für deine Antwort. Der Vergleich zeigt den Fehler ja deutlich.

    ABER: Leider funktioniert es immer noch nicht obwohl ich den Code entsprechend abgeändert habe wie oben beschrieben.

    Im Link unten sieht man ja wie das Ergebnis aktuell aussieht.
     
    Zuletzt bearbeitet: 22 Dezember 2016
  4. Sempervivum

    Sempervivum Mitglied

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    99
    Punkte für Erfolge:
    8
    Poste doch mal die URL deiner Seite, dann kann man es leichter analysieren, als wenn man extra eine Testkonfiguration anlegt.
     
  5. _R_A_L_F_

    _R_A_L_F_ Mitglied

    Registriert seit:
    16 Februar 2014
    Beiträge:
    138
    Punkte für Erfolge:
    18
    der Link zur Seite lautet:

    http://www.siegl-web.de/wasserz/index.php

    Die Seite inkl. PHP sieht so aus:
    PHP:
    1.  
    2. <!DOCTYPE html>
    3. <html lang="de">
    4.         <head>
    5.         <title>Gallerie</title>
    6.         <meta charset="utf-8">
    7.         <link rel="stylesheet" href="css/style.css">
    8.        
    9.         <script src="js/jquery.js"></script>
    10.         <script src="js/jquery-migrate-1.2.1.js"></script>
    11.         <script src="js/jquery.easing.1.3.js"></script>
    12.         <script src="js/script.js"></script>
    13.         <script src="js/touchTouch.jquery.js"></script>
    14.         <script src="js/jquery.tools.min.js"></script>
    15.  
    16.         </head>
    17. <body>
    18.  
    19. <div class="main">
    20.     <div class="div-content">
    21.  
    22. <!--==============================header=================================-->
    23.             <div id="stuck_container">
    24.             </div>
    25.  
    26. <!--=======content================================-->
    27.  
    28.  
    29.  
    30.  
    31.  
    32.             <div class="container">
    33.  
    34.                 <h2 class="padBot1">Gallerie</h2>
    35.                 <div class="row">
    36.                 <div class="grid_12">
    37.                 <p class="anrede">Ihre Gallerie</p>
    38.                 </div>          
    39.                 </div>
    40.                
    41.                 <div class="row">
    42.  
    43.                               <?php
    44.                               // Ordnername
    45.                               $ordner = 'gallerie';
    46.                              
    47.                               // Ordner auslesen und Array in Variable speichern
    48.                               $allebilder = scandir($ordner);
    49.  
    50.                               foreach ($allebilder as $bild) {
    51.                              
    52.                                   // Zusammentragen der Dateiinfo
    53.                                   $bildinfo = pathinfo($ordner."/".$bild);
    54.                              
    55.                                   // Größe ermitteln für Ausgabe
    56.                                   $size = ceil(filesize($ordner."/".$bild)/1024);
    57.                              
    58.                                
    59.                                   if ($bild != "." && $bild != ".."  && $bild != "_notes" && $bildinfo['basename'] != "Thumbs.db") {
    60.                                
    61.                                   ?>
    62.                                     <div class="grid_3">
    63.                                       <figure><div class="bild_wasserz"><div class="wasserz">&nbsp;</div><a href="<?php echo $bildinfo['dirname']."/".$bildinfo['basename'];?>" class="magnifier2"><img src="<?php echo $bildinfo['dirname']."/".$bildinfo['basename'];?>" class="shootkl"><span class="zoom"></span></a></div></figure>
    64.                                     </div>                              
    65.                                  
    66.                               <?php      
    67.                                 }
    68.                                
    69.                                };
    70.                                     // Wenn keine Dateien vorhanden
    71.                                     if (count(scandir($ordner)) <= 2)
    72.                                     {
    73.                                 ?>
    74.                                     <div class="grid_12">
    75.                                       <br>
    76.                                       <span><strong>Keine Bilder im Ordner vorhanden</strong></span>
    77.                                     </div>  
    78.                                    
    79.                                 <?php
    80.                                     }                                  
    81.                               ?>
    82.  
    83.                 </div>
    84.                                                            
    85.  
    86.  
    87.             </div>
    88.  
    89.  
    90.             <div class="container">
    91.  
    92.  
    93.  
    94.                 <div class="row">
    95.                     <div class="grid_12">
    96.                     <br><br><br>
    97.                     </div>
    98.  
    99.                     <div class="clear"></div>
    100.  
    101.  
    102.                 </div>
    103.             </div>
    104.  
    105.  
    106.  
    107.      </div>
    108.    
    109. </div>
    110. <!--=======footer=================================-->
    111.             <footer>
    112.  
    113.             </footer>
    114. <script type="text/javascript">
    115.  
    116.      $(document).ready(function(){
    117.         // Initialize the gallery
    118.         $('.magnifier2').touchTouch();
    119.      });
    120.  
    121.      function myFocus(element){
    122.                      if (element.value == element.defaultValue){
    123.                              element.focus();
    124.                              element.value = '';
    125.                      }
    126.                 }
    127.                 function myBlur(element){
    128.                      if (element.value == ''){
    129.                              element.blur();
    130.                              element.value = element.defaultValue;
    131.                      }
    132.                 }
    133.  
    134. </script>
    135. </body>
    136. </html>
     
  6. Sempervivum

    Sempervivum Mitglied

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    99
    Punkte für Erfolge:
    8
    Dein CSS ist gar nicht mal verkehrt, aber die Zahlenwerte passen überhaupt nicht: Die Abmessungen sind viel zu groß und und top und left ebenfalls, so dass die Wasserzeichen außerhalb der Bilder liegen. Mit den Developertools konnte ich es so einrichten:
    Code (text):
    1. .wasserz {
    2.     position: absolute;
    3.     left: 30px;
    4.     top: 60px;
    5.     width: 100px;
    6.     height: 10px;
    7.     background-image: url(../images/wasserzeichen.png);
    8.     background-repeat: no-repeat;
    9.     background-size: 100px 10px;
    10.     z-index: 100;
    11. }
    Ich würde dir jedoch folgende Änderungen empfehlen:
    • Benutze für das Wasserzeichen einfach ein img-Tag statt eines div mit Hintergrund.
    • Platziere dieses nach dem Bild, damit es auch ohne z-index im Vordergrund liegt.
     
  7. _R_A_L_F_

    _R_A_L_F_ Mitglied

    Registriert seit:
    16 Februar 2014
    Beiträge:
    138
    Punkte für Erfolge:
    18
    Danke für die Antwort Sempervivum.

    Das mit dem img - Tag ist ein guter Vorschlag, ändere ich gerade ab ABER:

    Jetzt wird momentan das Wasserzeichen auf dem kleinem Bild angezeigt (siehe Link). Ich möchte aber, dass das Wasserzeichen auf dem "großen" Bild erscheint beim drauf klicken.
     
  8. Sempervivum

    Sempervivum Mitglied

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    99
    Punkte für Erfolge:
    8
    Ah so, das war mir nicht klar! Sehe es mir an ...
     
    _R_A_L_F_ gefällt das.
  9. _R_A_L_F_

    _R_A_L_F_ Mitglied

    Registriert seit:
    16 Februar 2014
    Beiträge:
    138
    Punkte für Erfolge:
    18
  10. Sempervivum

    Sempervivum Mitglied

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    99
    Punkte für Erfolge:
    8
    Hast Du das Galerieskript, das das Overlay öffnet, selbst geschrieben?
     
  11. _R_A_L_F_

    _R_A_L_F_ Mitglied

    Registriert seit:
    16 Februar 2014
    Beiträge:
    138
    Punkte für Erfolge:
    18
    Nein, hab ich nicht.
     
  12. Sempervivum

    Sempervivum Mitglied

    Registriert seit:
    18 Oktober 2016
    Beiträge:
    99
    Punkte für Erfolge:
    8
    Dann ist es wahrscheinlich das beste, wenn man die Wasserzeichen mit Javascript nachträglich in die Overlay-Bilder einfügt. Ich arbeite etwas aus ...
     
    _R_A_L_F_ gefällt das.
  13. Spicelab

    Spicelab Mod | ZENmechanic Team Moderator

    Registriert seit:
    27 November 2015
    Beiträge:
    1.569
    Punkte für Erfolge:
    83
    Dafür befindet es sich dann wohl an der falschen Stelle des HTML-Codes.
    ... bis dahin demonstrier' ich hier fix eine pure CSS-Lösung, die mit wenigen Handgriffen erledigt ist :D:cool:

    Die grundsätzliche Formatierung des Wasserzeichens ist bekannt. <div class="wasserz"></div> entfällt im Code, wird durch das Pseudoelement ::after ersetzt, das zum best. CSS zusätzlich mit display:block|inline-block u. content:"" (Platzhalter) auszustatten ist, und innerhalb von #gallerySlider auf .placeholder angewendet wird, worin die großen Bilder landen.
    1. https://jsfiddle.net/SpiceLab/srme4kbg/ - Wasserzeichen-Grafik mit background-image (skalierbar, wie in Vorlage)
    2. https://jsfiddle.net/SpiceLab/z79rk3jd/ - Wasserzeichen-Grafik mit content (nicht-skalierbar)
    Falls das Pseudoelement Neuland ist:
     
    _R_A_L_F_ gefällt das.
  14. _R_A_L_F_

    _R_A_L_F_ Mitglied

    Registriert seit:
    16 Februar 2014
    Beiträge:
    138
    Punkte für Erfolge:
    18
    Danke für den Tipp Spicelab. Das man das ganze so auch machen kann, ist für mich wirklich Neuland :)

    Wie unter dem Link zu sehen schaut das ganze schon "fast" perfekt aus. Nur werden nun einige Inhalte nicht mehr angezeigt. Ich sehe da jetzt aber keinen Fehler?
     
  15. Spicelab

    Spicelab Mod | ZENmechanic Team Moderator

    Registriert seit:
    27 November 2015
    Beiträge:
    1.569
    Punkte für Erfolge:
    83
    Ich glaube, Du hast mich komplett falsch verstanden o_O

    So:
    Code (html5):
    1. <div class="row">
    2.   <div id="gallerySlider">
    3.     <div class="grid_3">
    4.       <figure>
    5.         <div class="placeholder">
    6.           <a href="gallerie/pic-1.jpg" class="magnifier2"><img src="gallerie/pic-1.jpg" class="shootkl"><span class="zoom"></span></a>
    7.         </div>
    8.       </figure>
    9.     </div>
    10.     <!-- <div class="grid_3"> -->
    11.     <!-- Vorschaubild #2  -->
    12.     <!-- </div> -->          
    13.   </div>
    14. </div>
    habe ich es definitiv nicht gemeint, aber/und auch nicht in meinem Fiddle demonstriert, sondern so:
    Code (html5):
    1. <div id="gallerySlider">
    2.   <div class="placeholder">
    3.     <img src="gallerie/pic-1.jpg">
    4.   </div>
    5. </div>
    Oder hätte ich in meinem heruntergebrochenen Code vielleicht besser <div id="galleryOverlay"> vor <div id="gallerySlider"> nennen sollen, damit Dir klar ist, wovon ich rede?

    Eigentlich nicht, denn um das <img> herum fehlt bei mir so einiges, was es zum Vorschaubild auszeichnet - angefangen beim unmittelbaren <a> und <span>, bis hin zu <figure> und <div class="grid_3">.

    Gestern abend tauchten noch #gallerySlider und .placeholder ausschließlich in der generierten Quellcode-Ansicht des Entwicklerwerkzeuges am Dokumentende zwischen <footer></footer><script></script> und </body></html> auf, wo eben per jQuery <div id="galleryOverlay"><div id="gallerySlider">...</div></div> mit der großen Bilderansicht generiert wird.

    Aus diesem Grund ist dieser Abschnitt in der Browseransicht des HTML-Codes auch überhaupt nicht zu sehen - falls Dir das nicht bekannt/bewusst ist.

    Und nun existiert <div id="gallerySlider"> im DOM doppelt, was für ID-Bezeichner aber grundsätzlich unzulässig ist! Sie müssen immer eindeutig im Dokumentbaum sein!

    Sorry, will Dir hier nicht zu nahe treten, aber dieses Grundlagenwissen sollte sich ein jahrelang gewerblich tätiger Webdesigner längst angeeignet haben.

    Auszug von touchTouch.jquery.js, woher sie stammen, wie sie in den (generierten) Code gelangen:
    Code (jQuery):
    1. /* Private variables */
    2.  
    3.    var overlay = $('<div id="galleryOverlay">'),
    4.        slider = $('<div id="gallerySlider">'),
    5.        prevArrow = $('<a id="prevArrow"></a>'),
    6.        nextArrow = $('<a id="nextArrow"></a>'),
    7.        overlayVisible = false;
    8.    
    9.    
    10.    /* Creating the plugin */
    11.  
    12.    $.fn.touchTouch = function(){
    13.    
    14.        var placeholders = $([]),
    15.            index = 0,
    16.            items = this;
    17.    
    18.        // Appending the markup to the page
    19.        overlay.hide().appendTo('body');
    20.        slider.appendTo(overlay);
    21.    
    22.        // Creating a placeholder for each image
    23.        items.each(function(){
    24.            placeholders = placeholders.add($('<div class="placeholder">'));
    25.        });
    Also nochmal:
    1. <div class="wasserz">&nbsp;</div> wird im HTML-Code entfernt.
    2. Seine existierende CSS-Formatierung wird mit den zwei zusätzlichen CSS-Regeln für das Pseudoelement ::after übernommen, das auf das vom jQuery-Script generierte <div class="placeholder"> folgen soll, um das Wasserzeichen über das große Bild zu legen (Selektordefinition: #gallerySlider .placeholder::after {}).
     
  16. Spicelab

    Spicelab Mod | ZENmechanic Team Moderator

    Registriert seit:
    27 November 2015
    Beiträge:
    1.569
    Punkte für Erfolge:
    83
    Hatte heute morgen keine Zeit, auf ein weiteres Detail näher einzugehen, deshalb jetzt die Fortsetzung.

    Da die Galeriebilder skalierbar sind, müssen die Startpositionen top u. left für das Wasserzeichen entsprechend angepasst werden, damit es nicht deplatziert wird, was derzeit bei Dir noch der Fall ist, da sie sich auf die Boxenränder der .placeholder-Klasse beziehen, die das Browserfenster vollständig ausfüllt.

    Die Ermittlung der einzelnen individuellen Positionswerte geschieht mit Hilfe von calc():
    1. https://developer.mozilla.org/de/docs/Web/CSS/calc
    2. https://wiki.selfhtml.org/wiki/CSS/Wertetypen/Funktionen#Berechnungen_-_Die_calc-Funktion
    Um die Technik grundsätzlich zu demonstrieren, habe ich 5 unverbindliche Breakpoints eingerichtet, die das Seitenverhältnis der Bilddatei beibehalten: https://jsfiddle.net/SpiceLab/L7h5yx0m/

    Es steht Dir selbstverständlich offen, daran etwas zu ändern, es nach Deinen persönlichen Vorstellungen zu korrigieren.

    Achtung: Durch die vier Fensteraufteilungen der JSFiddle-Seite, kann es bei unglücklichen Seitenverhältnissen des "Result"-Fensters unten rechts zu verfälschten Ergebnissen führen. Deshalb bitte das Ganze anschließend außerhalb von JSFiddle in Deiner Entwicklungsumgebung / auf Deinem Server testen.
     
  17. _R_A_L_F_

    _R_A_L_F_ Mitglied

    Registriert seit:
    16 Februar 2014
    Beiträge:
    138
    Punkte für Erfolge:
    18
    Hallo Spicelab,

    Danke für deine sehr ausführliche Hilfe.

    Ja ich war da gestern wohl zu voreilig und habe die Antwort nicht wirklich verstanden und was mir natürlich klar ist und ich mich gewundert habe, war genau die Geschichte mit dem <div id="gallerySlider">

    Mir ist klar, dass ich pro Seite dieses Element nur einmal aufrufen darf und wunderte mich, warum dies nun für jedes Bild der Fall sein soll. Aber klar, bei näherer Betrachtung war der Flüchtigkeitsfehler schnell klar.

    Soweit funzt jetzt alles und vor allem die calc() Funktion ist eine tolle Eigenschaft die ich sicher noch öfters hernehmen werde in Zukunft ;)

    Nur eine Frage noch. Wie ist es möglich die Position des Wasserzeichens in der Placeholder Klasse zu bestimmen. z.B. top: 30px; left: 20px; Denn, das geht ja nicht:

    HTML:
    1. #gallerySlider .placeholder::after {
    2.     display:block;
    3.     content:"";
    4.     position: absolute;
    5.     top: 300px;
    6.     left: 200px;
    7.     width: 200px;
    8.     height: 20px;
    9.             top: 30px;
    10.             left: 20px;
    11.     background-image:url(../images/wasserzeichen.png);
    12.     background-repeat: no-repeat;
    13.     background-size: 200px 20px;
    14.     z-index: 100;
    15. }
    Dann wärs das :)
     
  18. Spicelab

    Spicelab Mod | ZENmechanic Team Moderator

    Registriert seit:
    27 November 2015
    Beiträge:
    1.569
    Punkte für Erfolge:
    83
    Warum sollte das plötzlich nicht mehr gehen? In Zeile 5 u. 6 wurde es ja schon mal angewendet, wie auch in meinen Fiddles - falls Dir das entgangen sein sollte o_O

    Oder wovon handelte sonst das letzte Demo, wenn nicht die Ermittlung 5 individueller left-/top-Werte mittels calc(), die Dich doch so schwer beeindruckt hat?:(
     
  19. _R_A_L_F_

    _R_A_L_F_ Mitglied

    Registriert seit:
    16 Februar 2014
    Beiträge:
    138
    Punkte für Erfolge:
    18
    Ja genau deshalb wundert es mich ja :D

    Ich habe die Seite jetzt mal aktualisiert mit den Änderungen und mit Absicht, mal höhere Werte eingestellt, nur ändert sich nichts :(
     
  20. Spicelab

    Spicelab Mod | ZENmechanic Team Moderator

    Registriert seit:
    27 November 2015
    Beiträge:
    1.569
    Punkte für Erfolge:
    83
    Autsch, schon wieder Grundlagenwissen: CSS Kaskade - Reihenfolge von Regeln und Deklarationen

    Weil im direkten Anschluss die fünf Media Queries folgen, die für die jeweiligen Bildformate top u. left definieren, werden folglich Deine Angaben nach den Regeln der Kaskade überschrieben.

    Zwischen den Queries untereinander geschieht ja auch nichts anderes, nur halt vor-, wie auch rückwärts, und das in Echtzeit :D