Dubbele hover.

[Verwijderd]

De titel verraad het al een tikje .

Ik zou een dubbele hover willen maken.
Je ziet rechts dat logo als je hier heen gaat .
Het is de bedoeling dat als je over zo'n vakje gaat, dat er een plaatje onder komt. Dat gebeurd ook, maar het is ook nog eens de bedoeling dat er een woord komt te staan in het oranje vak.
Ik heb gezocht op 'double hover'. 'double hover javascript' en dat soort combinaties op Google en GoT zelf, maar echt veel wijzer werd ik niet.

De enige oplossing die ik kan bedenken is door een enorm plaatje te maken met grote hovers dat als ik over een vakje ga er een plaatje wordt gelegd overzowel het oranje vak t/m het hover vakje. (Als je me begrijpt). Maar dan krijg je enorme hovers en dan worden de laadtijden weer een stuk langer.

Mocht het niet helemaal duidelijk zijn dan maak ik er nog wel een mooi voorbeeldje van

[BasieP]

euhm dit kan toch gewoon met JS?


function dostuff() {
verander-plaatje();
voeg-tekstje-toe();
}

edit:
ik zie dat je nu overal een anchor op zet (terwijl het geen linkjes zijn) en dan de :hover gebruikt. Dit is misschien 'makkelijk' voor simpele dingen, maar de functionalteit (plaatjes veranderen) is nou niet echt iets waarbij je aan een anchor element moet denken.

[ Voor 58% gewijzigd door BasieP op 25-02-2007 21:11 ]

[Verwijderd]

ja dat kan maar ik niet.
Ik ben nog niet, of eigenlijk helemaal niet zo'n held met Javascript.
Dus vroeg ik me of er een mogelijkheid is het met CSS te doen.
En anders of iemand een voorbeeldje had hoe het met JS kan, ik ben het wel een beetje aan het leren maar veel verder dan dingen optellen kom ik nog niet

[BasieP]

Verwijderd schreef op zondag 25 februari 2007 @ 21:10:
ja dat kan maar ik niet.
Ik ben nog niet, of eigenlijk helemaal niet zo'n held met Javascript.
Dus vroeg ik me of er een mogelijkheid is het met CSS te doen.
En anders of iemand een voorbeeldje had hoe het met JS kan, ik ben het wel een beetje aan het leren maar veel verder dan dingen optellen kom ik nog niet

sowieso kan het niet met CSS.

met JS zou het zoiets worden (uit me hoofd)

HTML:

<li id="oranjeblokje"></li>
<li onmousemove="aan(this);" onmouseout="uit(this);"></li>

Cascading Stylesheet:

li {
 background-image: url(je-gewone-groen-blokje.jpg);
}

JavaScript:

function aan(node) {
  node.style.backgroundImage = 'url(je-mooie-plaatje.jpg);';
  var oranjeblokje = document.getElementById('oranjeblokje');
  oranjeblokje.innerHTML = "hier uw tekst";
}

function uit(node) {
  node.style.backgroundImage = 'url(je-gewone-groen-blokje.jpg);';
  var oranjeblokje = document.getElementById('oranjeblokje');
  oranjeblokje.innerHTML = "";
}

[ Voor 9% gewijzigd door BasieP op 25-02-2007 21:15 ]

[CH4OS]

Hier heb je geen JS voor nodig hoor, kan ook met CSS
Zoek maar eens op het :hover gebeuren icm CSS.
Jammere is wel, dat dat alleen op de A tag werkt binnen IE...

BasieP schreef op zondag 25 februari 2007 @ 21:14:
sowieso kan het niet met CSS.

met JS zou het zoiets worden (uit me hoofd)

Kan gewoon met CSS al verwijs je dan naar een anchor, op dat plaatje, maakt niet zoveel uit een functie heeft het verder toch niet en anders kan je er nog wél een link achter plakken, bijvoorbeeld naar een producten page of zo...
Wat je nodig hebt is :hover en display: visible;

