Avatar billede simsen Mester
29. november 2008 - 21:58 Der er 3 kommentarer og
1 løsning

Forstørre billede ved onmouseover

hej,

Jeg har fundet nedenfor viste script på nettet og synes den er rigtig smart (og også fået den til at virke med egne billeder)......Men men men

Jeg kan bare ikke se, hvor jeg kan ændre størrelsen på billedet der popper op. Nogen der kan sige mig det?

En anden ting, den forringer billedet MEGET, når den bliver forstørret op, kan den laves sådan, at jeg henter et andet billede måske med extension Billedenavn_popup.jpg eller er der en anden måde at gøre dette på, så det ikke ser forfærdelig ud?

mvh
simsen :-)

Script:
<script language="javascript" type="text/javascript">
        /**********************************************/
        /* EventHandling                                  */
        /**********************************************/
        var slideId = -1;
        var isAminating = false;
        var useSlide = true;
        var supportedBrowser = isSupported();


        function isSupported()
        {
            if (typeof document.documentElement.style.maxHeight != "undefined")
            {
                return true;
            }
            return false;
        }

        function slideIn()
        {
            var layer = document.getElementById('theImg');
            if(layer.height < 418 )
            {
                layer.height  += 10;
            }
            if(layer.width < 559)
            {
                layer.width += 100;
            } // 418 X 559
            if( (layer.height >= 418 ) && (layer.width >= 559) )
            {
              clearInterval(slideId);
              isAnimating = false;
            }
        }
       
        function OnImgMouseOver( ev , caller)
        {
            if(!supportedBrowser)
            {
                return;
            }

            if(!isAminating)
            {
            var elm = caller;
            isAminating = true;
                var parts = new Array();
                var layer = document.getElementById('PopUpLayer');
            if( layer  == null )
                {
                WriteLayers();
                layer = document.getElementById('PopUpLayer');
                }
                parts = elm.getAttribute('src').split('/');
                layer.innerHTML = '<div style="position: relative;margin:0;padding:0;left: 5px; top: 5px;background-color: black;"> <div style="background-color: silver;"> <div style="border: 1px solid black;position: relative;left: -5px;top: -5px;"><img id="theImg" height="0" width="0" src=' + elm.getAttribute('src').replace('92/69',"559/418")  + ' ></div></div> </div>';
                layer.style.top    =  NewfindPosY( elm ) + 'px';
                layer.style.left  =  NewfindPosX( elm ) + elm.width + 10 + 'px';
                layer.style.visibility = 'visible';
                slideId = setInterval(slideIn,1);
            }
        }

        function OnImgMouseOut(ev)
        { 
            if(!supportedBrowser)
            {
                return;
            }
            var layer = document.getElementById('PopUpLayer');
            if( layer  == null )
            {
                return;
            }
            layer.style.visibility = 'hidden';
            clearInterval(slideId);
            isAminating = false;
        }


        /**********************************************/
        /* positioning of popuplayer                  */
        /**********************************************/

        function NewfindPosX(obj)
        {
            var curleft = 0;
            if (obj.offsetParent)
            {
                while (obj.offsetParent)
                {
                    curleft += obj.offsetLeft
                    obj = obj.offsetParent;
                }
            }
            else if (obj.x)
                curleft += obj.x;
            return curleft;
        }

        function NewfindPosY(obj)
        {
            var curtop = 0;
            if (obj.offsetParent)
            {
                while (obj.offsetParent)
                {
                    curtop += obj.offsetTop
                    obj = obj.offsetParent;
                }
            }
            else if (obj.y)
                curtop += obj.y;
            return curtop;
        }

        function WriteLayers()
        {
          var body = document.getElementsByTagName('body')[0];
          var layer = document.createElement('div');
          layer.id = 'PopUpLayer';
          layer.name = 'PopUpLayer';
          layer.style.visibility = 'hidden';
          layer.style.position = 'absolute';
          body.appendChild(layer);
        }
       
        addLoadEvent(initComparison);
    </script>


<img alt="" src="Images/Mar18_09.jpg" style="width:200px;" onmouseover="OnImgMouseOver(event,this);" onmouseout="OnImgMouseOut(event,this);" />
Avatar billede majbom Novice
30. november 2008 - 09:39 #1
function slideIn()
        {
            var layer = document.getElementById('theImg');
            if(layer.height < 418 )
            {
                layer.height  += 10;
            }
            if(layer.width < 559)
            {
                layer.width += 100;
            } // 418 X 559
            if( (layer.height >= 418 ) && (layer.width >= 559) )
            {
              clearInterval(slideId);
              isAnimating = false;
            }
        }

418 og 559 er dine nye dimensioner, de skal rettes her og længere nede i den her linie:

layer.innerHTML = '<div style="position: relative;margin:0;padding:0;left: 5px; top: 5px;background-color: black;"> <div style="background-color: silver;"> <div style="border: 1px solid black;position: relative;left: -5px;top: -5px;"><img id="theImg" height="0" width="0" src=' + elm.getAttribute('src').replace('92/69',"559/418")  + ' ></div></div> </div>';


det er sjovt der ikke er brugt variabler, så det kunne rettes ét sted
Avatar billede simsen Mester
30. november 2008 - 14:35 #2
Tak splazz.......

Jeg forsøgte mig også med disse - men kun et sæt af gangen altså først dem i selve funktionen og da de ikke virkede det i layer.innterHTML.....

Ved du hvordan jeg kan få pæne billeder når de bliver forstørret. For tager jeg for stor størrelse bliver de grimme grumsede?

Og husk at smide et svar :-)
Avatar billede simsen Mester
29. december 2008 - 08:37 #3
Lukker

Hvis du vil have points, siger du bare til splazz :-)
Avatar billede majbom Novice
29. december 2008 - 09:12 #4
skidt med point...

billederne bliver grimme når de bliver ret meget større end deres oprindelige størrelse. du kan evt. have dem liggende i større format (hvis du har billedet selv) og så formindske dem når de skal være små. hvis du forstår?
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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.

Du kan også logge ind via nedenstående tjenester