Henry: X auf Bild bei Hover

Beitrag lesen

Hallo,

wenn du die folgende Datei neben einem Bilder-Verzeichnis/Dir mit Namen "img" legst, dürfte es ohne Änderungen funktionieren.

<?php

error_reporting(E_ALL);


$mess= $rescue = ''; // nicht wirklich notwendig aber verhindert error notice(nicht deklarierte Variable)

// diese Datei
$fl = basename($_SERVER['PHP_SELF']);

// $path = pathinfo($_SERVER['PHP_SELF'],PATHINFO_DIRNAME).'/';

// Bilderverzeichnis festlegen
$verz = 'img/';    // in dem Fall slash am ende, wenn im gleichen Ordner wie bilder dann natürlich nicht

// Schlüsselwort/Präfix für gelöschte Dateien
$delkey = 'GARB_';





// Hier die Löschoperation, wenn aufgerufen
// ########################

// Die Datei wird nicht wirklich gelöscht, sondern nur umbenannt um versehentliches Löschen rückgängig zu machen.

if(isset($_POST['del_post']) && file_exists($verz.$_POST['del_post']))
{
$fl2del = $verz.$_POST['del_post'];
$delfl = $verz.$delkey.$_POST['del_post'];

if(rename($fl2del,$delfl) ){$mess = '<h3">Datei: '.$_POST['del_post'].' wurde gelöscht</h3>';}
else{$mess = ('<h3 style="color:red;">ERROR: Fehler im System1</h3>');}
}
// ########################



// Hier die Wiederherstellung, wenn aufgerufen
// ########################
if(isset($_POST['del_rescue']) && file_exists($verz.$_POST['del_rescue']))
{
$fl2resc = $verz.$_POST['del_rescue'];
if(rename($fl2resc,$verz.str_replace($delkey,'',$_POST['del_rescue'])) ){$mess =  '<h3">Datei: '.$_POST['del_rescue'].' wurde wiederhergestellt</h3>';}
else{$mess = ('<h3 style="color:red;">ERROR: Fehler im System</h3>');}
}
// ########################




function bildausgabe($mod='')
{

$verz =  $GLOBALS['verz'];
$fl =  $GLOBALS['fl'];
$delkey =  $GLOBALS['delkey'];



//erlaubte Endungen (nach Bedarf anpassen)
$ext = array('jpg','png','gif','ico');

// Endungen funktionstauglich (glob) machen
$ext_pat = '*.'.implode(',*.',$ext);



 // Kompletter Funktionspattern
$ext_pat = $verz.'{'.$ext_pat.'}';


// Verzeichnis auslesen als Array
$img_ar = glob($ext_pat, GLOB_BRACE);



// Jetzt Verzeichnis einlesen und HTML erzeugen

$outp = ''; // nicht wirklich notwendig aber verhindert error notice
$outp_del = ''; // nicht wirklich notwendig aber verhindert error notice

foreach( $img_ar as $img)
{

// Gelöscht markierte Bilder finden, seperat auflisten und schleife überspringen damit diese Dateien nicht in der eigentlichen Liste erscheinen
if(strpos($img,$delkey)){
$outp_del .= '<div><button name="del_rescue" value="'.basename($img).'" type="submit" class="imgdel">HERSTELLEN</button><img src="'.$img.'" alt=""></div>'."\r\n";
continue;
}

$outp .= '<div><button name="del_post" value="'.basename($img).'" type="submit" class="imgdel">LÖSCHEN</button><img src="'.$img.'" alt=""></div>'."\r\n";

} // end foreach



// Das Ganze als Formular
$outp = '<form method="post" action="'.$fl.'">'.$outp.'</form>';
$outp_del = '<form  method="post" action="'.$fl.'">'.$outp_del.'</form>';

// Ausgabeweiche
if(!$mod){echo $outp;}
elseif($mod == 'showdel'){echo $outp_del;}


} // end func. Bildausgabe



 ?><!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Kleine Bilderverwaltung</title>
<meta charset="UTF-8">
<style>

body{
font-family: helvetica, arial, "sans-serif";
width:80%;
padding:2%;
margin:auto;
}

ul{
    list-style: none;
}
li{
display:inline-block;
padding:1%;
}

.pictures div{
display:inline-block;
margin:1%;
min-height: 2%;
min-width: 2%;
}


.pictures img{width:100%;height:auto;max-width:100%;}
.pictures div:hover .imgdel {display:block;}

