Avatar billede aske2 Nybegynder
21. maj 2007 - 18:48 Der er 18 kommentarer og
2 løsninger

Tekst ved on mouse over

Hej

Jeg har billede som link. Jeg vil gerne have, at en tekst vises henover billedet ved mouse over, men hvordan gør jeg lige det?
Avatar billede w13 Novice
21. maj 2007 - 21:48 #1
mener du <img alt="Tekst her" src="...?
Avatar billede aske2 Nybegynder
21. maj 2007 - 22:05 #2
Ø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.
Avatar billede roenving Novice
21. maj 2007 - 22:11 #3
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">
Avatar billede w13 Novice
21. maj 2007 - 22:20 #4
Eller vil du have en mere fancy tekst skrevet på billedet i stedet for et tooltip?
Avatar billede aske2 Nybegynder
21. maj 2007 - 22:22 #5
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? :-)
Avatar billede w13 Novice
21. maj 2007 - 22:24 #6
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. =)
Avatar billede aske2 Nybegynder
21. maj 2007 - 22:31 #7
Nåe ja det er jo smart - det havde jeg ikke tænkt på :-)
Avatar billede aske2 Nybegynder
21. maj 2007 - 22:36 #8
Jeg er desværre nødt til at gå i seng nu, men jeg vender tilbage i morgen. Godnat
Avatar billede w13 Novice
21. maj 2007 - 23:22 #9
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();">
Avatar billede roenving Novice
21. maj 2007 - 23:36 #10
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 !-)
Avatar billede roenving Novice
21. maj 2007 - 23:37 #11
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 ...
Avatar billede olebole Juniormester
22. maj 2007 - 15:44 #12
<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>
Avatar billede w13 Novice
22. maj 2007 - 15:52 #13
Jaeh, men det var da tæt på, Roenving :P
Avatar billede aske2 Nybegynder
22. maj 2007 - 18:42 #14
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?
Avatar billede aske2 Nybegynder
22. maj 2007 - 18:42 #15
Ups...

Da jeg IKKE rigtig ved, hvad det script laver...
Avatar billede w13 Novice
27. maj 2007 - 00:51 #16
Prøv at linke til det.
Avatar billede aske2 Nybegynder
07. november 2007 - 07:25 #17
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?
Avatar billede w13 Novice
07. november 2007 - 15:24 #18
Svar er her!
Avatar billede roenving Novice
09. november 2007 - 00:54 #19
Oki '-)
Avatar billede roenving Novice
09. november 2007 - 15:06 #20
-- øg tak for point ;~}
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester