Avatar billede djsteiner Nybegynder
07. juni 2010 - 14:31 Der er 6 kommentarer og
1 løsning

tooltip delay

Hej eksperter :)

Jeg står lige og kunne godt bruge noget hjælp til noget javascript

jeg har lavet et tooltip med ren CSS og XHTM men nu vil jeg gerne at når man føre musen hen over det emne man vil se så skal tooltipen blive sådan man selv kan lukke den igen .

håber dette giver mening.

jeg har lige sendt det kode jeg har lavet med:





<style type="text/css">
/* Easy CSS Tooltip - by Koller Juergen [www.kollermedia.at] */
* {font-family: Verdana, Geneva, sans-serif; font-size:11px;  }
.tooltip:hover {background:opacity:0.0; text-decoration:none;} /*BG color is a must for IE6*/
.tooltip b{display: none; padding:2px 3px; margin-left:100px; margin-top:-200px; width: 500px; height:auto;}
.tooltip:hover b{ font-family:Verdana, Geneva, sans-serif; font-size:12px;
font-weight:normal; line-height:16px; display:inline; position:absolute; border:1px solid #737573; background:#ffffff; color:#000;}
a{ width: 310px; height: 36px;  display:block; }

#kort{ position:absolute; width: 600px; height: 791px;  background-image: url(kort.png); background-repeat:no-repeat;  }

#box1{position:relative; width: 310px; height: 36px; margin-top:633px; margin-left:145px;  background-image:url(box1.png); background-repeat:no-repeat;  }
</style>
<body>


<div id="kort">

<div id="box1">
<a href="#"  class="tooltip" onmouseover="timedMsg">

   
<b>

<p style="font-weight:bold">Kom og være med til Street Håndbold - et nyt type spil  <br /> <br />


Sted: Brandehallerne    Dato:  2. september           Tid: 17:30-19:00 </p>



I Brande HK's ungdomsafdeling vil vi sammen med de unge U12-U14 drenge <br />
og pige spiller, arrangere Street Håndbold som er ny type spil, <br />
der skal genskabe håndboldspillets popularitet især blandt børn <br />
og unge i skolealderen. Street Håndbold er anderledes end alm. håndbold i den forstand, at der spilles til ét mål i hvert spil.<br />


</b>




</a>


</div>
</div>
Avatar billede djsteiner Nybegynder
07. juni 2010 - 14:33 #1
Jeg vil lige sige at jeg har forsøgt mig men kender ikke meget til Javascrip


<script type="text/javascript">

  function timedMsg()

  {

var timedMsg =  ({showDelay:200});

  }

  </script>
Avatar billede intenz Novice
07. juni 2010 - 15:20 #2
Sådan her?


<style type="text/css">
.tooltip {
    display: none;
    width: 500px;
    height:auto
    padding: 5px;
    border: 1px solid black;
    font-family: Verdana, Geneva, sans-serif;
    font-size:11px;
}
</style>

<script type="text/javascript">
function showTip(id) {
    var e = document.getElementById(id);
    if (e.style.display == '' || e.style.display == 'none') {
        e.style.display = 'block';
    }
}
function hideTip(id) {
    var e = document.getElementById(id);
    e.style.display = 'none';
}
</script>


<a href="#" onmouseover="showTip('tip1');">Vis tooltip</a>

<div class="tooltip" id="tip1">
    <a href="#" onclick="hideTip('tip1');">luk</a> <br />
   
    <p style="font-weight:bold">Kom og være med til Street Håndbold - et nyt type spil  <br /> <br />
    Sted: Brandehallerne    Dato:  2. september          Tid: 17:30-19:00 </p>
   
    I Brande HK's ungdomsafdeling vil vi sammen med de unge U12-U14 drenge <br />
    og pige spiller, arrangere Street Håndbold som er ny type spil, <br />
    der skal genskabe håndboldspillets popularitet især blandt børn <br />
    og unge i skolealderen. Street Håndbold er anderledes end alm. håndbold i den forstand, at der spilles til ét mål i hvert spil.<br />
    </b>
</div>


Læg mærke til at ID'et 'tip1' fra '<div class="tooltip" id="tip1">' går igen i hhv. vis og luk linket. Du skal så ændre disse ID'er hvis du skal bruge flere på samme side.
Avatar billede djsteiner Nybegynder
07. juni 2010 - 18:19 #3
Super godt arbejde det var lige det jeg var på udkig efter:)

