Kaders rond hotspots in safari en Ei

[NeoMuis]

Hallo,

In de site die ik gemaakt heb in DW gebruik ik hotspots. Nu hebben ze een stippellijn in EI wanneer je erop klikt en een blauwe rand in safari. In Firefox heb ik dat niet.

Weet iemand waar dat aan kan liggen?
Heb al eens onfocus="blur() geprobeerd, maar dat werkt schijnbaar niet bij hotspots.

Ik vind dat rand niet mooi uitzien:evil:. Hopelijk kan iemand me helpen

 

[csshunter]

Hoi NeoMuis,
Welkom op het forum!

• Heb je ook al eens onclick="this.blur()" geprobeerd?
• Welke IE is het? IE7, IE8, IE9 of allemaal?
• En heb je misschien een link naar een (test)pagina?

Met vriendelijke groet,
CSShunter

 

[NeoMuis]

Ja bedankt, handig die forums!!

Heb IE8 geprobeerd
Weet niet precies waar ik die code dan moet zetten...
nu staat er:
<area shape="rect" coords="379,157,446,185" href="RThome.htm" onmouseover="MM_swapImage('Header','','images/Header-RT.png',1)" onmouseout="MM_swapImgRestore()" />

RTHome is het onderliggende image, daaroverheen heb ik dan die hotspots.
Heb geen testsite, hij staat gewoon al online www.indenhof.nl dus daar kun je misschien zien wat ik bedoel =)

 

[NeoMuis]

ps deze gaat toevallig over het racing-team gedeelte, maar zag dat het ook op het camping indenhof gedeelte zat

 

[csshunter]

Hoi NeoMuis,
In Internet Explorer 7 en Safari kan ik hier het probleem van de stippellijnen/blauwe kaders van de hotspots niet reproduceren. Ook in Chrome en Opera zie ik niet zoiets.
Maar ik heb de indenHof-site eens bekeken, en ben tot een paar verrassende conclusies gekomen!

Analyse

• De img-map met hotspots is bedoeld voor het aanklikken en hover-wisselen van de menu-items. Dat gaat in combinatie met javascript en een serie afbeeldingen voor de hovers. Dat is nogal een verouderde methode, het werkt niet als javascript uit staat, en het vreet bestandsgrootte!
  Maar gelukkig: dat hoeft helemaal niet, want er is CSS!
• De pagina is opgemaakt in een tabel-structuur. Ook dat is een verouderde methode.
  Maar gelukkig: dat hoeft helemaal niet, want er is CSS!
• Ook voor de links in de footer is een image-map met hotspots gebruikt.
  Maar gelukkig: dat hoeft helemaal niet, want er is CSS!
• De tekst in de footer blijkt geen tekst te zijn, maar zit in de footer-afbeelding.
  Maar gelukkig: dat hoeft helemaal niet, want er is CSS!
• De pagina herbergt maar liefst 1,2MB aan images.
  Maar gelukkig: dat hoeft helemaal niet, want de images kunnen geoptimaliseerd en gecombineerd worden, en er is CSS om de combinaties op te splitsen!
• De pagina verwijst naar een stylesheet "naamloos.css", dat niet bestaat (Page Not Found), wat kostbare browsertijd kost. Ook dat hoeft niet.

Vergelijk hoe "meer met minder" kan:

                    [I]origineel:           kan worden:[/I]
pagina-achtergrond: 1680*926px,  271kB   1380*668px,   34kB
header:             1048*183px,   59kB   1300*200px,   23kB (incl. home- en menu-hovers!)
slaperij-hover:     1048*183px,   60kB                  -
eeterij-hover:      1048*183px,   60kB                  -
feesterij-hover:    1048*183px,   61kB                  -
motorij-hover:      1048*183px,   60kB                  -
agenda-hover:       1048*183px,   60kB                  -
contact-hover:      1048*183px,   60kB                  -
achter-schaduw:     1048* 15px,    1kB    990* 30px,    1kB
footer:             1048*218px,  319kB    950* 30px,    5kB
racingteam:         (in footer)    -      170*220px,   10kB (incl. hover)
design-images:      (in footer)    -      116* 28px,    2kB (incl. hover)
homepage-vos:        442*709px,  186kB    435*630px,   45kB
foto-icoontje:       129*126px,    6kB    134* 61px,    4kB (incl. hover)
onderhoekjes:                      -      990* 50px,    5kB (extra)
mini-logo:                         -      100* 48px,    3kB (extra)
favicon:                           -       16* 16px,    1kB (extra)
==============================  ======+               =====+
totaal images................:  1203kB                133kB
homepage-html................:     9kB                  3kB
idhof.css....................:     -                    5kB 
==============================  ======+               =====+
totaal pagina-gewicht........:  1211kB                141kB
scripts, lightbox-fotos/css..:      pm                   pm

Waarmee de pagina kwaliteitswinst krijgt en toch flink sneller op het scherm staat!

Hoe dan wel?

• Proeve van de homepage: van-hotspots-naar-css.htm
  (zie broncode)
  NB: De lightbox met images moet hier nog in gezet worden (diverse
  javascripts, lightbox-css en images), evenals het GoogleAnalytics script.

Toelichting

• Het stylesheet idhof.css van 4kB hoeft maar eenmalig gedownload te worden, en is herbruikbaar voor de andere pagina's.
• Zonder alle table-<tr>'s en <td>'s is de html een stuk rustiger en overzichtelijker geworden; andere pagina's kunnen het model volgen.
  Was bv.:
  

  <td width="59">&nbsp;</td>
              <td width="465" rowspan="2" valign="top"><img src="images/vos-home1.jpg" width="452" height="709" /></td>
            </tr>
            <tr>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
  
              </tr>
            <tr>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
              <td>&nbsp;</td>
            </tr>
          </table></td>
        </tr>
  
      </table></td>
      <td>&nbsp;</td>
    </tr>
    <tr>
      <td>&nbsp;</td>
  ...

  Nu:
  

  <div id="rechterkolom">
     <p class="opRandR"><img src="images/idhof-vos-home.jpg" width="435" height="630" alt="" /></p>
  ...

• De pagina was iets te breed voor een resolutie van 1024*768px. - Images en pagina wat versmald zodat het er bij 1024*768 mooi op past zonder L-R scrollbar onderaan.
• De wolkjes bij het landschap waren zelfs bij 1280*1024px resolutie niet te zien. - Opgeschoven in het img, en voor het evenwicht klein wolkje erbij.
• Landschap eindigde onderaan in wit, waardoor onderaan bij langere pagina's het verschil tussen background en pagina-wit vervalt. - Laten overgaan naar lichtgroen gras.
• Landschap een fixed positie gegeven, zodat de horizon gelijk blijft als de pagina omhoog wordt gescrolld.
• Imagemap met hotspot-menu vervangen door CSS-menu (geen javascript nodig). Probleem met stippellijntjes of blauwe randen kan zich niet voordoen!
• Niet voor alle bezoekers is duidelijk dat het logo een link is naar de homepage ("Home" ontbreekt in het menu). - "Home" in een wolkje bij het logo gezet, met ook hover-variant.
• Voor de gebruiksvriendelijkheid en betere toegankelijkheid: behalve de item-vergroting bij een hover ook een oranje streepje bij het hoveren over de items toegevoegd.
• Foto's onder de vos op de pagina waren flets (party-tent) / donker (zwembad). Gepimpt: zonniger gemaakt door meer kleurverzadiging resp. meer helderheid/contrast (vergelijk).
• Ook hover-varianten voor het foto-icoontje en het racingteam-logo gemaakt (feedback voor de bezoeker): in de stijl van het menu iets vergroot bij hoveren.
• Tekst stond in footer-afbeelding. - Plankjes tot losse achtergrond gemaakt en de tekst in de html gezet; gestyled met css. Beter voor Google, handiger voor de gebruiker die even adres of tel.nrs. wil kopiëren/plakken. Ook makkelijker aanpasbaar: bij verandering van een tel.nr. of iets in de openingstijden/vakantieperiode hoeft niet een nieuw img aangemaakt te worden.
• De verloop-zijkantjes ook naast de footer-plankjes laten doorlopen.
• Onder de footer een ronde hoekjes-einde van de pagina gemaakt, met nog iets ruimte er onder. Laat de pagina niet zo kil eindigen en sluit aan bij de hoekjes bovenin.
• Mini-logo gemaakt dat kan terugkomen in tussenkopjes, en herkenningspunten voor de bezoeker geeft (tevens voor de PR: beter inbranden op het netvlies).
• En een faviconnetje erbij, dat in de browser-adresregel en de pagina-tab komt te staan.

CSS
Is onderverdeeld in de verschillende pagina-onderdelen (zie stylesheet). Voor de html/css-structuur is het "stortkoker-model" gevolgd (zie uitgebreide toelichting in dit topic; hier kan het wat eenvoudiger omdat de breedte van de pagina-onderdelen steeds hetzelfde is).
Oude html voor de hotspot-toestand:

<map name="header" id="header">
   <area shape="rect" coords="340,69,431,103" href="slaperij.htm" onmouseover="MM_swapImage('header','','images/header-slaap.png',1)" onmouseout="MM_swapImgRestore()" />
   <area shape="rect" coords="452,71,531,103" href="eterij.htm" onmouseover="MM_swapImage('header','','images/header-eet.png',1)" onmouseout="MM_swapImgRestore()" />
   <area shape="rect" coords="558,71,657,103" href="feesterij.htm" onmouseover="MM_swapImage('header','','images/header-feest.png',1)" onmouseout="MM_swapImgRestore()" />
   <area shape="rect" coords="685,69,778,103" href="motorij.htm" onmouseover="MM_swapImage('header','','images/header-motor.png',1)" onmouseout="MM_swapImgRestore()" />
   <area shape="rect" coords="802,69,894,104" href="agenda.htm" onmouseover="MM_swapImage('header','','images/header-agenda.png',1)" onmouseout="MM_swapImgRestore()" />
   <area shape="rect" coords="917,68,1013,104" href="contact.htm" onmouseover="MM_swapImage('header','','images/header-contact.png',1)" onmouseout="MM_swapImgRestore()" />
   <area shape="poly" coords="23,140,303,118,304,63,280,66,276,82,252,79,231,91,230,71,178,71,180,92,153,94,148,87,151,60,152,51,165,30,141,33,126,48,125,70,111,87,101,82,88,67,96,50,99,31,98,18,79,23,64,20,48,19,36,22,19,19,18,30,24,45,23,59,17,72,26,83,20,91,15,107,15,121,18,137" href="index.htm" />
</map>

In combinatie met het stylesheet blijft er nu over in de html:

