[Opgelost] Auto-Resize Banner

Hulp nodig bij een stijl? Voor zowel XHTML/CSS als grafische vragen uiteraard gerelateerd aan phpBB2. Support wordt helaas niet meer verleend.
Forumregels

Sinds 1 januari 2009 wordt phpBB2 niet meer ondersteund.
Onderstaande informatie is verouderd en dient uitsluitend als archief.
phpBB2.0.x
Gesloten
Sethenor
Berichten: 15
Lid geworden op: 09 feb 2007, 19:34

[Opgelost] Auto-Resize Banner

Bericht door Sethenor » 22 feb 2007, 22:51

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 :P
Laatst gewijzigd door Sethenor op 23 feb 2007, 10:25, 1 keer totaal gewijzigd.
Afbeelding

Gebruikersavatar
Carlo Claessen
Berichten: 1280
Lid geworden op: 02 jul 2005, 14:05

Bericht door Carlo Claessen » 23 feb 2007, 00:36

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

de height kan je ook op 100% zetten maar is in feite niet nodig
''Do not meddle in the affairs of wizards, for they are subtle and quick to anger. '' J.R.R Tolkien

Sethenor
Berichten: 15
Lid geworden op: 09 feb 2007, 19:34

Bericht door Sethenor » 23 feb 2007, 00:53

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)
Afbeelding

Gebruikersavatar
Ramon Fincken
Berichten: 2552
Lid geworden op: 27 nov 2005, 23:15
Locatie: Diemen
Contacteer:

Bericht door Ramon Fincken » 23 feb 2007, 01:10

javascript resolutie uitlezen en met javascript een document write doen
waarbij je width op hardcode 1024 of lager zet
Freelance webdevelopment, including phpbb2 scripting!

Website founder van: phpBBinstallers.net phpBBantispam.com
Mods: zie op http://www.phpbb.com Blog in wording: RamonFincken.com

Sethenor
Berichten: 15
Lid geworden op: 09 feb 2007, 19:34

Bericht door Sethenor » 23 feb 2007, 01:14

hmmm ok :P.
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.
Afbeelding

Gebruikersavatar
Ramon Fincken
Berichten: 2552
Lid geworden op: 27 nov 2005, 23:15
Locatie: Diemen
Contacteer:

Bericht door Ramon Fincken » 23 feb 2007, 01:22

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 !
Freelance webdevelopment, including phpbb2 scripting!

Website founder van: phpBBinstallers.net phpBBantispam.com
Mods: zie op http://www.phpbb.com Blog in wording: RamonFincken.com

Sethenor
Berichten: 15
Lid geworden op: 09 feb 2007, 19:34

Bericht door Sethenor » 23 feb 2007, 01:24

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 :P
Afbeelding

Gebruikersavatar
Ramon Fincken
Berichten: 2552
Lid geworden op: 27 nov 2005, 23:15
Locatie: Diemen
Contacteer:

Bericht door Ramon Fincken » 23 feb 2007, 01:29

Top :thumb:

houd ons op de hoogte, wellicht kan iemand anders het ook gebruiken :)
Freelance webdevelopment, including phpbb2 scripting!

Website founder van: phpBBinstallers.net phpBBantispam.com
Mods: zie op http://www.phpbb.com Blog in wording: RamonFincken.com

Sethenor
Berichten: 15
Lid geworden op: 09 feb 2007, 19:34

Bericht door Sethenor » 23 feb 2007, 01:50

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.
Afbeelding

Gebruikersavatar
Ramon Fincken
Berichten: 2552
Lid geworden op: 27 nov 2005, 23:15
Locatie: Diemen
Contacteer:

Bericht door Ramon Fincken » 23 feb 2007, 08:21

op regel 2.... doe eens

Code: Selecteer alles

window.
VOOR

Code: Selecteer alles

screen 
?
Freelance webdevelopment, including phpbb2 scripting!

Website founder van: phpBBinstallers.net phpBBantispam.com
Mods: zie op http://www.phpbb.com Blog in wording: RamonFincken.com

Sethenor
Berichten: 15
Lid geworden op: 09 feb 2007, 19:34

Bericht door Sethenor » 23 feb 2007, 10:14

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

Gebruikersavatar
Ramon Fincken
Berichten: 2552
Lid geworden op: 27 nov 2005, 23:15
Locatie: Diemen
Contacteer:

Bericht door Ramon Fincken » 23 feb 2007, 10:17

ik ga straks eens voor je zoeken volgens mij kon het dan met avail. iets ... maar dat weet ik niet zeker
Freelance webdevelopment, including phpbb2 scripting!

Website founder van: phpBBinstallers.net phpBBantispam.com
Mods: zie op http://www.phpbb.com Blog in wording: RamonFincken.com

Gebruikersavatar
Bee
Berichten: 13403
Lid geworden op: 29 aug 2004, 10:30

Bericht door Bee » 23 feb 2007, 10:22

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 :wink:

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.
... Maar ik modereer (nog) niet.

Sethenor
Berichten: 15
Lid geworden op: 09 feb 2007, 19:34

Bericht door Sethenor » 23 feb 2007, 10:25

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 :D

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

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).
Afbeelding

Gebruikersavatar
Fridge
Berichten: 1028
Lid geworden op: 25 sep 2006, 19:22
Locatie: Rotterdam
Contacteer:

Bericht door Fridge » 23 feb 2007, 13:17

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>

Gesloten