Avatar billede Slettet bruger
21. september 2012 - 10:34 Der er 17 kommentarer og
1 løsning

Hover - Onmouseout?

Hej Alle Eksperter

Jeg har et landkort på min side, og de forskellige landsdele er samtidig link til ny side med informationer. Hvis musen ikke er ført over landkortet, kunne jeg tænke mig der skulle være - midt på kortet - en besked a al "Brug musen til at vælge landsdel", som går væk når bruger skal vælge landsdel.

Det er jo nok noget javascript, men det er ikke lykkedes mig at finde noget som virker perfekt.

Er der nogen som har et forslag til hvordan jeg løser dette.

mvh. rwj
Avatar billede gadensgaard Nybegynder
21. september 2012 - 10:46 #1
Med jQuery kan du lave events på både mouse enter og leave:
http://api.jquery.com/hover/
Avatar billede Slettet bruger
21. september 2012 - 12:38 #2
Tak for forslag, meget spændende side du linkede til, den skal i hvert fald nærlæses på et tidspunkt.
Ved en gennemgang af diverse funktioner (lidt hurtigt) fandt jeg ikke noget med OnMouseOver, men derimod scriptet herunder, som virker ok, dog er der lidt irriterende, at bruger først skal klikke på grafikken før det fades ud. Kan man ikke gøre det sådan, at når musen føres over, så fades grafikken automatisk ud?

<style>
p { margin:-300px 0 0 80px;  }
</style>
<p><img border="0" src="images/brug_musen.png" width="202" height="102"></p>

<script>
$("p").click(function () {
$("p").fadeOut("slow");
});
</script>
Avatar billede olebole Juniormester
21. september 2012 - 13:34 #3
<ole>

Når nu gadensgaard så fint linker til jQuery's .hover, mon så ikke du skulle prøve dén?  *o)

/mvh
</bole>
Avatar billede Slettet bruger
21. september 2012 - 13:39 #4
Jeg har prøvet forslagt, man kunne ikke rigtig få den til at virke efter flere forsøg, hvorfor jeg kiggede videre. Jeg vil dog gerne bruge den med hover, hvis den kan rettes lidt til, men jeg ved ikke hvordan, så gerne lidt yderligere hjælp:-)

mvh. rwj
Avatar billede softspot Forsker
21. september 2012 - 13:55 #5
<script>
$("p").hover(
  function () {
    $(this).fadeOut("slow");
  },
  function() {
    $(this).fadeIn("slow");
  }
);
</script>
Avatar billede Slettet bruger
21. september 2012 - 15:21 #6
Tak for forslag fra softspot, det er testet, men virker ikke helt ok. Føres mus over landkort, "blinker" grafikken med teksten, og når grafikken er helt væk, virker link til landsdele ikke.

Jeg har mit landkort i størrelse 380x450. Over det har jeg lagt transperant billede i samme størrelse, med den tekst som fortælle at brugere skal føre musen over, så det fra øjeblik musen føres over kortet, bør grafikken være væk hele tiden, men der sker altså ikke.

mvh. rwj
Avatar billede olebole Juniormester
21. september 2012 - 15:39 #7
Prøv at lægge et link til siden.
Avatar billede Slettet bruger
21. september 2012 - 16:25 #8
her er link til siden:

http://www.design-klip.dk/x.asp

mvh. rwj
Avatar billede olebole Juniormester
21. september 2012 - 18:13 #9
Din P-selector giver vist ikke så megen mening - eller også har jeg helt misforstået opgaven(?). Mon ikke event'en skal ligge på billedet - og vise/gemme P-elementet?
Avatar billede olebole Juniormester
21. september 2012 - 18:27 #10
PS: Prøv lige at give dit P-element en baggrundsfarve. Så vil du kunne se, at du nok bør lave en anden opbygning af din 'sticker'  *o)
Avatar billede Slettet bruger
21. september 2012 - 18:38 #11
Jeg tror ikke du har misforstået opgaven, men jeg forsøger at forklare igen. Jeg har landkortet, og blot for en ordens skyld - hvis besøgende til siden ikke ved, at de skal bruge musen til at finde landsdel - så lægger jeg en grafik/besked ovenpå landkortet. Grafikken/beskeden, skal så forsvinde når musen føres over landkortet, men linkene på landkortet skal naturligvis fortsat virke.

Som du kan se, så vises/forsvinder grafikken selvom jeg føres musen over landkortet, og det er ikke hensigten. Grafikken skal være væk hele tiden og først vises igen når musen er væk fra landkort området.

Jeg bruger denne css til at få grafikken til at ligge oven på landkortet:

p { margin:-450px 0 0 0px;}

og der er ingen problemer i den løsning jeg brugte med at klikke, og du kan se den version her:

http://www.design-klip.dk/xx.asp

mvh. rwj
Avatar billede Slettet bruger
21. september 2012 - 18:53 #12
vedr. baggrundsfarven, jeg har lagt noget rødt på, samt højde og bredde på <P>, igen virker den "gamle" måde, men desværre ikke den nye.
Avatar billede olebole Juniormester
21. september 2012 - 18:53 #13
Nej, men nu er det jo heller ikke med et klik, du skal udløse event'en. Din opbygning holder - som dit forsøg også tydeligt viser - ikke til det, du ønsker
Avatar billede Slettet bruger
21. september 2012 - 18:56 #14
ok, så langt så godt, hvad kan jeg så gøre?

mvh. rwj
Avatar billede olebole Juniormester
21. september 2012 - 18:59 #15
For det første bør du ikke lægge din sticker i et element - det er helt overflødigt. I stedet giver du det position:absolute og placerer det på det ønskede sted med left og top.

Dernæst bruger du mouseenter og -leave, som faktisk var det, gadensgaard foreslog i #1  *o)
Avatar billede olebole Juniormester
21. september 2012 - 19:00 #16
- og de to events lægger du på billedet af landkortet
Avatar billede Slettet bruger
21. september 2012 - 19:02 #17
ok, jeg prøver og vender retur, tak for hjælpen indtil videre.

mvh. rwj
Avatar billede Slettet bruger
22. september 2012 - 09:53 #18
Det lykkedes mig ikke selv at få fikset koden, men i min søgen efter yderligere information om hvordan mouseenter og  -leave skal indsættes, rendte jeg ind i noget tilsvarende kode, hvori disse funktioner jeg ønskede mig indgik, på denne side:

http://hunkcoder.wordpress.com/2012/01/06/grayscale-images-on-mouseover/

Det virker nu, og skal blot justeres lidt.

Tak til alle som har deltaget, og jeg syntes, at gadensgaard for at vise vej og olebole for den pædagogiske tålmodighed bør dele points.

Smid et svar olebole, så spørgsmålet kan lukkes.

God weekend til alle.

mvh. rwj
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



IT-JOB

PensionDanmark

ML Engineer

Metroselskabet og Hovedstadens Letbane

ESDH-administrator med udviklerkompetencer

Netcompany A/S

Network Engineer

Ward247 ApS

IT Operations Manager