Back to frontpage
Hét vraag- en antwoordplatform van Nederland

Hoe maak ik een variabel tekstblok in HTML, CSS of JavaScript?

Mijn dochter (woont in Frankrijk) verdient een zakcentje met het trimmen van honden.
Ze verkoopt sinds kort ook bijbehorende snuisterijen. Ik heb een website voor haar gemaakt, maar ik krijg één ding niet voor elkaar. Ik wil dat als de cursor op een bepaald voorwerp wordt gezet, er naast de foto een blok met tekst verschijnt. (Zie onderstaande foto)
Met usemap kan ik wel naar een andere pagina verwijzen, maar dat wil ik niet. Ik wil het bijbehorende tekstblok op dezelfde pagina houden en als je de cursor verplaatst moet de tekst veranderen.
Ik denk dat dat met bijvoorbeeld JavaScript vrij makkelijk moet kunnen, maar ik weet van JavaScript niets af.

Ik heb al gekeken op W3schools maar kom er niet uit.

Wie schrijft voor mij dat stukje code ? Bij voorbaat dank!!!

Verwijderde gebruiker
10 jaar geleden
2K

Heb je meer informatie nodig om de vraag te beantwoorden? Reageer dan hier.

Geef jouw antwoord

Het is niet mogelijk om je eigen vraag te beantwoorden Je mag slechts 1 keer antwoord geven op een vraag Je hebt vandaag al antwoorden gegeven. Morgen mag je opnieuw maximaal antwoorden geven.

/
Geef Antwoord
+
Selected image

Het beste antwoord

Als ik het goed begrijp wil je dat je als je met de muis boven een plaatje zit, dat er dan tekst in het grijze kader komt. Dit is inderdaad vrij gemakkelijk. Ik adviseer je jQuery hiervoor te gebruiken. Plaats de volgende regel tussen de
tags:


Stel dat het blok een ID attribute heeft die 'grijs' heet. Bijvoorbeeld

Stel dat het plaatje het ID attribute 'plaatje' heeft. Bijvoorbeeld "mouseover" : function() {
$("#grijs").html('Dit is de tekst die in het grijze kader komt");
}
});

Dit is heel basic en er kunnen heel veel variaties op gemaakt worden. Bijvoorbeeld omdat je bijvoorbeeld een andere tekst wil hebben bij een ander plaatje, of dat je ook wat wil doen als je met de muis weer ergens anders heen wil gaan.

Als je meer hier over wil weten, zou ik je aanraden om te zoeken op "jQuery events". DE uitvinding van de eeuw voor javascript schrijvers ;-)

Toegevoegd na 57 seconden:
Oeps.. .typefout:

De 'http:' vergeten :)
(Lees meer...)
Bronnen:
Verwijderde gebruiker
10 jaar geleden
Verwijderde gebruiker
10 jaar geleden
Dank voor je reactie! Ik kan helaas pas vanmiddag (vanavond?) kijken of het werkt zoals ik wil. Belangrijk is dat als ik de cursor op een andere plek in HETZELFDE plaatje zet, de tekst in het grijze blokje verandert. Daarom was ik bezig met usemap.
Ik begrijp uit je antwoord dat ook dát met jquery kan?
Verwijderde gebruiker
10 jaar geleden
Ik zou het plaatje dan opknippen in meerdere plaatjes. Dat is voor jezelf een stuk makkelijker. Als je in het plaatje zeg maar vier "gebieden" hebt, dan maak je #afbeelding1, #afbeelding2, etc en dan kun je per gebied het stukje jQuery gebruiken. Het kan ook anders, maar dat is weer een stukje moeilijker. Ik zou even 'simpel' beginnen.
Verwijderde gebruiker
10 jaar geleden
Met "usemap" kan je het plaatje in net zoveel gebiedjes opknippen als je wilt. Maar . . . usemap werkt alleen in combinatie met http="...".
Dat is dus altijd (voor zover ik weet) een verwijzing naar een andere pagina. Maar ik wil dat alleen de tekst in het grijze blokje verandert en verder niets.
Verwijderde gebruiker
10 jaar geleden
Het is allemaal nog niet naar m'n zin, maar ik ben dankzij jouw reactie mogelijk wél op weg.
De tijd is om, dus ik sluit de vraag.
Deel jouw antwoord

Het is niet mogelijk om je eigen vraag te beantwoorden Je mag slechts 1 keer antwoord geven op een vraag Je hebt vandaag al antwoorden gegeven. Morgen mag je opnieuw maximaal antwoorden geven.

/
Geef Antwoord
+
Selected image