Standaard zet je namelijk die content op hidden (display: hidden;) en als je dan met je muis erover heen gaat, dan zet je de display op visible (display: visible;)...
Kan je eventueel ook nog met :active, :visited en nog eentje (weet die even niet meer) doen...
De hoogte en breedte bepaal je dan via width en height... En voor plaatje gebruik je dan toch twee verschillende achtergrond plaatjes? Dan ben je d'r ook

Punt is alleen, de :hover werkt (in IE) enkel op de a-tag...

simpel voorbeeldje:

Cascading Stylesheet:

a#products
{
    background-image: url(pad-naar-je-plaatje.ext);
    display: hidden;
    width: widthpx;
    height: heightpx;
}

a#products :hover
{
    background-image: url(pad-naar-ander-plaatje.ext);
    display: visible;
    width: widthpx;
    height: heightpx;
}

In de HTML is het dan ongeveer zo:

HTML:

<a href="#" id="products" title="Een titel hier" />

[ Voor 105% gewijzigd door CH4OS op 25-02-2007 22:01 ]

[Verwijderd]

hee, daar zit wat in :)!
Even testen. (brb)

[Leftblank]

Een andere, misschien niet helemaal nette, oplossing kan ook zijn 't veranderen van de background van bijv, 'n div die je misbruikt om je plaatje vast te houden; a div { standaard } a:hover div { hoverplaatje }. Minder netjes misschien, maar werkt wel.

Nadeel is dan wel dat alle plaatjes sowieso geladen worden ipv alleen als 't nodig is, wat niet erg prettig is als je 't voor grote dingen als foto's wil gebruiken, maar dat geldt ook voor 't idee van display:hidden helaas.

edit:
Bah, GJ-tje was me voor met z'n edit

[ Voor 5% gewijzigd door Leftblank op 25-02-2007 21:36 ]

[Verwijderd]

uhm, ik probeer het te volgen. Dus gewoon het oranje plaatje vervangen?
Maar het moet 6 keer veranderd kunnen worden heh, 6 plaatjes, 6 woorden.
Ik moet het nog eventjes goed na lezen, maar ik heb het idee dat je het zo enkel met 1 woord kan doen.

[CH4OS]

Verwijderd schreef op zondag 25 februari 2007 @ 21:49:
uhm, ik probeer het te volgen. Dus gewoon het oranje plaatje vervangen?
Maar het moet 6 keer veranderd kunnen worden heh, 6 plaatjes, 6 woorden.
Ik moet het nog eventjes goed na lezen, maar ik heb het idee dat je het zo enkel met 1 woord kan doen.