er det endeligt svært at lære Javascript jeg har erfaring med ASP og lidt med PHP.
Avatar billede intenz Novice
07. juni 2010 - 19:58 #4
Javascript er ikke et svært sprog at komme igang med, men ligesom med alt andet tager det tid og vedholdenhed at mestre det.

Men du kan komme langt med simple ting i sproget. F.eks. den kode jeg skrev herover er 'bare' at skifte en CSS værdi på elementet, der får den til at blive vist/skjult.

Den hurtigste måde at lære det på, er at købe en god bog for begyndere, du kan tjekke på amazon (læs kommentarerne for at finde en til dit niveau)
http://www.amazon.co.uk/s/ref=nb_sb_noss?url=search-alias%3Daps&field-keywords=javascript

Jeg hørt denne skulle være god:
http://www.amazon.co.uk/JavaScript-Missing-Manual-book-should/dp/0596515898/ref=sr_1_2?ie=UTF8&s=books&qid=1275933267&sr=8-2#noop

Du kan også bruge gratis tutorials mv, men så går det lidt langsommere.
Avatar billede djsteiner Nybegynder
07. juni 2010 - 20:23 #5
Tak for svaret:)


Men vil du anbefale javascript i forhold til noget andet som ajax eller andre sporg som ville være godt at gå igang med her tænker jeg også på jobmarket jeg er nemlig uddannet som webintegrator men arbejder ikke som progrmmør, men bare med lidt design af hjemmesider hos en kommune. har også tænk på asp.net men det virker meget svært men kan jo ASP clasic og lidt PHP
Avatar billede intenz Novice
07. juni 2010 - 21:30 #6
.NET (ASP.NET) kan ikke sammenlignes med hverken ASP classic eller PHP, udover at det afvikles på serveren. Det kan flere ting, men er også betydeligt sværere at lære.
Når det er sagt er der også stor efterspørgel på gode .NET programmører, så der er mange jobs at hente, men det kræver også en stor indsats at blive god til det. Og jeg tror du får store problemer med at gå direkte fra lidt ASP classic eller PHP til .NET, hvis du ikke har modtaget en form for undervisning i sproget (eller lign. object-orienterede sprog). Det er anden måde at udvikle på.

Javascript er noget andet, det er et front-end sprog som giver brugeren mulighed for at interagere med hjemmesiden direkte (f.eks. som det tooltip du spurgte om). Ajax er en del af javascript og ikke et sprog i sig selv, men bruges til at kommunikere fra browser-vinduet til serveren bagved (hvor informationer kan opdateres automatisk, en formular kan sendes uden siden skal genindlæses, osv.).

Javascript er blevet enorm populært de seneste år, efter ajax kom frem. Og jeg tror kun dette til forsætte de kommende år.

Du skal overveje om du er mest interesseret i front-end (altså det brugeren ser i browseren) eller back-end (det som sker på serveren). Med front-end vil jeg uden tvivl anbefale javascript (måske delvist flash, men javascript er mere generelt brugbart). Til back-end (ved web-programmering) er det nok enten PHP eller .NET der efterspørges, primært .NET af større virksomheder.

Den sidste bog jeg linkede til forklarer brugen af jQuery (som er et 'framework' til javascript) der gør det nemt at lave komplicerede ting med relativt simple metoder. Det er rimelig let forståeligt og der er de fleste mere komplicerede ting allerede klaret for dig. Det er også efterhånden ved at være en standard indenfor javascript.
Avatar billede djsteiner Nybegynder
07. juni 2010 - 22:36 #7
ja jeg er nu nok mest til frontend kender godt  jQuery  det er mega fedt menvovervejer at gå igang med at kigge lidt på den bog du anbefalede.v takker :)
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