title pop up venster

Status
Niet open voor verdere reacties.
We gaan weer een stapje verder. Waar waren we gebleven?
De afbeelding is nu correct, en staat er in als background-image.

=====
Fase 5: de hover-afbeeldingen
Het eerste dat nodig is, is een plaatjes waarop de grenzen van alle hover-secties te zien zijn, zodat de bezoeker kan kijken waar deze met de muis naar toe moet om de toelichtingen te zien.

Hiervoor gebruiken we de gemaakte levensrad-afbeelding. In een tekenprogramma kunnen in een laagje erboven nu de grenzen van de secties opgelicht worden.
Maar dat is een nogal groot bestand: 416kB.
Daar kan wat aan gebeuren! Eigenlijk zijn alle pixels die niet de secties zijn, hetzelfde als de gewone afbeelding. Als die transparant gemaakt worden, hoeven alleen de sectie-randen in de afbeelding te komen. In de pagina kan dan het transparant gemaakte plaatje over de oude geplakt worden (bij hoveren): daarom staat de gewone afbeelding er als achtergrond in! - Methode volgt later, eerst de afbeeldingen klaar maken!
Als je in het tekenprogramma het laagje neemt van de secties, kan je alles selecteren waar niet de sectie-randen zijn. Die vul je op met één kleur die niet in de foto voorkomt (bijvoorbeeld pimpelpaars). Het hoeft niet heel nauwkeurig, een paar dubbele pixels zijn ook niet erg.

sectiegrens-vergroot.png

Nu kunnen een png- en een gif-afbeelding transparant gemaakt worden, en een jpg niet. De afbeelding moet dus opgeslagen worden als .png of .gif bestand.
Een png kan "ware kleuren" weergeven (16 miljoen kleuren), een gif maar 256.
Deze is 95kB groot, en een transparante png kan problemen opleveren in oudere Internet Explorers. Daarom brengen we de kleuren terug naar 256, en slaan de afbeelding op als gif. Het verschil is niet te zien! (er wordt afgerond naar de meest dichtbij zijnde kleur; het kunnen alleen minimale afwijkingen in tint zijn van de pixels die naast de sectiegrenzen staan en eigenlijk hetzelfde zouden moeten zijn.)
Met in het tekenprogramma een klik op "pimpelpaars transparant maken" is de gif nu transparant geworden.
  • Resultaat alle sectiegrenzen: outline-all.gif
  • Deze is maar 42kB groot, dan scheelt ook pagina-snelheid.
Om het effect te zien, plakken we die nu in de pagina even tijdelijk over de achtergrondafbeelding heen (de hover-techniek komt later).
  • Ingemonteerd op de pagina: levensrad-fase-5.htm
  • Het past precies: je ziet niet dat het twee over elkaar heen geplakte afbeeldingen zijn van een achtergrond-img en een voorgrond-img!
Op dezelfde manier kunnen nu de sectiegrenzen van de afzonderlijke secties in een transparante gif gezet worden.
Maar dat is gelukkig nogal eenvoudig geworden. In de afbeelding van alle sectiegrenzen worden telkens de niet-nodige sectie ook paars weggelakt. De hoekjes van de overblijvende sectie moeten even bijgewerkt worden, en dan heb je bv.:
Zo zijn er dus: 1 yama, 12 schakels, 1 middencirkel, 1 neergang-segment, 1 opgang-segment en 6 werelden. Ook de monnik rechtsboven is er als eigen outline-sectie, die kan later gehoverd worden als je over de bijbehorende tekst gaat (niet over de afbeelding, vandaar niet in het overzicht).
  • Het hele setje outlines zit hier ingepakt in een zip'je: outlines-levensrad.rar.
  • Hoeft nu nog niets mee te gebeuren, komt later!
Zo, nu is het voorbereidend werk aan de pagina-structuur en opmaak gedaan, en staan de afbeeldingen klaar voor gebruik.
Dan kan eindelijk het eigenlijke werk aan de hover-toelichtingen opgepakt worden! :)

Wordt vervolgd!
CSShunter
 
Laatst bewerkt:
Fase 6: een hover over de monnik rechtsboven
In de tekst staat: "Een monnik rechtsboven verwijst naar ... enz.".
Van de woorden "Een monnik rechtsboven" kan een link gemaakt worden, met een href="#niks", d.w.z. als je er op klikt, gebeurt er niets (want een bladwijzer met name="niks" of id="niks" komt niet op de pagina voor).

Er moet wel wat gebeuren bij een hover met de muis over deze link!
Daarvoor schakelen we javascript in: we maken een functie hover() die bij een hover in werking moet gaan:
HTML: 
<a href="#niks" onmouseover="hover()">Een monnik rechtsboven</a> ...

Hoe moet de functie er uit zien?
In de html staat:
HTML: 
<div id="rad">
   <img id="rad-img" src="images/transparant.gif" width="586" height="884" alt="">
</div>
Dat wil zeggen: via de css is de levensrad-figuur er als background-image in gezet. Er overheen staat een voorgrond-laagje geplaatst met een transparant img, dat net zo groot is. Dat transparante image heeft het unieke kenmerk id="rad-img".
Wat er moet gebeuren:
  • Bij een hover moet de nu helemaal doorzichtige voorgrond-figuur met deze id="rad-img" opgezocht en bij zijn kraag gevat worden.
  • En hiervan moet het bronbestand (de "src") tijdelijk vervangen worden door de "outline-monnik.gif", waarin een ovaaltje om de monnik-figuur staat, en die verder ook doorzichtig is.
In javascript-taal:
[JS]function hover(){
obj = document.getElementById('rad-img');
obj.src = 'images/outline-monnik.gif';
}[/JS]
Maar we zijn er nog niet: nu wordt bij een hover de outline aangezet, maar als we niets doen blijft die aan staan.
Op dezelfde manier moet er dus een functie hide() gemaakt worden, die het volledig transparante plaatje weer terugzet als de hover verlaten wordt:
HTML: 
<a href="#niks" onmouseover="hover()" onmouseout="hide()" >Een monnik rechtsboven</a> ...
Met als functie:
[JS]function hide(){
obj = document.getElementById('rad-img');
obj.src = 'images/transparant.gif';
}[/JS]
Om te vermijden dat er bij een onverhoopte klik op de hover-link in de adresbalk "#niks" achter de paginanaam komt te staan, wordt nog aan de html toegevoegd, dat het script niet de link moet volgen na het uitvoeren van de functie, met onclick="return false":
HTML: 
<a href="#niks" onmouseover="hover()" onmouseout="hide()" 
	onclick="return false" >Een monnik rechtsboven</a> ...
Om aan te geven dat het geen gewone link is, kan nog het handje, dat bij een hover verschijnt, vervangen worden door een eigengemaakt pijltje "arrow-down.png", via:
HTML: 
<a class="arrowdown" href="#niks" onmouseover="hover()" onmouseout="hide()" 
	onclick="return false" >Een monnik rechtsboven</a> ...
met als css:
Code: 
.arrowdown {
   cursor: url(images/arrow-down.png), default;
   }
Hiermee hebben we het

Wordt vervolgd!
 
Laatst bewerkt:
Fase 7: een hover voor alle hoverbare onderdelen!
Op de eerder aangemaakte outline-all.gif staan de omtrekken van alle delen van het rad die (later) gehoverd kunnen worden voor toelichting.
De bediening kan nu opgehangen worden aan de zin "(ga met de muis over de verschillende delen van het rad voor toelichting)", op dezelfde manier als de hover-link voor de monnik:
HTML: 
<p>(ga met de muis over 
   <a class="arrowdown" href="#niks" onmouseover="hoverAlles()" 
      onmouseout="hideAlles()" onclick="return false" >de verschillende delen</a>
      van het rad voor toelichting)</p>
Hiervoor is dan een nieuwe javascript-functie hoverAlles() nodig, die hetzelfde in elkaar zit als de functie voor het showen van de monnik-omtrek: deze keer om de "outline-all.gif" op te roepen.
Een hideAlles() functie hoort er ook bij.

Nu zit er aan te komen, dat ook voor de hovers bij alle 22 aparte omtrekken van het rad een eigen hover-functie en een eigen hide-functiein werking moet gaan.
Op deze manier zouden dat dus 44 extra functies gaan betekenen... :confused:
Die functies zouden dan alleen maar verschillen in de naam van de te tonen outline-gif, en verder volkomen gelijk zijn.
Dat gaan we dan ook niet doen! :)

