Ved hjælp af CSS og lidt JavaScript kan du loade billederne, når du kører cursor henover linket - ikke før. Billederne (noterne) bliver vist som et baggrunds-billede i et lille ”preview” ved hver link. URL til billederne indsættes i
data-image attributten.
I CSS-delen kan du selv bestemme størrelsen på "preview".
Mit eksempel kræver dog, at du ændrer lidt i din PHP-kode, så hvert link ser ud som i min kode (har vedlagt php-koden nederst)
<style>
/* Indsæt på siden, eller i dit eksterne CSS-dokument */
.popupA {
display: inline-block;
position: relative;
text-decoration: underline;
cursor: pointer;
}
.popupA .note {
background-color: #fff;
background-image: url('
https://loading.io/mod/spinner/blocks/index.svg'); /* Kan udelades */
background-position: center;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
}
.popupA:hover .note {
width: 150px; /* størrelsen på "preview" */
height: 150px;
z-index: 1;
border: solid 1px white;
box-shadow: 1px 1px 5px rgba(0,0,0,0.5);
}
</style>
<h2>Eksempel:</h2>
<a class="popupA" onmouseover="loadNote(this)">Vis seddel<span class="note" data-image="Sedler/123/123-001.jpg"></span><br>Seddel 123/123-001</a><br><br>
<a class="popupA" onmouseover="loadNote(this)">Vis seddel<span class="note" data-image="Sedler/123/123-002.jpg"></span><br>Seddel 123/123-002</a><br><br>
<a class="popupA" onmouseover="loadNote(this)">Vis seddel<span class="note" data-image="Sedler/123/123-003.jpg"></span><br>Seddel 123/123-003</a><br><br>
<a class="popupA" onmouseover="loadNote(this)">Vis seddel<span class="note" data-image="Sedler/123/123-004.jpg"></span><br>Seddel 123/123-004</a><br><br>
<a class="popupA" onmouseover="loadNote(this)">Vis seddel<span class="note" data-image="Sedler/123/123-005.jpg"></span><br>Seddel 123/123-005</a><br><br>
<a class="popupA" onmouseover="loadNote(this)">Vis seddel<span class="note" data-image="Sedler/123/123-006.jpg"></span><br>Seddel 123/123-006</a><br><br>
<script>
// Denne JavaScript function er nødvendig, og skal inkluderes på siden, hvor links skal vise noterne!
function loadNote(element) {
let note = element.querySelector('.note'); // Noten til linket
let imgsrc = note.getAttribute('data-image'); // URLen til noten
note.style.backgroundImage = "url('"+imgsrc+"')"; // Indlæs URL som baggrund
}
</script>
Her er php-koden:
if (file_exists($filename))
{
echo '<a class="popupA" onmouseover="loadNote(this)">';
echo 'Vis seddel<span class="note" data-image="Sedler/'.$pKasse.'/'.$pKasse.'-'.$pNr.'.jpg">';
echo '<br>Seddel '.$pKasse.'-'.$pNr.'</span></a>';
}
