phpBB.nl

Ik run een eigen forum (gewoon om te oefenen en beetje te prutsen) maar nou had ik een banner erboven gemaakt. Het enige probleem is de afmetingen ervan. Hij is op volle grootte gemaakt maar wil dat hij bij lagere resoluties dan waar ik op werk (1280x1024) er ook goed/redelijk uit ziet.

nou had ik het idee dat hij bij mensen met lagere resolutie de zijkanten bijvoorbeeld zou 'afknippen' maar heb geen idee hoe ik dit kan doen.

mijn forum staat hier: http://unlimitedforum.no-ip.org/phpBB2/index.php

Als je nog andere info nodig hebt moet je maar vragen

<img width="100%" src="url" alt="" />

de height kan je ook op 100% zetten maar is in feite niet nodig

Dat snapte ik
maar als ik dan die banner op mooie maat heb voor 1280x1024 dan gaat hij hem gewoon indrukken voor 1024x768. Dus daarom had ik het idee dat hij hem aan de zijkanten gewoon zou 'afknippen' laat maar zeggen (als dat uberhaupt mogelijk is

edit: Ik heb net mijn resolutie omlaag gezet naar 1024x768 en dan blijkt hij in IE7 zelfs een scrollbalk onderin weer te geven (gebruik zelf voornamelijk Firefox en daar doet hij dat niet)

javascript resolutie uitlezen en met javascript een document write doen
waarbij je width op hardcode 1024 of lager zet

hmmm ok

.
Dan gelijk het volgende probleem. Ik heb zelf nooit eerder met javascript gewerkt enzo. Weet iemand misschien een handige site om het te leren of om scripts vandaan te halen.

Code: Selecteer alles

<script language="Javascript">
scherma = (screen.width > 800)
if(scherma == true)
{ 
document.write('<img src="">')
 }
else
{
document.write('<img src="" width="800">')
 }
</script>

moet lukken hiermee ... pas src aan en voeg dingen toe

update:
zie voor VEEL webdingen: http://www.w3schools.com/
zeer duidelijke uitleg + voorbeelden !

Super, bedankt. Ga er mee aan de slag. Zodra het helemaal werkt etc zal ik nog wel ff posten. Als het niet lukt waarschijnlijk ook wel

Top :thumb:

houd ons op de hoogte, wellicht kan iemand anders het ook gebruiken

Code: Selecteer alles

<script language="Javascript">
scherma = (screen.width > 1024)
if(scherma == true)
{
document.write('<img src="templates/fisubice/images/banner/banner1247.png">')
 }
else
{
document.write('<img src="templates/fisubice/images/banner/banner991.png" width="989">')
 }
</script>

Dat is wat ik er nu heb staan
en voor zover ik hier kan zien werkt het.

alleen als iemand zijn browser niet fullscreen heeft staat laat maar zeggen krijg je nog die scrollbalk omdat hij de totale scherm resolutie 'leest' en niet waarop de browser staat.

op regel 2.... doe eens

Code: Selecteer alles

window.

VOOR

Code: Selecteer alles

screen

?

Heb het geprobeerd maar het werkt niet. De banner word dan altijd die grootte voor 1024

ik ga straks eens voor je zoeken volgens mij kon het dan met avail. iets ... maar dat weet ik niet zeker

Maak van de banner een achtergrondafbeelding in een cel of layer. Hierdoor houdt hij automatisch dezelfde grootte, en wordt hij dus niet ingedrukt, en wanneer hij te groot is wordt er gewoon een stukje niet vertoond. Door middel van CSS kan je herhaling van de afbeelding voorkomen. En de afbeelding is moeilijker te kopiëren dan in een normale situatie.

Alles in een oplossing dus

Code: Selecteer alles

style="background-image: url(pad/naar/plaatje.jpg); background-repeat: no-repeat;"

Dit werkt in 99% van de gebruikte browsers, en heeft geen afhankelijkheid van JavaScript, wat bij slechtzienden een probleem kan zijn.

haha, bedankt. Had er eigenlijk nooit aan gedacht dat het ook zo kon. en het werkt perfect

.
In ieder geval iedereen bedankt voor de hulp

edit: PS dit is nog voor de mensen die het ook willen maar niet helemaal snappen

Code: Selecteer alles

<td height="110" style="background-image: url(templates/fisubice/images/banner/banner1247.png); background-repeat: no-repeat;"><a href="{U_INDEX}">&nbsp;</a></td>

Height heb ik gewoon vast gezet op 110 (maakt opzich niet echt uit).

Ik heb naar aanleiding van dit topic ook eens nagedacht over een auto resize, ben zelf op een flash versie uitgekomen, misschien is dat ook een optie.

Zit nog een beetje te stoeien met de code maar dit werkt wel prima voor mij...

Code: Selecteer alles

      <td class="bodyline"><table width="100%" cellspacing="0" cellpadding="0" border="0">
         <tr>
            <td align="center" width="100%" valign="middle">
            <p>
               <EMBED src=/images/banner.swf type="text/html; 
            charset=iso-8859-1" quality="high" menu=false 
            width=100% height=100>
            </p>
            </a></td>
         </tr>

phpBB.nl

[Opgelost] Auto-Resize Banner

[Opgelost] Auto-Resize Banner