In javascript bestaat er namelijk een handige truc om aan een functie een soort plaatsvervangende variabele op te hangen:
[JS]function hover(n){
obj = document.getElementById('rad-img');
obj.src = 'images/outline-'+n+'.gif';
}
[/JS]
De "n" hierin kan alles zijn, wat wordt ingevuld bij het oproepen van de functie. Als voor "n" wordt ingevuld 'monnik', wordt de src: outline-monnik.gif gebruikt. Als voor "n" ingevuld wordt ingevuld 'all', wordt de src: outline-all.gif gebruikt, enz.
Ook voor het verbergen:
[JS]function hide(n){ // de n wordt hier nog niet gebruikt,is voor later!
obj = document.getElementById('rad-img');
obj.src = 'images/transparant.gif';
}
[/JS]
Zo is er dus nu een universele functie gebakken voor alle hovers en alle hides!

De oude monnik-hover moet nu even aangepast worden met het woord 'monnik' in de functie-oproep:
HTML: 
<a class="arrowdown" href="#niks" onmouseover="hover('monnik')" onmouseout="hide('monnik')" 
    onclick="return false" >Een monnik rechtsboven</a> ...
En de nieuwe krijgt het argument 'all' mee:
HTML: 
<a class="arrowdown" href="#niks" onmouseover="hover('all')" onmouseout="hide('all')" 
    onclick="return false" >de verschillende delen</a> ...
Idem dito voor de hide-aanroep.

Als nog een class="center" aan deze regel wordt gegeven, met .center {text-align:center;}, wordt de regel gecentreerd, en is hiermee ontstaan:
Wordt vervolgd!
 
Laatst bewerkt:
Fase 8: de hotspots
De eerste hotspot gaat worden: het hoofd van Yama, waarvoor de outline-yama.gif klaar staat.
Voor het snel maken van hotspots haal ik mijn oude FrontPage van stal, waarin dat makkelijk gaat.
  • NB: verder nooit FrontPage gebruiken als webeditor! Produceert verkeerde en achterhaalde codes, die vaak alleen in (oude versies van) Internet Explorer werken, en niet in andere browsers. Om van valid html maar te zwijgen...
Eerst kan de outline-all.gif even tijdelijk in de html gezet worden (i.p.v. de transparante gif), dan zie je precies waar de lijntjes zitten die nu ge-hotspot moeten worden.
We kiezen voor "veelhoekige hotspot" (=polygoon), en plekken in de ontwerp-weergave een serie punten om het hoofd van Yama:

levensrad-hotspot.png

Alleen de randen waar een andere hotspot naast komt te liggen, hoeven heel precies gemarkeerd te worden.
De link waarnaar gevraagd wordt, noemen we "#yama". De map-verwijzing ("usemap") waarnaar gevraagd wordt noemen we "#hovermap".
In de html-weergave staat nu de code voor alle puntjes:
HTML: 
<div id="rad">
   <img id="rad-img" src="images/outline-all.gif" 
      width="586" height="884" alt="" usemap="#hovermap">

   <map name="hovermap">
      <area href="#yama" shape="polygon" 
         coords="201, 201, 178, 150, 183, 87, 212, 54, 245, 31, 286, 23, 335, 27, 375, 46, 398, 68, 415, 100, 422, 143, 415, 173, 394, 207, 365, 196, 343, 192, 332, 191, 324, 192, 318, 192, 308, 194, 298, 195, 286, 191, 279, 189, 271, 192, 262, 188, 242, 190, 225, 193, 214, 196">
   </map>
</div>
De officiële naam voor de shape="polygon" is volgens de html-definitie shape="poly", dus dat kan even veranderd worden. Ook moet een <area> om valid html te zijn een alt="" hebben.
Verder kan nu ook de instructie gegeven worden voor de hover- en de hide-functie.

