Popup probleem

Status
Niet open voor verdere reacties.
K

kljinn

Nieuwe gebruiker
Lid geworden
28 apr 2004
Berichten
1
hallo

ik zit met een groot probleem. ik heb op men site kleine fotootjes staan en als je daar op klikt moet deze in formaat 500*375 komen. Maar er komt een rand bij: links en boven van 0.6 cm en rechts en onder 0.4 cm. Ik heb alle instellingen geprobeerd zoals margin enz... kan iemand me helpen.
CODE
<td width="150" height="50"><div align="center"><img src="pictures/DSC01491small.gif" width="67" height="50" border="0" onClick="window.open('pictures/DSC01491.gif',null,'height=375,width=500,border=0')"></div></td>
 
zou 't zo niet weten, maar zou 't ook niet mooi zijn om een handje te gebruiken.

(dat als je met de muis over het plaatje gaat dat er dan een handje komt? )

Code: 
<img style="cursor: hand" src="plaatje.jpg" etc...
---> zie de style="cursor:hand"

ps. waarom is 't dan een probleem?
 
Wat je moet doen is de uitvergroting stoppen in een ander html bestand. Zie de zip file (attachment)

Voorbeeld:

index.html:

Code: 
<html>
    <body>
        <table>
            <tr>
                <td>
                    <img src="small.jpg" width="100" height="100" border="0" 
                         onclick="javascript: window.open('big.html','','height=260,width=260')" 
                         onmouseover="this.style.cursor='hand'"
                         onmouseout="this.style.cursor='default'">
                </td>
            </tr>
        </table>
    </body>
</html>

big.html

Code: 
<html>
    <body>
        <img src="big.jpg" width="260" height="260" style="position: absolute; left: 0px; top: 0px">
    </body>
</html>

Op deze manier heb je geen marges, je geeft in de methode window.open op dat de html even groot is als het plaatje en bepaald dat het plaatje precies in de nieuwe html op positie 0, 0 komt te staan.

Je kan de methode window.open eventueel ook nog uitbreiden waarmee je bepaald waar op het scherm het grote plaatje moet worden weergegeven bijvoorbeeld in het midden van het scherm
 

Bijlagen

  • voorbeeld.zip
    23,9 KB · Weergaven: 14
Laatst bewerkt:
Nadeel van het vorige bericht is dat je dan voor elke kleine foto een apart html-bestand aan moet maken. Wellicht kan het ook op de volgende manier (maar niet zelf getest):

In het onclick-event van de <img>-tag zet roep je de volgende functie aan:

onclick="openFoto('pictures/DSC01491.gif')"

Vervolgens neem je de volgende javascript-code op:

<script type="text/javascript">
function openFoto(foto) {
var Venster = window.open("", "Fotopopup", "height=375,width=500");
Venster.document.write("<html><body style='margin:0;padding:0'><img src='"+foto+"' border='0' /></body></html>");
}
</script>
 
He Lud, die is nog beter.

Ik voeg er nog een paar dingetjes aan toe:

Code: 
<html>
    <head>
        <script language="javascript">
            function openFoto(src, width, height)
            {
                var posLeft = (screen.width - width) / 2;
                var posTop = (screen.height - height) / 2;
                
                var attr = "height=" + height + ",width=" + width + ",top=" + posTop + ",left=" + posLeft;
                
                var venster = window.open("", "Foto", attr);
                venster.document.write("<html><body style='margin:0;padding:0'><img src='"+ src +"' border='0' /></body></html>");
            }
        </script>
    </head>
    <body>
        <table>
            <tr>
                <td>
                    <img src="pictures/DSC01491small.gif" width="67" height="50" border="0" 
                         onclick="openFoto('pictures/DSC01491.gif',500,375)" 
                         onmouseover="this.style.cursor='hand'"
                         onmouseout="this.style.cursor='default'">
                </td>
            </tr>
        </table>
    </body>
</html>

op deze manier hebben we hem ook nog netjes in het midden
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan