Hover IMG of A = display (vast staande) text in DIV

[gast0445]

Hey

Ik ben momenteel bezig met de basic's van m'n nieuwe website en ik loop ergens tegen aan... Jah, ik heb zelf gezocht alleen ik krijg alleen maar tooltip die meebewegen met je muis, en dat zoek ik juist niet!

<A HREF="?page=blog" onMouseover="showtext('Voorbeeld tekstje')"><IMG SRC="networks/blogger_32.png"></A>

Daar gaat het om, het is mijn bedoeling dat als je over de <A> gaat (over de <IMG> is evt. ook mogelijk) er op een vast aangegeven plaats op de site de "onMouseover" text word weergegeven, in een daar voor al gemaakt <DIV>je...

Het liefts wil ik er alleen CSS en HTML voor gebruiken en geen JavaScript als het mogenlijk is... Ik dank jullie alvast vriendelijk!

Groeten

 

[jeroendk]

volgens mij is dat zo niet mogelijk zonder javascript ?

met javascript kan je in de functie showtext() de css wijzigen van de div die je wilt zien in display:block, of als die al zichtbaar is de innerHTML veranderen in de tekst die je wilt hebben.

mvg,

 

[That Guy]

volgens mij is dat zo niet mogelijk zonder javascript ?

Het kan best zonder Javascript:

<div class='tooltipz0r'>
   <img src='...' />
   <span>dit is beschrijving</span>
</div>

.tooltipz0r span
{
   display: none;
}

.tooltipz0r:hover span
{
   display: block;
   position: absolute;   /* dit is de magie */
   top: 300px;
   left: 125px;
}

probleem is dat je nu met position: absolute werkt wat over het algemeen niet zo netjes is.

in een daar voor al gemaakt <DIV>je...

dat gaat dus niet.

 

[gast0445]

Tot zo ver werkt de code van That Guy, alleen het probleem is dat ik meerdere linkt/images heb die alleen iets anders moeten laten zien als je er over heen gaat in dat divje...

Any thoughts?

 

[That Guy]

Eh, wat bedoel je? Je kan gewoon meedere divs hebben met de goede class:

<div class='tooltipz0r'>
   <img src='plaatje1.jpg' />
   <span>dit is beschrijving van PLAATJE 1</span>
</div>


<div class='tooltipz0r'>
   <img src='plaatje2.jpg' />
   <span>dit is beschrijving van PLAATJE 2</span>
</div>


<div class='tooltipz0r'>
   <img src='plaatje3.jpg' />
   <span>dit is beschrijving van PLAATJE 3</span>
</div>

 

[grumbkow]

Dan zou je elke tooltip een eigen class moeten geven.
Anders kan je ze niet makkelijk afzonderlijk tevoorschijn halen.

Ik raadt je dan toch aan JQuery te gebruiken.
Heb even snel een voorbeeldje geschreven hoe dit zou werken.

Onderstaande voorbeeld heeft me 5 minuten gekost.

Voorbeeldje/