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

[ERLEDIGT] wasserzeichen auf bild einfügen

R

_R_A_L_F_

Mitglied
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: 
<div class="grid_3">
    <figure><div class="bild_wasserz"><div class="wasserz">&nbsp;</div><a href="bild.jpg" class="magnifier2"></div>
<img src="bild.jpg" class="kl"><span class="zoom"></span></a></figure>
</div>

CSS dazu:
HTML: 
.bild_wasserz {
 position: relative;
}
 
.wasserz {
 position: absolute;
 left: 200px;
 top: 250px;
 width: 500px;
 height: 50px;
 background-image:url(../images/wasserzeichen.png);
 background-repeat: no-repeat;
}

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 ;)
 
_R_A_L_F_ schrieb:
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.
Zum Vergrößern anklicken....
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:
HTML: 
<div class="grid_3">
  <figure>
    <div class="bild_wasserz">
      <div class="wasserz">&nbsp;</div>
      <a href="bild.jpg" class="magnifier2"></div>
        <img src="bild.jpg" class="kl">
        <span class="zoom"></span>
      </a>
  </figure>
</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.
 
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:
der Link zur Seite lautet:

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

Die Seite inkl. PHP sieht so aus:
PHP: 
<!DOCTYPE html>
<html lang="de">
        <head>
        <title>Gallerie</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/style.css">
        
        <script src="js/jquery.js"></script>
        <script src="js/jquery-migrate-1.2.1.js"></script>
        <script src="js/jquery.easing.1.3.js"></script>
        <script src="js/script.js"></script>
        <script src="js/touchTouch.jquery.js"></script>
        <script src="js/jquery.tools.min.js"></script>

        </head>
<body>
 
<div class="main">
    <div class="div-content"> 

<!--==============================header=================================-->
            <div id="stuck_container">
            </div>

<!--=======content================================-->





            <div class="container">

                <h2 class="padBot1">Gallerie</h2>
                <div class="row">
                <div class="grid_12">
                <p class="anrede">Ihre Gallerie</p>
                </div>           
                </div>
                
                <div class="row">

                              <?php
                              // Ordnername
                              $ordner = 'gallerie';
                              
                              // Ordner auslesen und Array in Variable speichern
                              $allebilder = scandir($ordner);

                              foreach ($allebilder as $bild) {
                              
                                  // Zusammentragen der Dateiinfo
                                  $bildinfo = pathinfo($ordner."/".$bild);
                              
                                  // Größe ermitteln für Ausgabe
                                  $size = ceil(filesize($ordner."/".$bild)/1024);
                              
                                
                                  if ($bild != "." && $bild != ".."  && $bild != "_notes" && $bildinfo['basename'] != "Thumbs.db") {
                                
                                  ?>
                                    <div class="grid_3">
                                      <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>
                                    </div>                               
                                  
                              <?php       
                                }
                                
                               };
                                    // Wenn keine Dateien vorhanden
                                    if (count(scandir($ordner)) <= 2)
                                    {
                                ?>
                                    <div class="grid_12">
                                      <br>
                                      <span><strong>Keine Bilder im Ordner vorhanden</strong></span>
                                    </div>   
                                    
                                <?php
                                    }                                   
                              ?>

                </div>
                                                            


            </div>


            <div class="container">



                <div class="row">
                    <div class="grid_12">
                    <br><br><br>
                    </div>

                    <div class="clear"></div>


                </div>
            </div>



     </div>
    
</div>
<!--=======footer=================================-->
            <footer>

            </footer>
<script type="text/javascript">

     $(document).ready(function(){
        // Initialize the gallery
        $('.magnifier2').touchTouch();
     });

     function myFocus(element){
                     if (element.value == element.defaultValue){
                             element.focus();
                             element.value = '';
                     }
                }
                function myBlur(element){
                     if (element.value == ''){
                             element.blur();
                             element.value = element.defaultValue;
                     }
                }

</script>
</body>
</html>
 
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.
 
_R_A_L_F_ schrieb:
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.
Zum Vergrößern anklicken....
Dafür befindet es sich dann wohl an der falschen Stelle des HTML-Codes.
Sempervivum schrieb:
Dann ist es wahrscheinlich das beste, wenn man die Wasserzeichen mit Javascript nachträglich in die Overlay-Bilder einfügt. Ich arbeite etwas aus ...
Zum Vergrößern anklicken....
... 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:
 
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?
 
_R_A_L_F_ schrieb:
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?
Zum Vergrößern anklicken....
Ich glaube, Du hast mich komplett falsch verstanden o_O

So:
HTML: 
<div class="row">
  <div id="gallerySlider">
    <div class="grid_3">
      <figure>
        <div class="placeholder">
          <a href="gallerie/pic-1.jpg" class="magnifier2"><img src="gallerie/pic-1.jpg" class="shootkl"><span class="zoom"></span></a>
        </div>
      </figure>
    </div>
    <!-- <div class="grid_3"> -->
    <!-- Vorschaubild #2  --> 
    <!-- </div> -->          
  </div>
</div>
habe ich es definitiv nicht gemeint, aber/und auch nicht in meinem Fiddle demonstriert, sondern so:
HTML: 
<div id="gallerySlider">
  <div class="placeholder">
    <img src="gallerie/pic-1.jpg">
  </div>
</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: 
/* Private variables */
 
   var overlay = $('<div id="galleryOverlay">'),
       slider = $('<div id="gallerySlider">'),
       prevArrow = $('<a id="prevArrow"></a>'),
       nextArrow = $('<a id="nextArrow"></a>'),
       overlayVisible = false;
   
   
   /* Creating the plugin */
 
   $.fn.touchTouch = function(){
   
       var placeholders = $([]),
           index = 0,
           items = this;
   
       // Appending the markup to the page
       overlay.hide().appendTo('body');
       slider.appendTo(overlay);
   
       // Creating a placeholder for each image
       items.each(function(){
           placeholders = placeholders.add($('<div class="placeholder">'));
       });
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 {}).
 
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.
 
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: 
#gallerySlider .placeholder::after {
    display:block;
    content:"";
    position: absolute;
    top: 300px;
    left: 200px;
    width: 200px;
    height: 20px;
            top: 30px;
            left: 20px;
    background-image:url(../images/wasserzeichen.png);
    background-repeat: no-repeat;
    background-size: 200px 20px;
    z-index: 100;
}

Dann wärs das :)
 
_R_A_L_F_ schrieb:
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: 
#gallerySlider .placeholder::after {
    display:block;
    content:"";
    position: absolute;
    top: 300px;
    left: 200px;
    width: 200px;
    height: 20px;
            top: 30px;
            left: 20px;
    background-image:url(../images/wasserzeichen.png);
    background-repeat: no-repeat;
    background-size: 200px 20px;
    z-index: 100;
}

Dann wärs das :)
Zum Vergrößern anklicken....
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?:(
 
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 :(
 
_R_A_L_F_ schrieb:
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 :(
Zum Vergrößern anklicken....
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
 
Das passiert wohl eher dann, wenn man zwischen Tür und Angel Copy Paste anwendet und sich nicht die Zeit nimmt, den Code im Detail durch zugehen :D

Jetzt klappt auf jedenfall alles wie gewünscht und ich sag an der Stelle nochmal Danke :) und wünsche schöne Weihnachten!
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben