WN - Visning av bild i popup

WN (https://www.wn.se/forum/index.php)

- Klientsidans teknologier, design och grafik (https://www.wn.se/forum/forumdisplay.php?f=12)

- - Visning av bild i popup (https://www.wn.se/forum/showthread.php?t=14212)

jocke4u

2006-05-21 20:26

Hej,

Vill visa en stor bild när man klickar på en tumnagel och att det visas i ett inbäddat "fönster" som t.ex. med overlib. Hur skall man lämpligast göra detta? Har ni något exempel? Typ som http://prisjakt.nu/ har på sina bilder m.m.

jocke4u

2006-05-21 23:20

Glöm det...jag gjorde fel med overlib

jocke4u

2006-05-23 09:07

Hej,

Nu fungerar det som det bör i Firefox men i IE 6 funkar det inte, någon som kan ha en idé?

Håll musen över bilden/"Förstora" så ser ni beteendet:

http://test.jarkeborn.se/Anybody/__T...mart/Itemid,1/

DeSoto

2006-05-23 09:47

Ifall du inte nödvändigtvis vill att bilden ska följa musen när man har pekaren över bilden så behöver du inte använda overlib för det. Ett exempel:

Kod:

<html>

<head>

<style type="text/css">

<!--

#myDiv

{

        display: none;

        position: absolute;

        top: 200px;

        left: 200px;

        border: 1px solid;

}

-->

</style>

<script type="text/javascript">

<!--

function showDetails( id )

{

        document.getElementById( id ).style.display = 'block';

}



function hideDetails( id )

{

        document.getElementById( id ).style.display = 'none';

}

-->

</script>

</head>

<body>

<p><a href="#" onmouseover="showDetails('myDiv');" onmouseout="hideDetails('myDiv');">Visa</a>

<div id="myDiv">Här är lite saker som inte ska visas</div>

<body>

</html>

jocke4u

2006-05-23 12:08

Ok, tack. Skall testa detta lite och se om det fungerar bättre.

Hur är det, laddas den stora bilden med overlib (nedan) eller är det först när man för över musen?

<a href="javascript:void(0);" onmouseover="return overlib('<img src=\'MYIMAGE.jpg\'>', BORDER, 2, CAPTION, 'TITEL', CENTER, OFFSETX, 0, OFFSETY, 30, FGCOLOR, '#ffffff', BGCOLOR, '#b83409');" onmouseout="return nd();" onfocus="this.blur()" title="">
....
</a>

jocke4u

2006-05-23 22:53

Hittade faktiskt en bra lösning (utan JavaScript) på:
http://www.dynamicdrive.com/style/cs...-image-viewer/

Alla tider är GMT +2. Klockan är nu 12:09.