zondag 6 mei 2012

Header met wisselende foto's

Dit is een post die ik al heel lang wou maken maar
die altijd weer op de lange baan geschoven werd.

Pas toen ik na de computerproblemen in maart
alle links en favorieten kwijt was,
besefte ik dat ik dat beter wél al had gedaan,
die post maken dus.
Dan moest ik gewoon de post op mijn eigen blog
gaan opzoeken om terug te vinden hoe dit nu ook
alweer in zijn werk ging.

Ik had de link naar de bewuste site gewoon
bij mijn favorieten staan maar die was dus foetsie.
Dat betekende zoeken en meer zoeken en veel zoeken
om uiteindelijk ook te vinden.

Maar zelfs dit is intussen ook alweer een tijdje geleden...
dus nu maar eerst en vooral eens die post maken, dacht ik vandaag.

Aanvankelijk maakte ik me weinig zorgen over de verloren link.
Die link had ik eigenlijk helemaal niet meer nodig
want het enige wat ik deed was in de html/javascript code
de url's van de foto's voor de header vervangen
door de url's van de nieuwe foto's die ik wou gebruiken
en klaar was kees. Dit klinkt misschien wat als Chinees nu
maar later wordt alles duidelijk.

Het simpele trucje met url's vervangen wilde deze laatste
keer echter maar niet lukken. Wat ik ook probeerde, er kwamen
geen foto's tevoorschijn, enkel een leeg wit vak.

Maar goed, intussen is dat weer opgelost en voor
wie het interesseert hoe ik de header met veranderende
foto's maak, hier volgt de uitleg:

Ga naar http://www.htmlbasix.com/banner.shtml

Daar vul je de banner details aan:
Ofwel laat je de foto's om de zoveel seconden wisselen,
dan duid je 'automatically refresh image' aan en ernaast
om de hoeveel seconden je dat wenst.
Ofwel wil je een nieuwe foto bij elke opening
van een nieuwe pagina en dan duid je
'with every new page load' aan.
Dit laatste gebruik ik zelf niet.

Vervolgens moet je de grootte van je foto's in pixels ingeven.
Mijn foto's zijn altijd 1000 breed en 438 hoog.
Ik ben tot die afmetingen gekomen na wat uitproberen
toen ik dit de eerste keer toepaste. Dit vond ik het best passen
maar je kan uiteraard de foto's zo groot of klein maken als je zelf wilt.

De 'banner rotator number' blijft bij mij altijd op 1 staan.
Dit is gewoon het nummer van je header met veranderende foto's.
Het is maar als je verschillende blogs of zo hebt dat je daar
dan verschillende van die banner rotators voor kan aanmaken
en dan geef je die best elk een andere nummer.

Nu moet je url's invullen.
Bij elke foto kan je een url voor een link invullen
maar dit laat ik altijd leeg.
Als je bvb wil dat iemand die op een bepaalde foto klikt
naar een bepaalde pagina op je blog of eender waar
terecht komt, dan kan je daar de link voor invullen.
Zelf vul ik altijd alleen de url voor de foto in (url for image)
Hoe kom ik daar nu aan?
Misschien doen jullie dat anders maar ik heb er niets beters
op gevonden dan gewoon de foto's te maken(hiervoor gebruik ik photoscape)
en dan een bericht te maken op blogger dat ik niet publiceer en waarin
ik enkel de foto's plaats die ik wil gebruiken voor de header.
Dit is echt enkel en alleen om aan een url te kunnen komen
voor elke foto. Om die url te zien: rechtermuisknop op de foto,
eigenschappen en daar zie je de url(adres) staan. Die kopieer je en
plak je op de voorziene plaats bij de banner generator.
Dit doe je voor elke foto die je wenst te gebruiken in je header.
Nog eens, dit is geen bericht dat je moet publiceren,
het dient gewoon om voor elke foto een url te hebben.

Heb je dat allemaal ingevuld, dan klik je helemaal onderaan op
'generate' en dan wordt een nieuwe pagina geopend met daarin
de html/javascript code die je nu kan gaan kopiëren en dan plakken
in het voorziene vak bij 'indeling' of 'ontwerpen' van je blog.
Zelf heb ik een vak met de titel van mijn blog
en daaronder een vak met de gekopieerde html/javascript code.
Er staan bij de indeling dus twee lange smalle vakken onder elkaar.
Je kiest voor gadget toevoegen en dan voor html/javascript toevoegen uiteraard
en plakt dan heel het gekopieerde op die plek.
Opslaan en dan gaan kijken naar je blog of alles er uitziet zoals je wil.
Het is een beetje een tijdrovende bezigheid en spannend om te zien of het werkt
maar ik was blij om een hele tijd geleden eindelijk te vinden hoe zoiets kon.

Nog een opmerking, de wisseling van de foto's gaat niet vloeiend,
vandaar dat ik ervoor gekozen heb om bij het opmaken van de foto's
altijd zachte randen te voorzien, dan is de overgang tussen twee
foto's niet zo plots en dat vind ik persoonlijk mooier,
maar smaken kunnen verschillen natuurlijk.

Geen idee of jullie ermee aan de slag willen maar als je dat ooit zou willen,
dan heb je hier al de uitleg.

Als er vragen zouden zijn, mag je die gerust stellen. Ik zal altijd proberen om ze te
beantwoorden.

Groetjes,
Marian

6 opmerkingen:

  1. Bedankt voor de uitleg Marian! Mocht ik er mee aan de slag willen, dan scheelt dit al heel veel tijd! Nu maar hopen dat ik dan weet bij wie die hele uitgebreide verhaal ook al weer stond ;-)!

    Lieve groet, Ingrid

    BeantwoordenVerwijderen
  2. En nu dus deze post goed opslaan, zodat je weet wat je gedaan hebt.
    Ik vind degene waar ik nu (met een lieveheersbeestje) naar kijk zo mooi.

    Fijne avond, lia

    BeantwoordenVerwijderen
  3. wat superleuk Marian die wisselende foto's in je header!!

    fijne week!
    lieve groet Tjits

    BeantwoordenVerwijderen
  4. Ik ben mijn header al een hele tijd hartstikke beu maar nog even niet de puf om een fotoshoot met Guus te doen en daar iets van te knutselen. Vind jouw wissel-header wel heel mooi, bijzonder ook!

    BeantwoordenVerwijderen
  5. Gaaf zeg....maar het lijkt me erg ingewikkeld.....weer zoiets waar ik dan weer weinig van begrijp.
    ;)
    Het resultaat is echt heel leuk en bijzonder, was het werkje wel waard.
    Fijne avond

    Liefs

    BeantwoordenVerwijderen
  6. Ik vond dit altijd erg mooi bij jou, wilde er ook nog naar vragen hoe je dat deed.Nu staat het hoe en/of wat gewoon hier, maar nu zakt de moed me in de knieen...wat een verhaal.
    Mag ik dit kopieren en plakken, en opslaan, zodat ik het eens op mijn gemak kan lezen...als het huwelijk voorbij is, wil ik het ook eens gaan poroberen...

    BeantwoordenVerwijderen