Load file ved onmouseover

Det må du kunen lave i JavaScript.

Et alternativ som er set en del steder er at du kun loader den øverste del af listen og så loader du dynamisk efterhånden som der scrolles ned. Det er også JavaScript.

>Men det indebærer at alle billeder hentes fra begyndelsen
hvad med at vise billederne som thumpnail, og ved mouseover vise det fulde billed vha AJAX

så du har alle billeder liggende i 2 størrelser / opløsninger, et som thumpnail, og et i fuld størrelse


>f.eks. vha java (som jeg ikke har lært)?
du mener vel javascript?? (java og javascript er 2 forskellige sprog)

https://www.w3schools.com/js/js_ajax_intro.asp
https://www.w3schools.com/jquery/jquery_ref_ajax.asp

Tak for forslagene.
Ja, jeg mente Javascript.
Ajax har jeg hørt om, men kender ikke andet end navnet.
Så det ser ud til, at det er måden frem at lære Javascript.
Og her ville jeg gerne have en genvej, nemlig at nogen har et forslag til kode, så jeg ikke skal lære det helt fra bunden (selv om det er det rigtigste)!

Hvis det kun er billederne du vil loade når der er behov for det så findes der faktisk en lazy-attribut men den er bare ikke super godt understøttet (https://caniuse.com/loading-lazy-attr) - alternativet til det kunne fx være https://github.com/aFarkas/lazysizes

Jeg har kikket på de pågældende links og må sige, at jeg ikke rigtig aner, hvordan jeg skal bruge det!

Hvor går du i stå i den ellers meget fine How To på lazysizes?

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>';
}

Undskyld lang tids fravær, sygdom har haft magten!

#6:
Jeg aner ikke, hvad jeg skal gøre på den første link (https://caniuse.com/loading-lazy-attr), for mig ligner det en oversigt over understøttede muligheder.
Det andet link giver mulighed for at download nogle ting, som jeg med mit knowhow ikke rigtig har mod på at prøve. Jeg er tæt på 80 år og indlæringskurven er fladet ud om ikke for nedadgående!

#7: Det ligner mere noget, som jeg kender, jeg vil afprøve det snarest, men har pt. forbud mod at røre hjemmesiden.

Tak for alle svarene, I er altid så behjælpelige!

Jeg fik lov at låne serveren og har afprøvet #7.

Det virker fint med undtagelse af et par ting:
Billedet vises til højre og under musen, når musen er på en linje i nederste del af browseren, kan man ikke se hele billedindholdet.
Jeg havde det før vist fast i øverste venstre hjørne, så man altid kunne se hele billedet.
Det vil jeg gerne have igen, og det klares nok med lidt css. Jeg har gjort det før, men husker ikke hvordan.
Desuden ser det ud til, at mine billeder bliver skrumpet, hvis de er større end de x=550 px og y= 450 px, som jeg har sat det til. Det vil jeg gerne have til at følge billedets størrelse som det gjorde oprindeligt.

Her er link til siden, så kan I selv se det!
https://www.vinderup-egnshistorie.dk/Register/visresultat.php?gruppe=a06&innr=&omhandler=&omhandler0=&soeg=Start+s%F8gning
Siden er lavet for 12-15 år siden og lever nok ikke op til dagens standard mht. design, men den virker!

Ja, når man rækker ............