Hoi axisrules,
Ik ga de homepage in Joomla maken; is er een component waardoor mijn probleem versimpeld kan worden?
Het probleem is simpel genoeg.
- Maar geen flauw idee (als niet Joomla'er) of er via een Joomla module een makkelijke oplossing is.
Als je in Joomla in code-weergave van de betreffende pagina kan komen, zou het genoeg moeten zijn. Want ziehier:
Het image-map principe:
Code:
<div id="diagonalo">
<map name="img-map">
<area href="links.htm" title="links" alt="" shape="poly"
coords="0, 0, 600, 0, 0, 300">
<area href="rechts.htm" title="rechts" alt="" shape="poly"
coords="600, 300, 600, 0, 0, 300">
</map>
<img src="images/diagonaal.png" width="600" height="300" alt=""
usemap="#img-map">
</div>
Het plaatje staat in z'n geheel op de voorgrond, met image-mapping kan je gedeeltes gebruiken voor een link. Aan deze links kan je "tooltips" hangen via de title="..." eigenschap van de <area>'s. Die zie je dan bij een hover.
Maar veranderen van kleur doen de driehoeken op deze manier niet:
Daarvoor kan een verschuivende achtergrond-afbeelding gebruikt worden. Maar die kan niet rechtstreeks aan een <area> verbonden worden. daarvoor is, zoals gezegd, wat javascript nodig.
Als voorbereiding maken we een afbeelding met de 3 toestanden naast elkaar:
De truc is, om de afbeelding in de html te vervangen door een transparante afbeelding. Anders is er namelijk niets om de image-map aan vast te maken. Vervolgens gebruiken we onze driehoeken als achtergrond onder dat transparantje.
css:
Code:
#diagonalo img {
border: 0;
background: url(images/diagonaal-hover.png);
}
html:
Code:
<div id="diagonalo">
<map name="img-map">
<area href="links.htm" title="links" alt="" shape="poly"
coords="0, 0, 600, 0, 0, 300">
<area href="rechts.htm" title="rechts" alt="" shape="poly"
coords="600, 300, 600, 0, 0, 300">
</map>
<img src="images/transparant.gif" width="600" height="300" alt=""
usemap="#img-map">
</div>
Dat geeft deze:
Op het oog exact hetzelfde als het eerste voorbeeld. Maar ook geen kleurwissel bij een hover te zien. Daar gaan we nu verandering in brengen.
- Javascript-principe: "als een hover over de linker area, dan achtergrond van het transparante img één breedte naar links schuiven". En weer terug, als er geen hover is. Voor het rechter gebied hetzelfde.
Javascript-uitvoering:
[JS]var hoverBg = document.getElementById('diagonalo').getElementsByTagName('img')[0];
function mapHover(obj){
if (obj == 'links'){
hoverBg.style.backgroundPosition = '-600px 0';
}
if (obj == 'rechts'){
hoverBg.style.backgroundPosition = '-1200px 0';
}
}
function mapOut(){
hoverBg.style.backgroundPosition = '0 0';
}[/JS]
Deze functies opknopen in de html...:
Code:
<div id="diagonalo">
<map name="img-map">
<area href="links.htm" title="links" alt="" shape="poly"
coords="0, 0, 600, 0, 0, 300"
onmouseover="mapHover('links')" onmouseout="mapOut()"
onfocus="mapHover('links')" onblur="mapOut()">
<area href="rechts.htm" title="rechts" alt="" shape="poly"
coords="600, 300, 600, 0, 0, 300"
onmouseover="mapHover('rechts')" onmouseout="mapOut()"
onfocus="mapHover('rechts')" onblur="mapOut()">
</map>
<img src="images/transparant.gif" width="600" height="300" alt=""
usemap="#img-map">
</div>
... en nu stuiteren de gekleurde driehoeken voor je ogen:
Mocht iemand javascript uit hebben staan, dan is er geen man of vrouw overboord: de driehoeken hebben nog steeds hun link en hun tooltip, alleen de kleurwissel is er niet.
==================
Reden waarom ik de hoofdpagina in Joomla ga maken is omdat de statische website niet kan worden gevonden in Google. Ik heb gehoord dat Joomla erg gemakkelijk was met SEO. Toch vraag ik me af waarom mijn site niet word gevonden?
Dat is een heel andere vraag, en ik weet niet of Joomla daar een antwoord op is.
Maar heb je een link naar de huidige niet-door-Google-te-vinden pagina?
En: op welke trefwoorden kan Google 'm niet vinden?
Met vriendelijke groet,
CSShunter
[edit]Daar verschijnt je <edit>!
Ik ben bang dat Flash de site eerder ontoegankelijker dan beter maakt voor mensen en Google. Maar met goede aanvullende alternatieven zou het wel moeten kunnen, geloof ik. Zelf doe ik het nooit met Flash.[/edit]
