Tekst ved on mouse over

mener du <img alt="Tekst her" src="...?

Øh sorry men jeg ved ikke, om det er det jeg mener :-) Jeg har et billede, som fungerer som link. Jeg vil så gerne have, at der oven i billedet vises en tekst, når musen kommer over billedet/linket.

Så skal du bruge title for at undgå at være afhængig af en browsers fejlagtige måde at behandle en alternativ tekst på (efter w3cs rekommendationer, er alt den tekst, der skal skrives, hvis billedet ikke når frem, mens title er det, der skal vises som tooltip eller læses op af en browser, der gør den slags !-)

<img src="ditLinkBillede.jpg" onclick="http://ditLink.dk" title="Gå til ditLink.dk">

Eller vil du have en mere fancy tekst skrevet på billedet i stedet for et tooltip?

Her er et link, hvor det kan ses som jeg helt præcis vil have det: www.enw.dk. Det ser da godt ud ikk? :-)

Ja, her er det så 2 billeder, den skifter imellem. Et uden tekst og et med. Men prøver lige at løse det for dig. =)

Nåe ja det er jo smart - det havde jeg ikke tænkt på :-)

Jeg er desværre nødt til at gå i seng nu, men jeg vender tilbage i morgen. Godnat

Så! Indsæt følgende JavaScript-kode på din side:
------------------------------------------------
<script language="JavaScript" type="text/JavaScript">
function ImgTextInsert(img,text) {
    var newDiv = document.createElement('<div>');
    newDiv.id = 'newDiv';
    newDiv.innerHTML = text;
    document.body.appendChild(newDiv);
    newDiv = document.getElementById('newDiv');
    newDiv.style.position = 'absolute';
    newDiv.style.top = img.offsetTop+(img.height/2)-newDiv.offsetHeight/2;
    newDiv.style.left = img.offsetLeft+(img.width/2)-newDiv.offsetWidth/2;
}
function ImgTextDelete() {
    document.body.removeChild(document.body.lastChild);
}
</script>
---------------------------------------
Og på dit billed tilføjer du:
onmouseover="ImgTextInsert(this,'Fedt billed');" onmouseout="ImgTextDelete();"
F.eks.:
<img src="http://www.google.com/intl/da_ALL/images/logo.gif" width="340" height="200" onmouseover="ImgTextInsert(this,'Fedt billed! :D');" onmouseout="ImgTextDelete();">

Hrm, du skal vist lige kigge lidt mere i lærebøgerne, w13 ...

Her er der en lektion mere, prøv f.eks.

<script type="text/javascript">
var newDiv = null;
function ImgTextInsert(img,text) {
    newDiv = document.createElement('<div>');
    newDiv.appendChild(document.createTextNode(text));
    img.parentNode.appendChild(newDiv);
    newDiv.style.position = 'absolute';
    newDiv.style.top = img.offsetTop+(img.height-newDiv.offsetHeight)/2;
    newDiv.style.left = img.offsetLeft+(img.width-newDiv.offsetWidth)/2;
}
function ImgTextDelete(img) {
    img.parentNode.removeChild(newDiv);
}
</script>

-- og så skal referencen med igen ved mouseout:

onmouseover="ImgTextInsert(this,'Fedt billed');" onmouseout="ImgTextDelete(this);"

-- jeg har ikke forholdt mig til alt, dog var jeg nødt til at reagere kraftigt, når du benytter dig af ikke-eksisterende properties, f.eks. innerHTML, samt at du laver unødige kald til elementer, du allerede har fat i ...

-- en krølle er, at denne udgave kræver, at det element, der omkranser billedet, er positioneret (relativt eller absolut, det er ligemeget !-)

Ups ...

    newDiv.style.top = img.offsetTop+(img.height-newDiv.offsetHeight)/2 + "px";
    newDiv.style.left = img.offsetLeft+(img.width-newDiv.offsetWidth)/2 + "px";

-- det skulle jo helst virke, selvom man var så kættersk at bruge en browser, der ikke er autoriseret af Big Bill ...

<ole>

- og så tror jeg nu nok, jeg ville bruge img.offsetHeight/-Width  =)

Image-elementet - og dermed også Image-objektet - er på vej ud (forsvinder helt i XHTML2.0). Derfor er det nok en meget god idé at vænne sig til at hente billeders dimensioner på samme måde, som det gøres på alle andre elementer. Snart(?) kan et billede være næsten et hvilket somhelst element ... <p>, <span>, <div> - or whatever.

Måske en akademisk detalje, men alligevel  =)

/mvh
</bole>

Jaeh, men det var da tæt på, Roenving :P

roenving
Nu har jeg indsat scriptet i min kode, og tilføjet onmouseover og onmouseout til mit <img> tag. Er det ikke korrekt? Det virker i hvert fald fint bortset fra en enkelt ting. Teksten står ikke i billedet, men et pænt stykke over billedet. Jeg har forsøgt at justere (på må og få, da jeg rigtig ved, hvad det script laver) på

newDiv.style.top = img.offsetTop+(img.height-newDiv.offsetHeight)/2 + "px";
newDiv.style.left = img.offsetLeft+(img.width-newDiv.offsetWidth)/2 + "px";

men det bliver det kun værre af :-(
Hvordan får jeg placeret teksten i billedet?

Ups...

Da jeg IKKE rigtig ved, hvad det script laver...

Prøv at linke til det.

roenving og w13: Undskyld at der er gået så lang tid :-( Jeg er nu ved at rydde op herinde og få uddelt de point, jeg skylder, så... Kan I ikke begge lægge et svar, så deler jeg point imellem jer?

Svar er her!

Oki '-)

-- øg tak for point ;~}