Voor Yama wordt dan het geheel, als we ook de transparante gif weer terugzetten:
HTML: 
<div id="rad">
   <img id="rad-img" src="images/transparant.gif" 
      width="586" height="884" alt="" usemap="#hovermap">

   <map name="hovermap">
      <area href="#yama" shape="poly" alt=""
         onmouseover="hover('yama')" onmouseout="hide('yama')" onclick="return false"
         coords="201, 201, 178, 150, 183, 87, 212, 54, 245, 31, 286, 23, 335, 27, 375, 46, 398, 68, 415, 100, 422, 143, 415, 173, 394, 207, 365, 196, 343, 192, 332, 191, 324, 192, 318, 192, 308, 194, 298, 195, 286, 191, 279, 189, 271, 192, 262, 188, 242, 190, 225, 193, 214, 196">
   </map>
</div>
  • NB: Hier komt de aap uit de mouw voor de transparante gif. Als deze er niet was, zou er geen usemap-verwijzing gegeven kunnen worden die in werking moet treden: er is een voorgrond-img nodig om hotspots op aan te geven!
    Hoewel de transparante afbeelding compleet doorzichtig is, is het wel een image (met "transparant vlees") waarop de hotspots gedefinieerd kunnen worden.
Nu is bij het hoofd van Yama ook de omtrek te zien, als je eroverheen gaat met de muis.
Er verschijnt nog geen toelichting, die komt later.
Eerst de hotspots voor alle andere secties aanmaken! :)

En om de bezoekers met een wat langzamer internetverbinding niet telkens even te laten wachten tot een hover-image is gedownload, is een "preload" functie toegevoegd. Daarmee worden na het laden van de pagina alle hover-images ook alvast gedownload in een eerst lege <div>, terwijl ze via de css onzichtbaar worden gehouden:
HTML: 
<div id="preloadHovers"><!-- ! --></div>
[JS]var preload = document.getElementById('preloadHovers');
var preloadImages = '<img src="images/outline-monnik.gif">';
preloadImages += '<img src="images/outline-all.gif">';
preloadImages += '<img src="images/outline-yama.gif">';
preloadImages += '<img src="images/outline-schakel-1.gif">';
preloadImages += '<img src="images/outline-schakel-2.gif">';
... enz. het hele rijtje

window.onload = function(){ /* allemaal binnenhalen, maar pas nadat de pagina er al is */
preload.innerHTML = preloadImages;
}[/JS]
Code: 
#preloadHovers img { /* buiten het schermoppervlak houden: onzichtbaar */
   position: absolute;
   top: 0;
   left: 0;
   margin-left: -9999px;
   }

=====
Even later: ;)
Wordt vervolgd!
____________
PS: Het is nog steeds valid html en valid css; dat moet je continu in de gaten blijven houden!
 
Laatst bewerkt:
Verder met het groeimodel!

Fase 9: de toelichtingen bij de 12 schakels
Hiervoor wordt binnen de <div id="rad"> een nieuwe <div id="toelichtingen"> gemaakt, waar alle toelichtingen in komen. Eerst die voor de eerste schakel:
HTML: 
<div id="schakel-1">
   <h2>Schakel 1</h2>
   Onwetendheid: blinde man. De wortel van samsara is onwetendheid: het 
   niet begrijpen van de ware natuur van alle fenomenen en het niet herkennen 
   van de natuur de leegte van de geest.<br>
   Uit deze onwetendheid ontstaan illusies, die onze geest verhinderen van 
   helder te zien.<br>
   Daardoor herkennen we ook niet de wet van oorzaak en gevolg, welke de basis 
   is (volgende schakel).
</div>

Nu moet je scrollen! De toelichting staat nu helemaal onderaan, onder de afbeelding van het rad. Deze moet dus omhoog, en dat kan door deze div een negatieve margin-top te geven: daarmee wordt de <div> omhoog getrokken; en tegelijkertijd niet zo breed maken om in de cirkel te passen:
Code: 
#toelichtingen div {
   width: 290px;
   margin: -570px auto 0 auto;
   }

Hm: daar hoort een achtergrond-kleur bij, om het leesbaar te maken; en meteen een randje om de toelichting:
Code: 
#toelichtingen div {
   width: 290px;
   margin: -570px auto 0 auto;
   border: 1px solid #A62225;
   background: #D1E5E7;
   }