Als je mijn code hergebruikt...
En dan 6x zo'n code maakt, maar dan met andere ID's (achter de #), dan is er toch geen probleem?

[ Voor 18% gewijzigd door CH4OS op 25-02-2007 22:01 ]

[BasieP]

um misschien snap ik je verhaal een beetje verkeerd hoor GJ-tje, maar ik zie nergens waar jij TEKST zet in een element wat niet een plaatje is.

dwz, ik zie je plaatje veranderen on hover.. (dat had de TS al) maar verder niks..
waar wordt in jouw verhaal het oranje vakje gevult met een tekstje?

[Verwijderd]

ik geloof dat ik em snap . Ik snap wat je bedoeld, je kan het 6x kopieren maar dan staat het ook in 6 andere vakjes. Al de 6 woorden moeten in 1 vak komen.

precies.. zo komt er wel tekst tevoorschijn, dat wel maar niet op 6 keer dezelfde plek .

[CH4OS]

BasieP schreef op zondag 25 februari 2007 @ 22:16:
um misschien snap ik je verhaal een beetje verkeerd hoor GJ-tje, maar ik zie nergens waar jij TEKST zet in een element wat niet een plaatje is.

dwz, ik zie je plaatje veranderen on hover.. (dat had de TS al) maar verder niks..
waar wordt in jouw verhaal het oranje vakje gevult met een tekstje?

Dat zet je dan toch in je HTML?

HTML:

<a href="#" id="products">Je product hier</a>

En als je geen onderstreping wilt (lijkt me wel het mooiste) dan voeg je in de bovenstaande CSS het volgende toe, bij allebei:
text-decoration: none;
en klaar ben je

De display-eigenschap in de CSS regelt dan de rest...

[ Voor 4% gewijzigd door CH4OS op 25-02-2007 22:50 ]

[Verwijderd]

ah oke, nu snap ik wat je bedoeld..
maar hoe mijn logo is opgebouwd is heel anders dan jij bedoelt.
Het logo bestaat namelijk uit 1 plaatje (inclusief hovers) zie hier .
ik kan dus niet elk plaatje afzonderlijk met #producten #snoeien en dat soort dingen doen.
Bovendien lukt het me ook niet met jouw code om 6 teksten in het oranje vakje te krijgen. dat is gewoon niet mogelijk met die code, naar mijn inziens.

Ik snap niet waarom je zegt

GJ-tje schreef op zondag 25 februari 2007 @ 22:27:
[...]
En als je geen onderstreping wilt (lijkt me wel het mooiste) dan voeg je in de bovenstaande CSS het volgende toe, bij allebei:
text-decoration: none;

Ik weet heus wel wat text-decoration inhoudt hoor , anders had ik deze site ook niet in elkaar kunnen zetten.

[ Voor 9% gewijzigd door Verwijderd op 25-02-2007 22:40 ]

[CH4OS]

Verwijderd schreef op zondag 25 februari 2007 @ 22:38:
ah oke, nu snap ik wat je bedoeld..
maar hoe mijn logo is opgebouwd is heel anders dan jij bedoelt.
Het logo bestaat namelijk uit 1 plaatje (inclusief hovers) zie hier .
ik kan dus niet elk plaatje afzonderlijk met #producten #snoeien en dat soort dingen doen.
Bovendien lukt het me ook niet met jouw code om 6 teksten in het oranje vakje te krijgen. dat is gewoon niet mogelijk met die code, naar mijn inziens.

Ik snap niet waarom je zegt

[...]


Ik weet heus wel wat text-decoration inhoudt hoor , anders had ik deze site ook niet in elkaar kunnen zetten.

Je moet gewoon 6 verschillende ID's aanmaken...
En elke link geef je dan dus zijn eigen ID mee, als je dan met de muis er over heen gaat, dan komt de tekst tevoorschijn (display krijgt de waarde visible) en die heeft een ander achtergrondplaatje...

[Verwijderd]

ja ik snap je volledig hoor ..
maar ik denk dat het tijd is om er wat code bij te halen, want we praten een beetje langs me kaar heen heb ik het idee.

het logo is opgebouwd uit een simpele lijst:

HTML:

            <ul>
                <li id='logo1'> <a href=''> 1 </a> </li>
                <li id='logo2'> <a href=''> 2 </a> </li>
                <li id='logo3'> <a href=''> 3 </a> </li>
                <li id='logo4'> <a href=''> 4 </a> </li>
                <li id='logo5'> <a href=''> 5 </a> </li>
                <li id='logo6'> <a href=''> 6 </a> </li>
                <li id='logo7'> <a href=''> 7 </a> </li>
                <li id='logo8'> <a href=''> 8 </a> </li>  
            </ul>

d.m.v. background-position, width en height is het achtergrondplaatje (met hovers) op de juiste plek gezet.

Waar de 2 staat daar behoort dus de tekst te komen.
Dus stel ik hover op nr 3. hoe zou ik dan op nr 2. de tekst moeten krijgen?
Ik snap niet hoe ik dat met die code van jou voor elkaar zou moeten krijgen.

Op de website zelf staan deze cijfers er ook, alleen die zijn weggehaald d.m.v. text-indent: -999px; .

Ik hoop dat we elkaar nu wel een beetje begrijpen ?

[CH4OS]

Oh zo... Ja ik dacht dat je tekst wilde op hetzelfde vakje...
Dus dan zou mijn code wel kloppen idd, nu moet je andere hebben...

[Verwijderd]

sorry, dan had ik het vast niet duidelijk genoeg uitgelegd ..