<ul id="menu">
   <li><a id="hme" href="index.htm">    <span>Home: In Den Hof.</span></a></li>
   <li><a id="slp" href="slaperij.htm"> <span>Slaperij.</span></a></li>
   <li><a id="eet" href="eterij.htm">   <span>Eterij.</span></a></li>
   <li><a id="fst" href="feesterij.htm"><span>Feesterij.</span></a></li>
   <li><a id="mtr" href="mototij.htm">  <span>Motorij.</span></a></li>
   <li><a id="agd" href="agenda.htm">   <span>Agenda.</span></a></li>
   <li><a id="ctc" href="contact.htm">  <span>Contact.</span></a></li>
</ul>

Belettering
De letters zijn aan de kleine kant, in een grijstint, en de regels staan erg dicht op elkaar (blokje 1 hieronder). Dat maakt de teksten moeilijk leesbaar.
De letters kunnen minder grijs (kleur "#202020"; nog geen zwart), en met de css-eigenschap line-height kunnen de regels wat verder van elkaar af komen (blokje 2).

Als je geen puur zwart-op-wit contrast wilt, kan je verder beter de achtergrond wat vergrijzen dan de letters (blokje 3, waar de letters in puur zwart zijn). Dat is beter leesbaar (ook voor mensen met minder contrastvermogen), en toch aangenamer dan een knallend zwart-wit. Dat moet er dan meteen aan het begin van de site-bouw in gezet worden, zodat de images er op kunnen aansluiten!

Inhoudelijk
De pagina begon met de bezoeker mee te nemen naar het verleden. *) Voor wie IndenHof al kent, is dat misschien aardig, maar de willekeurige bezoeker van de site (via Google!) zal vooral geïnteresseerd zijn in de hamvragen:

• Wat is het, waar is het, wat hebben ze te bieden, wat kan ik er doen?

Op een homepage moeten n.m.m. dit soort dingen in 1 oogopslag te zien zijn. Dat IndenHof een Camping-cafe is, blijkt nergens uit. Dat is wel de uitgebreide naam (die in de footer staat), maar dat zie je niet meteen; en de woorden Camping en Cafe komen verder niet op de pagina voor (ook beter voor Google van wel).
Dat IndenHof uitgebreide voorzieningen heeft, zie je ook niet meteen op de homepage.
Je kunt er wel achter komen door op het menu te klikken, maar daar staan woorden die niet direct duidelijk maken waar het over gaat. Als ik "Eterij" lees, denk ik eerder aan tosti's of een snackbar dan aan de mogelijkheid van een uitgebreid diner voor 200 gasten. Bij "Motorij" kan ik me helemaal niets voorstellen.

Vandaar heb ik uit de vervolgpagina's een korte bloemlezing gehaald, en de inswinger gemaakt om dat meteen te vertellen. Dan weet men waar men aan toe is, en begrijpt men ook waar de fantasienamen uit het menu op slaan.

Wat er in de omgeving te doen is, zal een tweede punt van overweging van de site-bezoeker zijn om te beslissen IndenHof aan te doen en echte bezoeker te worden. Dat kan dan voorop, voor de geschiedenis.

En tenslotte wil de ongeduldige surfer graag alles voorgeschoteld krijgen in hapklare brokjes: geen lees-teksten achter elkaar, maar duidelijke en niet te grote blokjes met een tussenkop die de kern weergeeft. - Aldus de ingrediënten gehusseld en opgepept.

De pagina is "natuurlijk" valid html en valid css, en scoort 46/47 op de Quickscan Webrichtlijnen (met een php-header erbij wordt dat 47/47).
Getest in: FF, Chrome, IE7, Opera en Safari; en in orde bevonden.
Volgens de screenshots van Netrenderer brengen IE8 en IE9 het er ook goed van af.

Zo is het gekomen.
Met vriendelijke groet,
CSShunter
_______
*) "Aan het einde van de vorige eeuw was Heerlen nog een idyllisch dorpje...": 1980, 1990? - Inmiddels zijn we een eeuwgrens gepasseerd!

 

[NeoMuis]

Jeetje, ik acht die antwoord niet meer haha.
Dit is wel een heel uitgebreid antwoord. Zoals je kon zien heb ik jaren geleden een Dreamweaver-cursus gehad. Maar nooit echt meer tijd gehad om me in code enz te verdiepen.
Ik ga dit in elk geval proberen.
Tja inhoudelijk zal ik het aan de klant doorgeven. Maar er zijn dingen die in de loop der jaren gegroeid zijn en hij voor sommige dingen zoals motorij enz gekozen heeft.
In ieder geval SUPER dat je zo hebt meegedacht met een muts als ik haha
Mocht ik er niet uit komen dan laat ik het weten.

Nogmaals bedankt xxx

 

[NeoMuis]

oja, hoe had je die foto's kleiner gemaakt (gecomprimeerd)?
Snapte ook nooit zogoed hoe ik dat met css moest koppelen aan de pagina. Maar goed ik ga t proberen =)

 

[NeoMuis]

Hoi csshunter,

Ik heb even gekeken hoe en wat. Maar snap niet zo goed hoe ik nu te werk ga met de afbeeldingen, zoals de buttons enz. Ik neem aan dat ik ze moet de navigatiebalk in stukken moet hakken? Of laat je hem in 1 stuk en heb je alleen idhof-header-sprite.png waarover <li><a id="hme" href="http://bliksekaters.nl/subs/idhof/index.htm"> <span>Home: In Den Hof.</span></a></li> enz wordt gezet?
En hoe heb je dat met het "landschap" gedaan. Heeft die afbeelding nu een vaste hoogte, maar wordt wel herhaald horizontaal? Wel beter dat ie nu fixed is!!
Kun je me ook uitleggen wat je met de onderhoekjes bedoeld?

Oja, waar kan ik dat oranje lijntje veranderen/verwijderen.

Ik ga nog even stoeien ermee in ieder geval. Ga alvast de afbeeldingen maken =)

Voel me nu echt een muts, maar ja. Kan het maar beter vragen, dan dat ik de hele dag lig te zoeken.

 

[NeoMuis]

hey hunter,
ik heb gezien hoe ik de afbeeldingen moet snijden enz. Heb jouw afbeeldingen gevonden =) duh

 

[csshunter]

Hoi NeoMuis,
Eerst even deze:

... er zijn dingen die in de loop der jaren gegroeid zijn en hij heeft voor sommige dingen zoals Motorij enz gekozen.

Ja, dat kan ik me heel goed voorstellen. Voor de eigenaar en de medewerkers zijn deze namen zo vanzelfsprekend geworden, dat ze er niet meer bij nadenken. Ook de vaste klanten zullen er helemaal aan gewend zijn. En mensen die er het eerst komen, zullen ook gauw weten wat deze namen betekenen. Misschien staan er ook wel bordjes met die namen op de gebouwen of op het terrein:

Allemaal geen enkele moeite mee, juist leuk!

Verband met de website
Dat op de site dan dezelfde namen gebruikt worden in het menu, is alleen maar goed. Ook geen probleem mee!
Het enige is: op de site moet je ook rekening houden met nieuwkomers, die nog niet weten wat de betekenis is. Daarom lijkt me een korte uitleg op de homepage erg zinvol. Het menu hoeft helemaal niet te veranderen, daar kunnen de namen gewoon hetzelfde blijven. Op de andere pagina's spreekt het vanzelf, daar hoeft ook niets aan te veranderen.
Op deze manier is het niet alleen een site voor 'insiders', maar voor iedereen. Wie geen uitleg nodig heeft, klikt gewoon snel door op het menu!

Behalve wegwijs maken van hopelijk nieuwe gasten zit er nog een groot voordeel aan vast. Zo'n uitleg biedt de gelegenheid om op de homepage een aantal belangrijke trefwoorden op te nemen, die de ranking in Google ten goede komen.

Over het kopje kleiner maken van de afbeeldingen-bestanden: wordt vervolgd!
CSShunter

<edit>
Ah, dit was een reactie op nr. #6 en #7, en blijkt kruispost met je vorige berichten!
</edit>

 

[NeoMuis]

kon alleen de image van het racingteam en designers niet vinden heb je die uitgeknipt met achtergrond of transparant?

 

[NeoMuis]

helemaal met je eens, de klant trouwens ook =) Dus we gaan zeker op de homepage je advies opvolgen. Het is altijd lastig om als leek te denken als je zelf precies weet waar t over gaat. Ik ben ook niet zo'n held in teksten schriven hihi
Maar dit heeft ons al heeeeeeeel erg geholpen!!!!!!

 

[NeoMuis]

Kun je me ook uitleggen hoe je die image van racingteam vergroot bij rollover. Of is dat net als bij de navigatiebalk een grotere afbeelding die "wisselt"
En hoe werkt dat dan met die header. Ik snap dat je hem verplaatst, maar hoe werkt t dan dat ie alleen 1 "button" veranderd en niet de hele header. Legt ie dan alleen dat stukje over de "button" heen?
In jou afbeelding heb je nl het oranje streepje van home en het woord home naast de afbeelding staan. Maar kan even niet volgen hoe hij ermee omgaat om dat dan als rollover te krijgen (behalve dat je de afbeelding verplaatst.
kan t niet goed uitleggen, maar hopelijk begrijp je wat ik bedoel

 

[csshunter]

De afbeeldingen

Het landschap
Was deze, ervan gemaakt: deze.
Werkwijze: begonnen met het onderstuk van 350px hoog er af te knippen, dat was alleen maar wit en kan gemist worden. *)
Kleurverloop van donkerder groen naar wit veranderd in donkerder groen naar lichtergroen onderaan. Kleur van het lichtergroen (#EDF1CF) onderaan opgegeven als background-kleur van de <html>, waar het landschap ook in zit, als background-img.
Waar het bg-img niet zit (vanwege het niet-herhalen in de verticale richting) komt nu de bg-color: dat sluit dus naadloos aan op de onderkant van het landschap en vult alles op, hoe hoog de pagina cq. het beeldscherm ook is.

In de breedte zaten in het midden prachtige glooiingen van het landschap, maar die zitten bij een gecentreerde weergave altijd verborgen onder het pagina-gedeelte. Alleen bij extreem heel-super grote resoluties zou er (vanwege de horizontale herhaling met repeat-x) aan de linker- en rechterkant iets van te zien zijn. Daarom het middendeel vereenvoudigd.
Vervolgens de breedte van het landschap op 1380px (rode lijn)gezet, en daar alles op aangepast:

Het rode streepjeslijntje is precies het midden. De blauwe streepjeslijntjes vormen de paginabreedte (990px), dat is wat bezoekers op een resolutie van 1024*768px te zien krijgen. De groene streepjeslijntjes geven een breedte van ca. 1265px weer, dat is wat bezoekers op een resolutie van 1280*1024px te zien krijgen.
Bredere beeldschermen krijgen de herhaling links en rechts te zien (het totaal in de constructie-afbeelding hierboven komt neer op een schermbreedte van 2500px).
Met de wolkjes is geschoven zodat ze op elke resolutie een prettig beeld geven. De linkerkant van het landschap en de rechterkant sluiten naadloos op elkaar aan, zodat van de grens van de herhaling niets te zien is.
Alles onder de waterlijn van het landschap (hierboven wit), wordt via de background-color tot lichtgroen gemaakt.
De binnenkant van de pagina wordt wit, en dekt aldaar het landschap af, evenals de verloop-zijkantjes links en rechts van het pagina-wit.
Het eindresultaat opgeslagen als .jpg met een compressie van 15%, dat geeft voldoende kwaliteit. Resultaat: 34kB.

Heeft die afbeelding nu een vaste hoogte, maar wordt wel herhaald horizontaal?

Inderdaad: de vaste hoogte hoeft niet opgegeven te worden, omdat het een achtergrond-afbeelding is. Het herhalen wordt opgegeven met repeat-x (x = horizontaal, y = verticaal herhalen; er is ook no-repeat: raden wat dat betekent!). In de css:

html {
	height: 100%;
	padding-bottom: 1px;
	background: #EDF1CF url(../images/idhof-bg.jpg) fixed repeat-x 50% 0; 
	color: #202020;
	}

De #EDF1CF is dus het lichtgroen buiten het landschapje, fixed zet 'm vast op de opgegeven positie. De opgegeven positie is (ten opzichte van het [0,0] punt = de linkerbovenhoek van het scherm, op welke resolutie ook): 50% 0. Dwz. eerst horizontaal, dan verticaal: de helft van de afbeelding komt op 50% vanaf links, dus altijd horizontaal gecentreerd, en de afstand tot de bovenrand van het scherm is niks.

Onderhoekjes
Daarmee bedoel ik het onderrandje van de footer: deze.
Omdat de footer-afbeelding van de plankjes zichzelf verticaal herhaalt om wisselende tekst-hoogte te kunnen bedienen (en daardoor maar weinig hoogte hoeft te hebben), kunnen deze hoekjes niet aan de onderkant van de footer-afbeelding komen, maar zitten in een los bestandje.

Ga alvast de afbeeldingen maken

Als ze bevallen, kan je ze ook downloaden (en/of aanpassen).

oranje lijntje

waar kan ik dat oranje lijntje veranderen/verwijderen.

Die zit dus in deze, maar zal je al wel gevonden hebben.

Racing designers

kon alleen de image van het racingteam en designers niet vinden.

Ik heb alle images even hier gezet: [url]www.developerscorner.nl/csshunter/idhof/[/URL]
(Op m'n andere server was de submap verboden toegang, hier niet)

Inhoud homepage
Leuk dat de klant het ook ziet zitten!

altijd lastig om als leek te denken als je zelf precies weet waar 't over gaat.

Klopt, dat vraagt veel van je verplaatsings-fantasie. Het helpt meestal om jezelf te nemen die op zoek gaat naar iets dergelijks, maar dan in een andere plaats: "Als ik op een site kom van een bedrijf dat ik nog niet ken, wat wil ik dan weten?".

• En als ze jargon gebruiken als bv. "Tenterij", kan ik dan vinden wat ze daarmee bedoelen? Is dat de tenten-verhuurafdeling, of een kampeerveld voor tenten?

Wat ook kan, is om "het publiek" te vragen wat ze van de site vinden: "Wat vindt u ervan? Mist u iets? Andere opmerkingen?". Dat kan bv. aan de balie bij het inschrijven, of ook op de pagina "Contact" op de site: "Ook voor opmerkingen over deze website kunt u ons mailen" of iets dergelijks.

De header-sprite
Hoe die werkt, in een volgende aflevering.

• Leesvoer alvast: De Patrijspoort-theorie, over hoe background-images precies werken.

Wordt vervolgd,
Met vriendelijke groet,
CSShunter

PS:
Hoei, daar zie ik alweer een volgende vraag! Ik moet sneller worden!

____________
*) Wegknippen van een hoogte van 350px bij een breedte van 1680px levert alvast 350x1680= 588.000 pixels in 1 kleur die niet gedownload hoeven te worden (38% van de afbeeldingsgrootte overbodig).

 

[NeoMuis]

Nou je bent echt super!!!

Begin t te snappen, geloof t of niet haha
Dus dan "meet" je het aantal pixels waar de button uitkomt en die gebruik je bij x en y. Wat is dan een handige manier om erachter te komen welke x en y waardes je moet hebben?

:thumb:

Ik ga er zeker mee aan de slag.
xxx

 

[NeoMuis]

ps 1 dingetje nog. Ik vind zelf de schaduw van de achtergrondjes niet zo mooi (geen mooi verloop), maar ik neem aan dat dat komt doordat het bij jou een gecomprimeerde png is?

 

[csshunter]

De racingteam-sprite: plaatjes maken
Werkwijze:
Omdat ik geen origineel van het RT-logo had, begonnen met het footer-img te downloaden, waarin het RT-logo was opgenomen (incl. achtergrondplankjes). Dat gaf deze:

rct-plankjes.png​

Daar het logo "uitgeknipt" door de rest 1 kleur te geven (ik gebruik daarvoor altijd knalpaars [fuchsia, #ff00ff], omdat deze kleur bijna nooit in een afbeelding voorkomt). Dat gaf deze:

rct-klein.png​

En transparant gemaakt wordt dat deze:

rct-klein-transp.png​

Dit is een .png-bestand: met max. 16 miljoen kleuren. Er worden 2138 kleuren gebruikt, zegt mijn PaintShopPro. Nu probeer ik altijd even wat er gebeurt als je de kleurdiepte gaat verminderen. Als je dit img terugbrengt tot 256 kleuren, gebeurt er dit:

rct-klein-256.png​

Mooi! Op het oog (mijn oog) geen verschil te zien. En er zijn 254 kleuren gebruikt. Dan kan er een transparante .gif van gemaakt worden, die max. 256 kleuren heeft, en een kleinere bestandsgrootte (6.2kB ipv 15.6kB, minder dan de helft!):

rct-klein-transp.gif​

​

Toen in m'n tekenprogramma het logo geïsoleerd in een nieuw (transparant) laagje, en dat laagje opgeblazen tot beeldvullend. Daarna de rest weer opgepaarsd, teruggebracht tot 256 kleuren, en een transparante gif van gemaakt. Dat gaf deze:

rct-groot-transp.gif​

=====

Hiermee hebben we de twee varianten, die elk 170x110px groot zijn. De kleine staat in het midden, en de vergroting vindt daarmee ook plaats vanuit het midden, wat de bedoeling is.

=====

Nu het hover-wisselen met css
Met css kan je bij een hover zo ongeveer alle eigenschappen van een element (in ons geval: een link) laten veranderen. Bijvoorbeeld de kleur van een link:

a { /* normale toestand */
    color:  green;
    }
a:hover {
    color: red;
    }

Of:

a {
    background-color: white;
    }
a:hover {
    background-color: yellow;
    }

Maar je kunt ook een background-image in de link hebben, en dat laten verwisselen bij een hover.

In ons geval is het een link die geen tekst heft, en alleen het (background-)image.
Dan moet opgegeven worden hoe groot het oppervlak van de link moet zijn, want dat is het doorkijk-venster naar de background en wat daar in zit (de patrijspoort uit de patrijspoort-theorie). Net zo groot als ons img dus.

Ook moet verteld worden, dat het hele oppervlak de link is, en de hover of de klik op elk punt van het oppervlak moet plaatsvinden. Dat gebeurt met de eigenschap: {display: inline-block;}.
Voor de gewone toestand wordt nu de link-css:

#racingteam {
	width: 170px;
	height: 110px;
	display: inline-block;
	background: url(../images/rct-klein-transp.gif);
	}

De background-positie 0 0 kan weggelaten worden, want dat is de default-waarde.
Er hoeft ook geen {repeat: none} bij, want het img is precies zo groot als de patrijspoort, en kan niet buiten z'n oevers treden.

Voor de hover hoeven we alleen maar de andere afbeelding op te geven:

#racingteam:hover,
#racingteam:focus {
	background: url(../images/rct-groot-transp.gif);
	}

De :focus zit erbij om mensen die niet met de muis hoveren, maar met de Tab-toets op het toetsenbord van link naar link gaan, ook de verandering te laten zien.

• NB: Het prettige van een css-hover is (in tegenstelling tot een javascript-onmouseover): als de hover verlaten wordt, wordt automatisch de normale toestand weer van kracht. - Bij javascript moet dat er extra bij gezet worden met een "onmouseout"-functie, maar dat hoeft hier niet.

Waar blijft de sprite?
So far, so good: dit werkt.
Het zijn nu twee verschillende achtergrond-afbeeldingen, die om de beurt getoond worden.
Maar om download-tijd te sparen, kunnen de twee ook gecombineerd worden, onder elkaar of naast elkaar; in niet-transparante vorm deze:

idhof-racingteam-sprite-nt.gif​

En in transparante vorm deze:

idhof-racingteam-sprite.gif​

In de css voor de normale toestand kan gewoon de sprite opgeroepen worden zonder verdere toestanden:

#racingteam {
	width: 170px;
	height: 110px;
	display: inline-block;
	background: url(../images/idhof-racingteam-sprite.gif);
	}

