[JS]Image resizen adhv gecapturede resolutie

[coubertin119]

Ik heb bovenaan m'n site een afbeeldinkje, en die moet ongeveer de breedte van het browserscherm hebben, dus voor 1152 864 (like me) is dat dus een afbeelding van 1100 op 250, nu wil ik dus dat die afbeelding naar 1000 op 220 gaat (of zo ongeveer toch) als de resolutie van de bezoeker 1024 768 bedraagt, en op 800 600 moet het dan dus 780 op 182 zijn.
Ik heb de search gebruikt, en dit leek me het relevantste topic

De conclusie van hier wat mee klooien is dus dat ofwel het script niet werkt, ofwel dat Phoenix het niet goed weergeeft, het gaat om een gedeeltelijk transparante gif, misschien dat dat ook belangrijk is.

En omdat ik graag zelf wat wil maken, liefst geen scripts plaatsen maar duwtjes in de goede richting.

[Verwijderd]

erm... in de tweede reply staat een document.write alternatief... Als dat de enige Opera workaround is lijkt het me dat je die methode kunt gebruiken
Dus wat wil je nu precies weten?

[coubertin119]

Hoe ik dit kan oplossen voor IE6 en voor alle Mozilla varianten, meer is niet nodig.

[Verwijderd]

Een soortgelijke functie staat al in de thread die je zelf aangaf hoor
En document.write werkt ook met moz en msie hoor

[coubertin119]

Hiermee capture ik de resolutie

JavaScript:

function ResizeImg( inImg)
    {
        if( (self.screen.width >= 1024) && (self.screen.height >= 768))
            {
                inImg.width = '780';
                inImg.height = '181';
                }
                else
                    {
                        inImg.width = '1100';
                        inImg.height = '250';
                        }
                    }

En zoals in dat topic stond, is de image zo:

code:

[img]"header.gif"[/img]

En dit werkt dus niet als ik m'n resolutie verlaag. Althans niet in Phoenix 0.5, en ik wil wel dat m'n site in mijn standaard browser er goed uit ziet.

edit: en omdat ik met een class werk in die image weet ik dus niet hoe ik die document.write moet toepassen, gewoon de html code zo zetten?

JavaScript:

document.write([img]"header.gif"[/img])

Want dan werkt het dus niet.

[ Voor 52% gewijzigd door coubertin119 op 15-01-2003 18:45 ]

[tweakerbee]

En wat is er tegenwoordig mis met een procentuele aanduiding?

[coubertin119]

tweakerbee schreef op 15 januari 2003 @ 18:46:
En wat is er tegenwoordig mis met een procentuele aanduiding?

Niets, maar als je me kon vertellen hoe ik het in mijn probleem kan inpassen, leuk.

[Verwijderd]

coubertin119 schreef op 15 January 2003 @ 18:42:
[...]

JavaScript:

document.write([img]"header.gif"[/img])

Want dan werkt het dus niet.

nooit geleerd dat je strings moet quoten in javascript? Niet zo vreemd dat dit niet werkt...

JavaScript:

document.write('[img]"header.gif"[/img]')

gaat misschien beter

[coubertin119]

JavaScript:

        <script language="JavaScript">
            <!--
                function ResizeImg( inImg)
                    {
                        if( (self.screen.width >= 1024) && (self.screen.height >= 768))
                            {
                                inImg.width = '780';
                                inImg.height = '181';
                            }
                            else
                                {
                                    inImg.width = '1100';
                                    inImg.height = '250';
                                    }
                            }
                document.write('[img]"header.gif"[/img]')
            //-->
        </script>

Ik denk dat dit toch echt wel juist is, is een copy past van de jouwe, en mijn code was gewoon een typo die ik vergat aan te passen

M'n site
Op dead links niet letten, is ook nog errug prototype.

[ Voor 36% gewijzigd door coubertin119 op 15-01-2003 19:00 ]

[Verwijderd]

Je document.write staat in de head van de document...

[coubertin119]

Stomme fout dus, de <script> tags stonden in m'n inline stylesheet, wat dus niet werkt.
Volgend probleem: hoe pas ik de afstand tot de top en de leftside van een browser aan, nu doe ik dat dus met:

Cascading Stylesheet:

                    
.menu{
    position: absolute;
    left: 150px;
    top: 210px;
}

dus de left en de top moet aangepast worden als de res lager is dan 1024 768.

Mijn idee, een function die de resolutie bekijkt, en indien ja, document.write('<table></table>') met de juiste class, en indien nee, hetzelfde met een andere class, maar dit werkt dus niet.

[ Voor 31% gewijzigd door coubertin119 op 15-01-2003 20:22 ]

[Verwijderd]

Misschien kan ik je trouwens nog waarschuwen voor het te laat is

Positionering en lay-out kun je beter aan de hand van CSS doen. Als je je daarin verdiept zul je zien dat een hoop dingen die jij dmv javascript wilt bereiken, met een paar regeltjes CSS ook te doen zijn. Ik denk niet dat wanneer je een site wilt bouwen die voor meerdere resoluties geschikt moet zijn, zich gauw de noodzaak voordoet om javascript te gebruiken.

Teken voor jezelf eens een opzetje hoe je site eruit moet gaan zien, volg eens een CSS tutorial zoals die op W3schools en vraag je daarna af of het nog steeds noodzaak is om javascript te gebruiken

Good luck!

[coubertin119]

Ik doe het via CSS, en ik heb 2 classes, en adhv de geregistreerde schermresolutie wil ik dus een andere class nemen voor de menutable, zodat hij mooi blijft passen in het boogje van de afbeelding die ik nu al kan resizen dmv het script uit dat topic mits de nodige aanpassinkjes.