Avatar billede kurdo Novice
13. oktober 2007 - 14:18 Der er 10 kommentarer og
1 løsning

mouseover text + baggrund?

hejza.. jeg sidder nu med et mouseover script, hvor jeg vil have jeg har et baggrund, + et tekst, og når man tager musen over, skifter den baggrund, men stadig den samme tekst.

det er simpelt:

<a href="#"><img src="1.png" srcover="2.png" border="0">

også mouseover scriptet ligger i en javascript fil..


hvor skal jeg skriver teksten så den kommer oven over billedet? når jeg skriver det, kommer det ved siden af.. og er der evt nogle simple mouseover scripts der kan det?
Avatar billede w13 Novice
13. oktober 2007 - 17:05 #1
Jeg forstår desværre overhovedet ikke, hvad du mener.

Mouseover er meget let, behøver ikke et eksternt script.

<img src="1.png" onmouseover="this.setAttribute('src','2.png')" onmouseout="this.setAttribute('src','1.png')" border="0">

I øvrigt er srcover ikke videre gyldigt..
Avatar billede w13 Novice
13. oktober 2007 - 17:06 #2
Ellers må du vise os det script, vi skal rette i.

Hvilken baggrund skal hvor? Hvilken tekst skal gøre hvad? Jeg er desværre lost her..
Avatar billede kurdo Novice
13. oktober 2007 - 18:44 #3
okay, det jeg vil have er:

et menu, hvor alle linksene har det samme baggrund, men teksten vil jeg skrive.. fx..

et helt alemenlig link, med fx teksten "forside" hvor den linker til forside med mouseover baggrund.. forstår du nu? :) hehe,.  og baggrunden skal være billeder self, som billede 1.png og når musen er over så 2.png
Avatar billede kurdo Novice
13. oktober 2007 - 18:48 #4
<a href="#"><img src="images/1.png" onmouseover="this.setAttribute('src','images/2.png')" onmouseout="this.setAttribute('src','images/1.png')" border="0">

præcis hvad jeg vil have, men der skal bare står "forside" på billedet" og jeg kan desværre ikke viser nogen demo'er, da filerne ligger på lan!
Avatar billede w13 Novice
13. oktober 2007 - 19:15 #5
Jamen så skal du vel bare skrive forside i billedfilen eller hvad? Alternativt kan du lave det med en rigtig baggrund (du bruger jo et reelt billede) således:
-----------------------------------------
<div>

<span style="background-image:url('/images/1.png');width:75px;text-align:center"><a href="#" onmouseover="this.parentNode.style.backgroundImage='url(/images/2.png)'" onmouseout="this.parentNode.style.backgroundImage='url(/images/1.png)'">Forside</a></span>

<span style="background-image:url('/images/1.png');width:75px;text-align:center"><a href="#" onmouseover="this.parentNode.style.backgroundImage='url(/images/2.png)'" onmouseout="this.parentNode.style.backgroundImage='url(/images/1.png)'">Kontakt</a></span>

<span style="background-image:url('/images/1.png');width:75px;text-align:center"><a href="#" onmouseover="this.parentNode.style.backgroundImage='url(/images/2.png)'" onmouseout="this.parentNode.style.backgroundImage='url(/images/1.png)'">Info</a></span>

</div>
----------------------------------------
Her i eksemplet er de forskellige span's width sat til 75px, det kan du så rette, så det passer bedre til din menu.
Avatar billede kurdo Novice
14. oktober 2007 - 09:46 #6
mange tak, præcis som jeg ville have det, men width og height virker ikke?

har også sat en ; efter text-align: center; men det virker stadig ikke? den er så stor som teksten fylder.
Avatar billede w13 Novice
14. oktober 2007 - 14:06 #7
Man behøver ikke have en ; efter det sidste element. Derfor udelod jeg den. Height skulle da meget gerne virke. Du kan også prøve med padding-left:20px;padding-right:20px;padding-top:5px;padding-bottom:5px;
Avatar billede roenving Novice
15. oktober 2007 - 01:54 #8
En span er et inline element, og skal derfor kun fylde det, som elementet indeholder, skal der sætte specifik størrelse på, skal man bruge block-level elementer, som f.eks. div- eller p-tags ...
Avatar billede kurdo Novice
16. oktober 2007 - 12:39 #9
roenving en god ting at vide, men jeg brugte w13's svar, mange tak, w13 smid et svar.
Avatar billede w13 Novice
16. oktober 2007 - 13:28 #10
Svar =)
Avatar billede w13 Novice
17. oktober 2007 - 16:29 #11
Takker 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