Søg
Avatar billede encorez Nybegynder
27. februar 2010 - 12:21 Der er 9 kommentarer og
1 løsning

Vis stort billede på maouseover

Hej

Jeg har nogle små billeder på en hjemmeside. Når man kører musen over dem skal der vises et stort billede.

Er der nogen forslag til at gøre dette på en nem måde?

Jeg tænker det nok skal være noget javascript, derfor er spørgsmålet i denne kategori.
Avatar billede claes57 Ekspert
27. februar 2010 - 12:58 #1
du skal have et felt til at vise det store billede - evt lave et popup (mit eksempel er til et felt i aktuel side)

onMouseOver="document.getElementById('billed').src = 'images/packnight.jpg';"

og det kan du så vise i et billedfelt, som du kan initiere som fx dette
<input type="image" id="billed" src="images/ansigt1.jpg">
Avatar billede encorez Nybegynder
27. februar 2010 - 13:22 #2
Hej, det opfylder jo egentlig mine skrevne krav, så tak. Jeg kan muligvis bruge den.

Men egentlig ville jeg lave det store billede som en pop-up, altså et billede der kom som et lag oven på hjemmesiden.
Med din metode vil billedet skifte størrelse og det vil rykke på bredde og højde af hele hjemmesiden.
Men igen, jeg kan muligvis bruge den alligevel.

Andre forslag modtages stadig gerne.
Avatar billede Slettet bruger
27. februar 2010 - 14:03 #3
En af måderne til at opnå dit ønskede resultat kan laves ved evt. at kalde en JavaScript funktion på onmouseover, som registrer cursorens X- og Y-positioner på siden og opretter et DIV-element og placerer elementet ud fra cursorens position, elementet skal desuden have en z-index på 2 for at ligge som et lag oven på din oprindelige side. I DIV-elementet kan du så tilføje den store version af billedet og ved onmouseout fjerner du DIV-elementet igen.
Ellers kan du også indsætte det store billede på siden med det samme (obs: kan skabe høje loading tider ved mange billeder!) og via CSS så gemme billedet indtil man holder musen over det lille billede.

Det første eksempel er en smule mere krævende, men de store billeder vil først blive loaded når man holder musen over hvilket vil gøre selve sidens indhold loades hurtigere.

Det andet eksempel er den nemme vej, men som sagt så kan det give en del loading tid hvis du har mange billeder på én gang da de alle loades på samme tid, men kun de små versioner vises som standard.

Du kan lige få et eksempel på den nemme, men måske "tunge" version (utestet):
<img src="det_store_billede.jpg" id="det_store_billede" style="display:none; z-index:2;"><img src="det_lille_billede.jpg" onmouseover="document.getElementById('det_store_billede').style.display=block;" onmouseout="document.getElementById('det_store_billede').style.display=none;">
Avatar billede claes57 Ekspert
27. februar 2010 - 15:28 #4
i <head> sætter du dette ind
<script language="JavaScript" type="text/javascript">
function popUp(strURL, strTekst) {
  objWin = window.open(strURL, strTekst, 'fullscreen');
}
</script>


og nede i koden kan du kalde med fx

onMouseOver="popUp('mitfoto.jpg', 'beskrivelse');"

fx direkte i det lille billede
Avatar billede encorez Nybegynder
27. februar 2010 - 20:04 #5
roxki, tak for hjælpen. Løsningen 1 ville nok at være at foretrække pga. loadtiden.
Jeg har forsøgt med din "nemme" løsningen. Den fungerer dog ikke som jeg vil have det, da det store billede ikke kommer oven PÅ det lille som et nyt lag. Det komme blot frem lige oven for det lille billede og dermed rykker det blot resten af indholdet ned.
Jeg ved ikke om der mangler noget ekstra kode for at det med index virker korrekt.

claes57, også tak for dit bud igen. Pop-ups virker dog ikke godt hos mig. Min egen explorer startede med at blokere pop-up boksen og jeg er i tvivl hvor godt det vil virke mht til når den skal forsvinde igen på en nem måde.
Så er jeg ind til videre mere til at bruge dit første forslag.

Men at få det store billede frem OVEN PÅ det lille billede, i et nyt "lag" så det ikke rykker alt indholdet rundt ville være at foretrække.
Avatar billede Slettet bruger
27. februar 2010 - 20:37 #6
At få det store billede til at ligge i et nyt lag ovenpå de oprindelige elementer gøres vha. z-index, men det passer sikkert at den ikke helt kan finde ud af det i det eksempel jeg skrev tidligere.
Jeg prøvede lige at lave en hurtig test side der laver 2 div-elementer som skal ligge oven på hinanden, hvilket virkede upåklageligt her hos mig, men det er opbygget lidt på en anden måde, men måske du kan bruge det til at få fikset dit "problem".
Her er koden til mit eksempel:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Hello World</title>
        <style type="text/css">
        div.layer1 {
            width: 250px;
            height: 150px;
           
            position: absolute;
           
            top: 0;
            left: 0;
           
            border: 1px solid #000000;
            background-color: #666666;
           
            z-index: 1;
        }
       
        div.layer2 {
            width: 100px;
            height: 75px;
           
            position: absolute;
           
            top: 10;
            left: 10;
           
            border: 1px solid #000000;
            background-color: #990000;
           
            z-index: 2;
        }
        </style>
    </head>
    <body>
        <div class="layer1">Dette er layer1</div>
        <div class="layer2">Dette er layer2</div>
    </body>
</html>
Avatar billede encorez Nybegynder
01. marts 2010 - 16:32 #7
roxki, det ser ud til at virke. Så skal det bare kombineres med noget mouse over.

Jeg kommer til at bruge begge måder at gøre det på, to forskellige steder hvor det passer, så I har begge været en stor hjælp.

Læg et svar som tak for jeres hjælp
Avatar billede Slettet bruger
01. marts 2010 - 16:44 #8
jamen du da velkommen :-) du får et svar her
Avatar billede encorez Nybegynder
04. marts 2010 - 12:51 #9
roxki, var det et svar? Eller spiller min firefox mig et pus?
Avatar billede Slettet bruger
04. marts 2010 - 13:00 #10
Hehe hov.. her er svaret!
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Sæt vindue størrelse Af poulmadsen i JavaScript 1 08/10/202417:18 13/10/202412:33
Opgavestyring Af ingeman i JavaScript 1 15/09/202416:06 15/09/202420:40
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 17:32 Jeg kan ikke opdatere min iPad til ios 26.4.1. Af Bettina i Apps til iOS
I dag 08:32 Office pakke LTSC vs Retail? Af Don G i Office & Kontorpakker
I går 21:19 Lydindstilling Prosonic TV Af TageArent i Fjernsyn & projektorer
I går 15:37 Sort skærm Af mort1 i Windows
09/0412:32 iPadOS 26.4.1 kan ikke opdatere Af claes57 i Apps til iOS
White papers
Flere white papers »