Het onderstuk met de vergroting wordt niet getoond, want dit valt buiten de patrijspoort: het link-oppervlak (het groene randje) is maar 110px hoog.

Bij een hover hoeft nu niet het plaatje te wisselen, maar alleen de achtergrond-positie van het plaatje. Die moet 110px omhoog (= negatieve verticale hoogte t.o.v. de begintoestand), zodat nu de grote versie getoond wordt en de kleine versie boven het kijkvenster valt en niet getoond wordt:

#racingteam:hover, 
#racingteam:focus { 
    background-position: 0 -110px;
    }

Zo is ook de sprite geregeld. Tenminste... bijna.

Nog meer optimalisatie
Nu het definitieve sprite-image klaar is, kunnen we kijken of smush.it nog iets van de bestandsgrootte kan afknabbelen. Dat is een erg handig online gereedschapje, waar je een img-bestand in stopt, en na enkele tellen terug krijgt in geoptimaliseerde vorm, zonder kwaliteitsverlies.
Vraag niet hoe het kan, maar profiteer ervan!

• De idhof-racingteam-sprite.gif er in (12.6kB), en een idhof-racingteam-sprite.png eruit (10,6kB).

Mooi! Weer 2kB eraf gesnoept, dus de nieuwe in de css gezet, en klaar is race!

Leesvoer:

• Image saving; Gif, png, jpg: which is the best format?
• Een blokje knoppen.
• Pagina Images optimaliseren uit Reisverslag uit Cascadeland.

Tot zover op heden,
De sprite voor het menu gaat in principe op dezelfde manier, alleen zijn er daar meer onderdelen.

Wordt vervolgd!
CSShunter

PS:
Ah! Alweer een paar tussentijdse reacties! Ik had deze openstaan, dus zie 't pas bij het verzenden.

 

[csshunter]

Hoi NeoMuis,

Ad #15

Begin t te snappen, geloof 't of niet haha

Kijk eens aan, je wordt nog een lichtgevende NeonMuis!

Dus dan "meet" je het aantal pixels waar de button uitkomt en die gebruik je bij x en y.

Correcto!

Wat is dan een handige manier om erachter te komen welke x en y waardes je moet hebben?

Via een constructie-tekeningetje, komt in volgende reactie, kan 't zo snel niet bijbenen!

Ad #16

Ik vind zelf de schaduw van de achtergrondjes niet zo mooi (geen mooi verloop)...

Ik ook niet!

... maar ik neem aan dat dat komt doordat het bij jou een gecomprimeerde png is?

Nee hoor, dat heeft niets met compressie te maken. *)
Het lukte me alleen niet zo gauw om er in de idhof-verloop.png met m'n oude PaintShopPro-6 een mooie overgang van te maken naar transparant, en heb dat maar zo gelaten: vond dat voor 't betoog over de pagina-structuur van ondergeschikt belang.
Maar een mooiere is natuurlijk beter!

_______
*) Data-compressie (Wikipedia) is de "verdichting van gegevens" die een bestand bij het opslaan kan krijgen, om ruimte te sparen in de bestandsgrootte. Dat gaat volgens bepaalde rekenkundige methoden ("algoritmes"). Een browser past de truc omgekeerd toe, waarmee de afbeelding weer in alle pixels te zien is.
Vereenvoudigd voorbeeld:
Op een lijntje van 1px hoog en 1000px breed zitten per pixel van links naar rechts de kleuren:

rood, geel, groen, blauw, paars, groen, groen, wit, wit, wit wit, wit. wit, wit wit, wit. wit, wit wit, wit. wit, wit wit,  ... en de rest ook allemaal wit t/m de laatste px van de 1000.

Dat zijn dus 1000 kleur-noteringen. Maar je kunt er ook van maken:

rood, geel, groen, blauw, paars, groen, groen, 993*(wit)

Die notering kost veel minder ruimte, en komt op hetzelfde neer. Dat is dan het bestand-met-compressie, dat verzonden wordt over internet.
Na ontvangst gaat de browser dat ontrafelen. Die ziet 993*(wit) staan, en zet dat voor het pixel-voor-pixel weergeven op het scherm weer om in de opdracht aan de grafische kaart:

rood, geel, groen, blauw, paars, groen, groen, wit, wit, wit, wit, wit, wit, wit, wit, wit, wit, wit, wit, wit, wit, wit, wit, wit, wit, wit, wit, wit, wit, wit, wit, enz.

Zo ongeveer.

Bij een jpg-bestand kan je zelf de mate van compressie instellen (dw.z. de rekenmethode die gebruikt moet worden, maar daar zorgt het tekenprogramma voor): weinig compressie = groot bestand, maar wel goede kwaliteit; en omgekeerd. Bij een jpg met veel compressie lukt het omkeren achteraf niet zo goed: wel een klein bestand, maar slechter van kwaliteit (met veel "artefacten" bij kleurscheidingen of contrastscheidingen: plekjes waar de pixels rare kleuren hebben en onscherpte veroorzaken). Bij foto's valt dat vaak niet zo op, maar bij lijntekeningen of afbeeldingen met scherpe lijnen er in (logo's!) kan dat heel storend zijn.

De png-compressiemethoden zijn wat dat betreft veel beter: die blijven na het terugveranderen net zo gestoken scherp als ze waren, en ook met exact dezelfde kleuren. Nadeel kan zijn (met name bij groot formaat afbeeldingen), dat de png-compressie niet zo drastisch is, en er dus nog steeds veel bestandsgrootte is. Dan wordt het afwegen tussen kwaliteit en kleuraantal-vermindering of compressie (zoals in het artikeltje Image saving wordt geïllustreerd).

 

[csshunter]

Zo, nu de header-sprite nog voor het menu.

Header-sprite
Fase 0
Begonnen met een img van 990x300px aan te maken (paginabreedte en voldoende hoogte, later hoogte bij te knippen), en daar de blauwe lucht van de pagina-bg afbeelding in te zetten (het rechterwolkje zal tevoorschijn komen nadat de afbeelding daar transparant is gemaakt).
In laagje erboven het logo en de menu-items gemonteerd. Laagje daar weer boven: de iets vergrote hover-varianten van de menu-items.

=======
Fase 1
De gewone-toestand header is nu 990x163px geworden. Het strookje met de hover-varianten kan recht naar beneden zakken, en onder die 163px komen. De hover-variant van het logo zou er ook onder kunnen komen, maar het is voordeliger voor de ruimte om deze aan de rechterkant neer te zetten. Dat wordt deze (lichtgroen is niet-nodige ruimte):

=======
Fase 2
In een laagje erboven zetten we rechthoekjes voor waar de hover-oppervlakjes in de hover-strook moeten komen. Daarmee heb je meteen de op te geven maten voor de links (hoogte is altijd 37px, breedte varieert per item). De linkerbovenhoek van de logo-hover markeren we ook even, maar we weten al dat deze op 990px vanaf links zit, en op 0 hoogte begint:

De positie van de hover-items is nu ook makkelijk te vinden: altijd -163px omhoog voor de y-waarde, en de negatieve waarde van de afstand vanaf linkerkant tot het blokje als x-waarde.
Doordat de links-oppervlakjes het doorkijkvenstertje zijn, wordt alleen het hover-stukje van één item getoond, de opgeschoven rest blijft buiten beeld (net als bij de racingteam-hover).

• NB: de gewone toestand is een gemeenschappelijke achtergrond die in de #header zit. De hover-varianten vallen buiten beeld, omdat de header de maten van de normale toestand heeft, en de rest buiten die patrijspoort niet te zien is.
• Dat zou genoeg moeten zijn, maar Internet Explorer 7 heeft het nodig dat in de normale toestand van de links óók een background-img zit, anders werken de hover-oppervlakken niet goed.
• Daarom zit de sprite ook alvast in alle links. Om niet voor alle items apart de background-positie voor de normale toestand op te hoeven geven, krijgt de sprite van 200px hoog een y-waarde die 'm onzichtbaar maakt:
  

  #menu a {
  	...
  	background: url(../images/idhof-header-sprite.png) no-repeat 0 -200px; 
  	}

• Voor de hovers hoeft nu alleen de background-positie opgegeven te worden: het bg-img is er al.

=======
Fase 3
Nu kunnen alle stukjes waar toch al dezelfde achtergrond (van de pagina-bg) achter zit weggelakt worden. Bij de hover-toestand voor het logo zit daar de normale-toestand logo-bg achter; daar kan ook weggelakt worden wat er al is, zodat alleen de te veranderen stukjes overblijven. Ook hier blijken 256 kleuren voldoend te zijn, dus het kan voorlopig een gifje worden.
Dat geeft:

=======
Fase 4
En tot slot kan de weggelakte tint transparant gemaakt worden, en de resulterende gif via smush.it tot een kleinere png worden gemaakt. Dat is dan het eindresultaat:

=======
Fase 5
Nu het img er is, en uit de constructie-tekening de maten afgelezen kunnen worden, is het maken van de bijbehorende css kinderspel:

#menu a {
	position: absolute;
	top: 0;
	left: 0;
	height: 37px; /* algemeen */
	outline: 0;
	display: block;
	background: url(../images/idhof-header-sprite.png) no-repeat 0 -200px; 
	}

a#hme { margin: 0; width: 320px; height: 140px } /* uitzondering voor de hoogte */
a#hme:hover, a#hme:focus { background-position: -990px 0 }
	
a#slp { margin: 63px 0 0 320px; width: 114px }
a#slp:hover, a#slp:focus { background-position: -320px -163px }
	
a#eet { margin: 63px 0 0 433px;	width: 89px }
a#eet:hover, a#eet:focus { background-position: -433px -163px }

a#fst { margin: 63px 0 0 522px;	width: 122px }
a#fst:hover, a#fst:focus { background-position: -522px -163px }

a#mtr { margin: 63px 0 0 644px;	width: 111px }
a#mtr:hover, a#mtr:focus { background-position: -644px -163px }

a#agd { margin: 63px 0 0 755px;	width: 109px }
a#agd:hover, a#agd:focus { background-position: -755px -163px }

a#ctc { margin: 63px 0 0 864px;	width: 126px }
a#ctc:hover, a#ctc:focus { background-position: -864px -163px }

(Muis-loze bezoekers kunnen de hovers via de Tab-toets zien door de :focus)

En de html wordt simpelweg:

<ul id="menu">
	<li><a id="hme" href="index.htm">    <span>Home: In Den Hof.</span></a></li>
	<li><a id="slp" href="slaperij.htm"> <span>Slaperij.</span></a></li>
	<li><a id="eet" href="eterij.htm">   <span>Eterij.</span></a></li>
	<li><a id="fst" href="feesterij.htm"><span>Feesterij.</span></a></li>
	<li><a id="mtr" href="mototij.htm">  <span>Motorij.</span></a></li>
	<li><a id="agd" href="agenda.htm">   <span>Agenda.</span></a></li>
	<li><a id="ctc" href="contact.htm">  <span>Contact.</span></a></li>
</ul>

(In de <span>'s zit tekst voor Google en text-browsers, op scherm onzichtbaar)
Dusdoende:
Image-map verdwenen, preloaden verdwenen, javascript verdwenen. :d
Wel Google-vriendelijk, prettig toegankelijk, valid html en css, en cross-browser.

Met vriendelijke groet,
CSShunter
_______
PS: Ik zet onder het mapje "images" altijd een lokaal mapje "voorwerk", waar alle constructie-materiaal in zit. Dat blijft bewaard, zodat bij een verandering makkelijk op de laagjes kan worden teruggegrepen, en niet alles overnieuw hoeft.

• Anders had ik ook bovenstaande afbeeldingen weer helemaal opnieuw moeten maken!

 

[NeoMuis]

Dus dan is a#slp { margin: 63px 0 0 320px; width: 114px } de positie van de patrijspoort
a#slp:hover, a#slp:focus { background-position: -320px -163px } de beweging in de patrijspoort
-320 px -163px in breedte en in dit geval kun je voor de volgende button de breedte van de voorgaande button optellen?

Wat is dan die 0 0 tussen 63px en 644px?