.imgdel{
display:none;
background-color:#7DCC06;
opacity:0.7;
position:absolute;
margin:2%;
padding:1%;
font-size: 100%;
font-weight: bold;
z-index: 20;
border:0;
}
.imgdel:hover{background-color:#FF0000;color:#E6E6E6;}


</style>


<script>
// warum Javascript und nicht über PHP? Geschmackssache, für mich: schneller und harmonischer
function showgarb(){
document.querySelector('.nodel').style.display='none';
document.querySelector('.delpics').style.display='block';
}
</script>

</head>

<body>
<h1>Kleine Bilderverwaltung</h1>

<ul>
<li><a href="<?php echo $fl; ?>">Aktuelle Bilder</a></li>
<li><a href="#" onclick="showgarb();">Gelöschte Bilder</a></li>
</ul>

 <?php echo $mess; ?>


<section class="pictures nodel">
<h2>Aktuelle Bilder</h2>
<?php bildausgabe(); ?>
</section>


<section class="pictures delpics" style="display:none;">
<h2>Gelöschte Bilder</h2>
<?php bildausgabe('showdel'); ?>
</section>

<h3>Bitte ausgiebig testen, geht nichts kapputt.</h3>

</body>
</html>
0 75

X auf Bild bei Hover

Sophie
  • css
  • html
  1. 0
    TS
    • css
    • html
    • https
    1. 0
      Sophie
      1. 0
        TS
      2. 1
        Rolf b
        1. 0
          Sophie
          • css
          • html
          • php
          1. 1
            Rolf b
            1. 0
              Sophie
              1. 1
                Rolf b
                1. 1
                  Gunnar Bittersmann
                2. 0
                  Gunnar Bittersmann
              2. 0
                TS
                • html
                • php
                • sicherheit
              3. 0
                TS
              4. 2
                Robert B.
                • html
                • php
                • sicherheit
  2. -1
    Matthias Apsel
    1. 0
      Gunnar Bittersmann
  3. 0
    Henry
    • css
    • html
    • php
    1. 0
      Sophie
      1. 0
        Henry
        1. 0
          Henry
          1. 0
            TS
          2. 3
            Robert B.
      2. 0
        Gunnar Bittersmann
    2. 0
      TS
    3. 0
      Gunnar Bittersmann
      1. 0

        Warum redest du immer alles schlecht?

        Sophie
        • meinung
        1. 1
          Gunnar Bittersmann
          1. 0
            Sophie
      2. 0
        Henry
        1. 0
          Sophie
        2. 0
          Gunnar Bittersmann
          1. 1
            Tabellenkalk
            • ergonomie
            • ergonomie
        3. 1
          TS
          1. 0
            Henry
          2. 0
            Gunnar Bittersmann
            1. 1
              dedlfix
              1. 0
                Gunnar Bittersmann
                1. 0
                  dedlfix
                  1. 0
                    Gunnar Bittersmann
              2. 0
                Tabellenkalk
                1. 0
                  TS
            2. 1
              TS
              1. 0
                Gunnar Bittersmann
                1. 0
                  TS
                  1. 0
                    Gunnar Bittersmann
                    1. 0
                      TS
                      • projekt
              2. 0
                Henry
                • menschelei
                • sonstiges
                • zu diesem forum
                • zu diesem forum
                1. 0
                  TS
                  • menschelei
                  • zu diesem forum
                  • zu diesem forum
                2. 1
                  Gunnar Bittersmann
                  • zu diesem forum
                  1. 0
                    Henry
                    1. 0
                      Gunnar Bittersmann
                      1. 0
                        Henry
                        • menschelei
                        • zu diesem forum
                        1. 1
                          Gunnar Bittersmann
                          1. 0
                            Henry
                            1. 0
                              Henry
                            2. 0
                              Rolf b
                            3. 1
                              Gunnar Bittersmann
      3. 0
        TS
        • barrierefreiheit
        • menschelei
        • projekt
        1. 0
          Gunnar Bittersmann
          1. 0
            TS
            1. 0
              Gunnar Bittersmann
              1. 0
                TS
                • menschelei
    4. 2
      Martl
      1. 0
        TS
      2. 0
        Gunnar Bittersmann
        1. 0
          Martl
          1. 0
            Gunnar Bittersmann
            1. 2
              Martl
    5. 1
      Gunnar Bittersmann
      • html
    6. 0
      Gunnar Bittersmann
      • css
      • html
  4. 2
    Gunnar Bittersmann
  5. 0
    pl
    • css
    • design
    • html
  6. 0
    Malcolm Beck`s
    1. 0
      Sophie
      1. 1
        Rolf b