Hvordan få hover på bilde i en annen div?

[flodhest]

 

 

Her ønsker jeg at teksten i snakkeboblen forander seg, etterhvert som man beveger musa over knappene. Hver knapp skal altså ha en hover i snakkeboblen.

 

Hvordan skal jeg få til dette på enklest mulig måte? Har prøvd å få hele greien som en knapp, men da blir det bare flere snakkebobler etter hverandre horisontalt.

 

Går det å ha snakkeboblen i en egen div, slik at den byttes avhengig av hvilken knapp man har musen over?

 

eksempel på dette er:palmekraft.net

Endret 22. juli 2007 av flodhest

[Anders Moen]

JavaScript

<script type="text/javascript">
function writeText(txt)
{
document.getElementById("novn").innerHTML=txt
}
</script>

 

HTML

<a href="#" onmouseover="writeText('Tekst nummer 1 inn')" onmouseout="writeText('Tekst nummer 1 ut')">Link tekst</a> |
<a href="#" onmouseover="writeText('Tekst nummer 2 inn')" onmouseout="writeText('Tekst nummer 2 ut')">Link tekst</a>
<br />
<div id="novn">
Første tekst som vil byttes ut
</div>

 

Håper det funker

 

Edit:

Det var noe sånt du ville ha ikke sant?

Endret 22. juli 2007 av Anders-Moen

[flodhest]

Skal høre med han som programmerer siden, men vi kan være ett skritt nærmere nå. Det er litt viktig å få med at det er bildet som skal forandre seg her, ikke tekst. Går det med den koden der eller?

 

Edit: testet nå, fungerer ypperlig den koden der, men får vi det til med bilde?

Endret 22. juli 2007 av flodhest

[Steinmann]

Du setter position absolute på bildet. og posisjonerer det. Javascript bør være unødvendig her.

[flodhest]

Du har ikke noe mer konkret der?

 

Ser ikke helt hvordan jeg kan få bildene til å bytte.

[Ståle]

Bildet er statisk, og teksten inni endrer seg.

[flodhest]

Bildet kan ikke være statisk. Den pilen som går til snakkeboblen skal flytte seg. Eller, jeg har egentlig 5 bilder, men skal skape en illusjon om at pilen flytter seg, kun ved at bildet byttes.

[Wattengård]

*grave i hjernemassen*

Lengesiden jeg har tatt no JS nå, men dette skal vel ca. funke

 

Gi IMG taggen til bildet en unik ID. Foreksempel "snakkeboble".

 

Så:

function chgBoble(nummer) {
var boble = document.getelementbyid("snakkeboble");
var boblesrc = "boblebilde" + nummer + ".png";
boble.src = boblesrc;
}

 

Og vips så skal det funke... Tror jeg...

 

-C-

[Steinmann]

<ul>

<li><a href="#">Linktekst<span class="hovertext">Her kommer det som skal stå i boblen</span></a></li>

</ul>

 

Også setter du position absolute på .hovertext og plasserer den fint. og legger pilen ned som bakgrundsbilde på den.

 

Pice of cake.

[flodhest]

Takker for hjelpen, skal se hva det blir til.