Wat padding voor afstand tot de randen, een wat kleiner letterformaat, en de kop in het midden:
Code: 
#toelichtingen div {
   width: 290px;
   margin: -570px auto 0 auto;
   padding: 5px 10px;
   font-size: .9em;
   border: 1px solid #A62225;
   background: #D1E5E7;
   }
#toelichtingen h2 {
   margin: 2px 0;
   padding: 0;
   text-align: center;
   font-size: .9em;
   }

Dat begint er al een beetje op te lijken. Maar nu staat deze toelichting altijd aan, ook als er niet over schakel-1 gehoverd wordt. Dus we zetten 'm uit (en z'n toekomstige collega's ook) met een drastische maatregel:
Code: 
#toelichtingen div {
   ...
   display: none;
   }
Nu staat deze toelichting altijd uit. Om 'm bij een hover aan te krijgen, moet het javascript worden uitgebreid:
[JS]function hover(n){
obj = document.getElementById('rad-img');
obj.src = 'http://bliksekaters.nl/tests/images/outline-'+n+'.gif'; // de hover-afbeelding
toel = document.getElementById(n); // de juiste toelichting oppikken
toel.style.display = 'block'; // en zichtbaar maken
}[/JS]
En hij moet ook weer uit kunnen:
[JS]function hide(n){
obj = document.getElementById('rad-img');
obj.src = 'images/transparant.gif';
toel = document.getElementById(n);
toel.style.display = 'none';
}[/JS]

Wat er nu nog fout gaat, is dat geprobeerd wordt bij de tekst-hovers voor de monnik en voor alle outlines (waar geen toelichting bij hoort, want die staat al in de tekst) ... toch een toelichting te openen en te sluiten.
Daar moet dus een uitzondering voor gemaakt worden: alleen als het niet om de 'monnik' of de 'all' gaat, moet de toelichting aan en uit gezet worden.
Daarvoor is er in javascript de "if" functie, gecombineerd met "!=" (niet gelijk aan) en met "&&" (en als). Het wordt dan:
[JS]function hover(n){
obj = document.getElementById('rad-img');
obj.src = 'http://bliksekaters.nl/tests/images/outline-'+n+'.gif';
if (n != "monnik" && n != "all"){
toel = document.getElementById(n);
toel.style.display = 'block';
}
}
function hide(n){
obj = document.getElementById('rad-img');
obj.src = 'http://bliksekaters.nl/tests/images/transparant.gif';
if (n != "monnik" && n != "all"){
toel = document.getElementById(n);
toel.style.display = 'none';
}
}[/JS]

Dat was dus de toelichting bij schakel 1.
Nu kunnen ook alle andere schakel-toelichtingen aangemaakt worden, die gaan op dezelde manier.

=====
Even later: ;)
Het rad kan al aardig draaien.
Wordt vervolgd!
____________
PS: Het is nog steeds valid html en valid css; dat moet je continu in de gaten blijven houden!
 
Hoi Georges,
Heb je het voorafgaande een beetje kunnen volgen, of wacht je geduldig in stilte tot er weer iets komt? ;)

Fase 10: de overige toelichtingen
Op dezelfde manier als de toelichtingen bij de schakels kunnen nu de overige toelichtingen er in worden gezet: voor Yama zelf, de 6 werelden en de 3 secties in het midden.
De toelichtingen moeten op een wat andere plaats komen te staan als die van de schakels (die allemaal op hetzelfde punt staan), anders past de tekst er niet op, of gaat de toelichting ergens overheen waar dat niet moet. Alles weer geregeld met css:
Code: 
#yama { margin: -650px auto 0 auto !important; }
#wereld-1, #wereld-2, #wereld-6 { width: 550px !important; margin: -450px auto 0 auto !important; }
#wereld-3, #wereld-4, #wereld-5 { width: 710px !important; margin: -220px auto 0 -70px !important; }
#vergiften, #opgang, #neergang { margin: -340px auto 0 auto !important; }
Het !important is er voor bedoeld om eerder opgegeven css te overrulen.
Dit levert dan op:
Zo, we zijn er bijna!
In de volgende aflevering nog wat finishing touch, want je bent niet zomaar van me af. :)

Met vriendelijke groet,
CSShunter
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan