[xhtml+css]a:hover in andere div plaatsen

[Paultje3181]

Ik wil graag als ik op een link (clickable image) sta (hover), dat er in een div (heb ik een name meegegeven) ergens anders op de pagina de tekst wijzigt. Is dit mogelijk? En zo ja, hoe zou ik dit kunnen doen? Ik heb al gezocht op css target hover, maar daar krijg ik geen resultaten mee die doen wat ik wil. Er moet eigenlijk met de hover een nieuw html-stuk (plaatje + tekst) in een div geplaatst worden.

Ik heb alleen echt geen idee hoe ik dit aan zou kunnen pakken. Iemand die me hierbij zou kunnen helpen?

Schets:

<a>Plaatje</a> ----> <div class="box"></div>
Normaal = Algemene adresgegevens
Hover = Adresgegevens persoon op Plaatje
Klik = Website persoon op Plaatje

Hoop dat het een beetje duidelijk is.

[Verwijderd]

Gaat je niet lukken met alleen css, behalve als de div in de link staat maar dat lijkt me sterk.. wordt javascript-werk

[Bosmonster]

Het kan wel met CSS3, maar IE ondersteunt dat (nog steeds) niet.

Wordt javascript inderdaad dus.

[ Voor 21% gewijzigd door Bosmonster op 26-10-2009 14:48 ]

[Paultje3181]

Hmmm, dan wordt het nog een heel stuk lastiger. Ik kan nl. echt heel erg weinig met javascript. Enig idee op welke termen ik uberhaupt moet zoeken om dit voor elkaar te krijgen? Dan ga ik daar eens even in duiken
In http://www.frihost.com/forums/vt-47880.html doen ze het met een klik en javascript, maar ik moet dit dus op een hover doen... En kan ik dan verschillende hovers aangeven? Ik heb zeg maar 9 "buttons" die allemaal andere tekst opleveren.

[ Voor 35% gewijzigd door Paultje3181 op 26-10-2009 15:00 ]

[NMe]

Mouseover event, document object model (oftewel DOM) en/of innerhtml.

[ Voor 14% gewijzigd door NMe op 26-10-2009 14:55 ]

[dvdheiden]

Met jQuery moet dit niet zo moeilijk zijn, eventueel i.c.m. ajax om de html op te halen.

[iBasch]

JavaScript:

function setHTML (text)
{
    document.getElementById('box').innerHTML = text;
}

<a onmouseover="setHTML('Tekst');"> </a>

[ronn0]

Eventueel ook met jQuery:

JavaScript:

// Wachten tot de pagina klaar is met laden
$(document).ready(function() {
       
       // Wanneer er gelikt wordt op een link met de class 'boxchange' gaat de functie werken
       $('a.boxchange').hover(function(){ 

              // Vangt de titel van het betreffende element op
              var tekst = $(this).attr('title');
              
              // Leegt de #box om vervolgens de box te vullen met de title
              $('#box').empty().html(tekst); 
       }
});

HTML:

<a href="#" class="boxchange" title="Hier de tekst">Link</a>

Hopelijk heb je er iets aan, het is mogelijk dat er een fout in zit. ;-)

[ Voor 28% gewijzigd door ronn0 op 26-10-2009 15:39 ]

[NMe]

Lullig hoor, de topicstarter laat de goeie instelling zien door te vragen naar zoekwoorden in plaats van compleet uitgewerkte antwoorden, en dan krijgt hij toch dat laatste. Daar leert toch niemand iets van?

HackZois schreef op maandag 26 oktober 2009 @ 14:57:
Met jQuery moet dit niet zo moeilijk zijn, eventueel i.c.m. ajax om de html op te halen.

Ja, want JQuery en AJAX zijn hip! En compleet beyond the point hier...

[ronn0]

NMe schreef op maandag 26 oktober 2009 @ 15:25:
Lullig hoor, de topicstarter laat de goeie instelling zien door te vragen naar zoekwoorden in plaats van compleet uitgewerkte antwoorden, en dan krijgt hij toch dat laatste. Daar leert toch niemand iets van?

Deze oplossingen zijn ook nog niet compleet zoals je kunt zien, dus er blijft nog werk over? Alleen de insteek is gemaakt met een voorbeeld.

En commentlines toegevoegd

Ja, want JQuery en AJAX zijn hip! En compleet beyond the point hier...

Als de jQuery library toch al geladen is kun je daar best gebruik van maken, of als hij nog in het cache zit :-)

[Paultje3181]

Ik ga hier vanavond even goed voor zitten en kijken of ik snap wat er hier geprogrammeerd wordt... Dankjewel allemaal.

En ik vergeef jullie hoor voor het posten van (een groot deel van) de oplossing . Voor iemand zonder programmeerkennis is dat toch wel een goed beginpunt.

[ronn0]

Paultje3181 schreef op maandag 26 oktober 2009 @ 15:50:
Ik ga hier vanavond even goed voor zitten en kijken of ik snap wat er hier geprogrammeerd wordt... Dankjewel allemaal.

En ik vergeef jullie hoor voor het posten van (een groot deel van) de oplossing . Voor iemand zonder programmeerkennis is dat toch wel een goed beginpunt.

Mocht je ergens niet uitkomen om eruit te komen, wees vrij om een gil te geven.

Wellicht dat je hier nog wat dingen vindt voor de oplossing.

Succes in ieder geval.