Avatar billede showbakkwn Nybegynder
16. juni 2012 - 21:41 Der er 24 kommentarer

Ændring af hover til javascript hover

Hej jeg har lavet en side med en ren html/css hover funktion (som jo så ikke kan læses i IE) og vil gerne lave den om til JavaScript - jquery. Jeg har ledt en del på nettet og enten fatter jeg ikke det jeg finder eller også leder jeg ikke det rigtige sted. Someone who can help?

HTML/CSS KODEN:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>VEJLE SPILLERPROFILER</title>
  <!-- CSS -->
  <style type="text/css">

    <!-- MAIN DIV SOM HELE APP'EN LIGGER I -->
    #container {
    width: 810px;
    height:1345px;
    overflow: hidden;
    }

    #map {
    margin:0;
    padding:0;
    width:280px;
    height:525px;
    }
   
    #map li {
    margin:0;
    padding:0;
    list-style:none;
    }
   
    #map li a {
    position:absolute;
    display: inline;
    }
   
    #map li a span {
    display: none;
    }
   
    #map li a:hover span {
    position:relative;
    display: inline;
    width:280px;
    left:-55px;
    top:-200px;
    }
    <!-- SPILLERPROFILERNE -->
    #map a.laura_carstens {
    top:1050px;
    left:362px;
    width:106px;
    height:171px;
    }
     
#map a.louise_bendtsen {
    top:863px;
    left:55px;
    width:106px;
    height:144px;
    }
     
#map a.simone_bavnsgaard {
    top:868px;
    left:180px;
    width:105px;
    height:139px;
    }
     
#map a.kathrine_terp {
    top:863px;
    left:301px;
    width:97px;
    height:145px;
    }
     
#map a.kamilla_pedersen {
    top:862px;
    left:423px;
    width:103px;
    height:145px;
    }
   
#map a.camilla_jorgensen {
    top:858px;
    left:546px;
    width:89px;
    height:150px;
    }
   
#map a.simone_holm {
    top:872px;
    left:649px;
    width:95px;
    height:134px;
    }
   
#map a.julie_dahl {
    top:687px;
    left:361px;
    width:96px;
    height:140px;
    }
   
#map a.kristiane_christensen {
    top:527px;
    left:640px;
    width:100px;
    height:145px;
    }
   
#map a.christina_fensbak {
    top:531px;
    left:86px;
    width:104px;
    height:142px;
    }
   
#map a.rana_ziraki {
    top:536px;
    left:260px;
    width:96px;
    height:136px;
    }
   
#map a.cecilie_bekker {
    top:533px;
    left:462px;
    width:96px;
    height:139px;
    }
   
#map a.stine_aagaard {
    top:359px;
    left:361px;
    width:108px;
    height:157px;
    }
   
#map a.sanne_olsen {
    top:217px;
    left:135px;
    width:101px;
    height:134px;
    }
   
#map a.giti_nadim {
    top:221px;
    left:274px;
    width:107px;
    height:126px;
    }
   
#map a.linette_andreasen {
    top:216px;
    left:454px;
    width:101px;
    height:134px;
    }
   
#map a.sarah_dyrehauge {
    top:217px;
    left:590px;
    width:103px;
    height:131px;
    }
    </style>
   
<body>
    <!-- APPLIKATIONEN -->
    <div id="container">
    <!-- BAGGRUNDSBILLEDET -->
    <img src="http://www.stinebo.dk/eksamen/vejle/images/vejleapp.png" alt="" border="0" oncontextmenu="return false" >
   
      <!-- SPILLERPROFILERNE -->
   
    <ul id="map">
    <li><a class="laura_carstens" href="#"><span><img src="http://www.stinebo.dk/eksamen/vejle/images/laura_carstens.png" ></span></a></li>

    <li><a class="louise_bendtsen" href="#"><span><img src="http://www.stinebo.dk/eksamen/vejle/images/louise_bendtsen.png" ></span></a></li>
     
    <li><a class="simone_bavnsgaard" href="#"><span><img src="http://www.stinebo.dk/eksamen/vejle/images/simone_bavnsgaard.png" ></span></a></li>
     
    <li><a class="kathrine_terp" href="#"><span><img src="http://www.stinebo.dk/eksamen/vejle/images/kathrine_terp.png" ></span></a></li>
     
    <li><a class="kamilla_pedersen" href="#"><span><img src="http://www.stinebo.dk/eksamen/vejle/images/kamilla_pedersen.png" ></span></a></li>
       
    <li><a class="camilla_jorgensen" href="#"><span> <img src="http://www.stinebo.dk/eksamen/vejle/images/camilla_jorgensen.png" ></span></a></li>

    <li><a class="simone_holm" href="#"><span><img src="http://www.stinebo.dk/eksamen/vejle/images/simone_holm.png" ></span></a></li>
     
    <li><a class="julie_dahl" href="#"><span><img src="#" ></span></a></li>
     
    <li><a class="kristiane_christensen" href="#"><span><img src="http://www.stinebo.dk/eksamen/vejle/images/kristiane_christensen.png"></span></a></li>
     
    <li><a class="christina_fensbak" href="#"><span><img src="http://www.stinebo.dk/eksamen/vejle/images/christina_fensbak.png"></span></a></li>

    <li><a class="rana_ziraki" href="#"><span><img src="#"></span></a></li>

    <li><a class="cecilie_bekker" href="#"><span><img src="http://www.stinebo.dk/eksamen/vejle/images/cecilie_bekker.png"></span></a></li>
     
    <li><a class="stine_aagaard" href="#"><span><img src="http://www.stinebo.dk/eksamen/vejle/images/stine_aagaard.png"></span></a></li>
     
    <li><a class="sanne_olsen" href="#"><span><img src="http://www.stinebo.dk/eksamen/vejle/images/sanne_olsen.png"></span></a></li>
     
    <li><a class="giti_nadim" href="#"><span><img src="http://www.stinebo.dk/eksamen/vejle/images/giti_nadim.png"></span></a></li>

    <li><a class="linette_andreasen" href="#"><span><img src="http://www.stinebo.dk/eksamen/vejle/images/linette_andreasen.png"></span></a></li>

    <li><a class="sarah_dyrehauge" href="#"><span><img src="http://www.stinebo.dk/eksamen/vejle/images/sarah_dyrhauge.png"></span></a></li>
     
    </ul>
    </div>
</body>
Avatar billede olebole Juniormester
16. juni 2012 - 21:57 #1
<ole>

Du skal helt tilbage til version 6, før IE ikke forstår en hover. Til gengæld forstår hverken IE6, 7 eller 8 denne linje:

<meta charset="utf-8" />

Prøv at lægge et link til siden. Ekspertens URL-parser smadrer koden og gør den ubrugelig for os andre  =)

/mvh
</bole>
Avatar billede showbakkwn Nybegynder
16. juni 2012 - 22:02 #2
Avatar billede olebole Juniormester
16. juni 2012 - 22:35 #3
Du mangler at afslutte dine HEAD og HTML elementer. Derudover kan jeg ikke finde mening i din kode. Alle spillerne ligger i LI elementer inde i et UL element, der kun er 280px bredt og 525px højt. Hvad er begrundelsen for det?

Derudover giver det ikke mening at positionere A elementerne absolute. Det må være LI elementerne, der skal positioneres og placeres
Avatar billede showbakkwn Nybegynder
16. juni 2012 - 22:44 #4
"Du mangler at afslutte dine HEAD og HTML elementer. Derudover kan jeg ikke finde mening i din kode. Alle spillerne ligger i LI elementer inde i et UL element, der kun er 280px bredt og 525px højt. Hvad er begrundelsen for det?t"
Det er en fejl jeg har overset tak!! har rodet lidt for meget lidt for længe med det og flyttet rundt på ne masse i en masse forskellige sider så tror jeg har glemt at copy det med på et tidspunkt!

Prøver at rettet det til du har skrevet og ser hvad der sker :)
Avatar billede olebole Juniormester
16. juni 2012 - 23:19 #5
Prøv at se denne kode. Jeg har lavet den ret simpel, så den forhåbentligt er lidt lettere at overskue:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>VEJLE SPILLERPROFILER</title>
  <!-- CSS -->
<style type="text/css">
/* Husk, at sådan ser en kommentar ud i CSS-kode  ;o) */
ul#map {
    width: 810px;
    height: 1345px;
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    background: url(http://www.stinebo.dk/eksamen/vejle/images/vejleapp.png) no-repeat;
}
#map li {
    position: absolute;
    border: 1px solid red;
}
#map a {
    position: relative;
    width: 100px;
    height: 150px;
    display: block;
}
#map a img {
    position: absolute;
    top: 120px;
    left: -60px;
    display: none;
    border: 0;
}
#map a:hover img {
    display: inline;
}
#map li.laura_carstens {
    top: 200px;
    left: 123px;
    width: 100px;
    height: 150px;
}

#map li.louise_bendtsen {
    top: 200px;
    left: 265px;
    width: 100px;
    height: 150px;
}

#map li.simone_bavnsgaard {
    top: 200px;
    left: 438px;
    width: 100px;
    height: 150px;
}

</style>
</head>
<body>
    <ul id="map">
        <li class="laura_carstens"><a href="#"><img src="http://www.stinebo.dk/eksamen/vejle/images/laura_carstens.png" alt=""></a></li>
   
        <li class="louise_bendtsen"><a href="#"><img src="http://www.stinebo.dk/eksamen/vejle/images/louise_bendtsen.png" alt=""></a></li>
         
        <li class="simone_bavnsgaard"><a href="#"><img src="http://www.stinebo.dk/eksamen/vejle/images/simone_bavnsgaard.png" alt=""></a></li>
    </ul>
    </div>
</body>
</html>

Husk reglerne for absolut positionering:

1) Et element med position:absolute placerer sig  i forhold til det første, omkransende element - som er positioneret (ligegyldigt, om det er absolute, relative eller fixed).

2) Findes et sådan element ikke, placerer det sig i forhold til BODY elementet.

Giver man et element - f.eks. et SPAN - position:relative, og har et billede inden i med position:absolute;left:10px;top:20px, vil billedet placere sig 10px inde og 20px nede i SPAN'et. Det vil det ligegyldigt, hvor i dokumentet SPAN elementet bliver skubbet hen.

Var SPAN'et ikke positioneret, ville billedet have placeret sig 10px inde på siden og 20px nede.

Det skulle vist forklare positioneringerne i mit eksempel ovenfor  =)
Avatar billede olebole Juniormester
16. juni 2012 - 23:22 #6
Jeg prøver lige igen og håber på, at E's URL-parser ikke smadrer koden igen  :o|

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>VEJLE SPILLERPROFILER</title>
  <!-- CSS -->
<style type="text/css">
/* Husk, at sådan ser en kommentar ud i CSS-kode  ;o) */
ul#map {
    width: 810px;
    height: 1345px;
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
    background: url(http://www.stinebo.dk/eksamen/vejle/images/vejleapp.png) no-repeat;
}
#map li {
    position: absolute;
    border: 1px solid red;
}
#map a {
    position: relative;
    width: 100px;
    height: 150px;
    display: block;
}
#map a img {
    position: absolute;
    top: 120px;
    left: -60px;
    display: none;
    border: 0;
}
#map a:hover img {
    display: inline;
}
#map li.laura_carstens {
    top: 200px;
    left: 123px;
    width: 100px;
    height: 150px;
}

#map li.louise_bendtsen {
    top: 200px;
    left: 265px;
    width: 100px;
    height: 150px;
}

#map li.simone_bavnsgaard {
    top: 200px;
    left: 438px;
    width: 100px;
    height: 150px;
}

</style>
</head>
<body>
    <ul id="map">
        <li class="laura_carstens"><a href="#"><img src="http://www.stinebo.dk/eksamen/vejle/images/laura_carstens.png" alt=""></a></li>
   
        <li class="louise_bendtsen"><a href="#"><img src="http://www.stinebo.dk/eksamen/vejle/images/louise_bendtsen.png" alt=""></a></li>
         
        <li class="simone_bavnsgaard"><a href="#"><img src="http://www.stinebo.dk/eksamen/vejle/images/simone_bavnsgaard.png" alt=""></a></li>
    </ul>
    </div>
</body>
</html>
Avatar billede showbakkwn Nybegynder
16. juni 2012 - 23:24 #7
Gemmer dine huske regler omkring positionering i mine notater :) Så jeg altid kan finde dem når jeg bliver itvivl :) Tusind tak for hjælpen....
Avatar billede olebole Juniormester
16. juni 2012 - 23:24 #8
Du har, så vidt jeg kan se, ikke brug for SPAN elementerne. Dem har jeg slettet. Fra version 7 forstår IE faktisk også hover på andet end A elementer - men jeg har ladet dig beholde dem. Tænkte, at der måske skulle kunne linkes til andre sider  =)
Avatar billede showbakkwn Nybegynder
16. juni 2012 - 23:46 #9
Jeg skal endelig ikke bruge A elementet til noget udover hoveren :) Men tusind tusind tak for din hjælp so far (nu kan jeg så bare ikke lige indlæse mine billeder som ligger online!! men det må jeg så lige få kigget på)
Avatar billede olebole Juniormester
16. juni 2012 - 23:55 #10
"Gemmer dine huske regler omkring positionering i mine notater" >> Ja, de er nok ikke dumme at have til eksamen  *o)

Jeg er selv gammel underviser, eksaminator og censor og har lige et råd eller to: Lær de regler udenad i din egen formulering (så forstår du den også bedre). Vent ikke, til du bliver spurgt med at 'blære dig'. Når du har fortalt om dine designovervejelser (og det er jo det, uddannelsen går ud på), begynder du selv at fortælle om, hvordan du så har placeret de forskellige spillere:

"Jeg har valgt at udføre det som en liste - et UL element. Som baggrundsbillede har jeg lagt banen og spillerne ... og blablabla.

Som knapper har jeg brugt links i LI elementer, hvor LI elementerne er postioneret absolute og placeret i forhold til listen med left og top. Så er det nemlig ligemeget, om jeg senere skulle flytte på listen - f.eks. ved at centrere den. Knapperne følger med.

Det forholder sig nemlig sådan at ..."

- og her forklarer du så reglerne for, hvordan et absolut positioneret element opfører sig. Det er der næppe 2 ud af 10 elever på dit niveau, der kan gøre rede for - og de, der kan, skal have det hevet ud af sig.

Efter 12-skalaen kan positive ting ikke tælle op. Du går ind med et 12-tal, og hefra tæller dine fejl så ned. Derfor tæller dit lille stunt ikke op, men du vil imponere eksaminator og censor og stoppe de fem næste spørgsmål langt tilbage i halsen på dem!

I udgangspunktet gælder det om holde dem fra at få et ord indført, og kan du oven i købet lamme dem med en imponadeforklaring, har du flyttet startblokken langt ind på banen  =)

PS: Husk altid en pose vingummi, krisser el.lign. i lommen, så du ikke går sukkerkold fem minutter før du skal ind. Og husk at have en flaske vand med ind, så tungen ikke klistrer sig fast i ganen og ikke kan komme fri, første gang du siger "position". De fleste bliver tør i munden, når nervøsiteten melder sig  *D
Avatar billede olebole Juniormester
16. juni 2012 - 23:59 #11
PPS: - og sluk din f*king mobil, inden du går ind ...!!!  :D
Avatar billede showbakkwn Nybegynder
17. juni 2012 - 00:06 #12
hahaha du er jo fantastisk :))))

Sikke nogle gode tips til min eksamen mandag!! kan se jeg lige skal have noget mere med til min fremlæggelse nu!!

Drikker en kop kaffe med masser af sukker inden eksamen så har jeg energi nok ;) og lover at tage vand med ind og slet ikke tage mobilen med ind (hvad skal jeg bruge den til!)

Tusind tak for din hjælp til det her det sætter jeg stor pris på!!
Avatar billede olebole Juniormester
17. juni 2012 - 00:35 #13
Selvtak. På mine hold har jeg altid gjort sidste undervisningsdag til kaffe og kage dag med tips, tricks og coaching - samt lidt hurtig opfriskning af mindre ting, som erfaringsmæssigt kan stå en smule tåget. Men på det tidspunkt er det for sent at lappe de store mangler, så hellere få ro og hygge på. Det er et godt afsæt at have med, når man mødes 'ved bordet'  =)

Lige lidt mere til din laaaaaange forklaring:

"Da absolut positionerede elementer (mine billeder) ikke fylder noget i deres omgivelser, har jeg været nødt til at give A elementerne en passende højde og bredde. Ellers ville de bare kollapse.

Nu er A elementer jo inline elementer, og inline elementers højde er altid defineret ved den på stedet gældende line-height. Derfor giver det ikke umiddelbart mening at give A elementer en højde - kun en bredde.

Det er årsagen til, at jeg har givet A elementerne display:block - hvorved de jo forvandles til block elementer. Så kan de nemlig modtage både en højde og en bredde."

Og for din egen forståelse, hvis du ikke allerede har den:

Inline elementer kan stå i en linje.

Block element udgør en blok af information, ofte bestående af linjer. Der indsættes automatisk linjeskift før og efter elementet - og elementet fylder som hovedregel hele den tilgængelige bredde.

Inline elementer kan naturlig nok ikke indeholde block elementer. Vi kan ikke have en blok af linjer i én linje. Inline elementer kan altså kun indeholde andre inline elementer.

Block elementer kan derimod indeholde både inline elementer og andre block elementer.

Inline elementer: SPAN, A, alle tekstformaterings elementer som B, STRONG, I, EM, m.fl.

Block elementer (og elementer, der opfører sig som sådan): DIV, FORM, UL, LI, TABLE, m.fl.

P er lidt specielt, da det er et block element - men det kan kun indeholde inline elementer.

Men nu tør jeg zq heller ikke hælde mere på inden mandag! Du skulle gerne kunne huske det - og det skulle nødigt forvirre  :D
Avatar billede showbakkwn Nybegynder
17. juni 2012 - 00:43 #14
Jeg har den kæmpe fordel jeg har fotografisk hukommelse ;) Så skal bare se længe nok på de notater jeg har så kan jeg huske dem i hovedet :) Og igen tusind tak :D Skal dog op og forsvare min opgave ved en vejleder som underviser i kommunikation og en censor som er usability mand. så skal vist også passe på ikke at blive alt for nørdet :S
Avatar billede olebole Juniormester
17. juni 2012 - 00:58 #15
Ja, fotografisk hukommelse kender jeg alt til! Min signatur på min GMail ser sådan ud  :D

Venlig hilsen / Best regards,
Ole Clausen
------------------------------------------------------------------------------------------------
Everyone has a photographic memory .... some just don't have film

Det skal heller ikke være for lidt 'nørdet'. Dem kan du bilde, hvad somhelst ind - og de bliver hurtigt imponeret over, at du ved en masse, som de ikke ved hat om. Ude i branchen er grafikere med kodeforståelse og udviklere med grafisk forståelse desuden eftertragtet/elsket på tværs af afdelingerne. Det ved eksaminator og censor sikkert  *o)

Anyway, nu skal jeg nok lade være med at sinke dig. Pøj-pøj med eksamen ... og vend gerne tilbage med resultatet  =)
Avatar billede showbakkwn Nybegynder
17. juni 2012 - 01:04 #16
Tak tak :) Lover at vende tilbage med resultatet :) Og igen tak for hjælpen.....
Avatar billede olebole Juniormester
17. juni 2012 - 01:20 #17
Og så må jeg altså lige sige én sidste ting: Hvis du får tid og har dine spillertekster liggende (ikke rastede) i en psd-fil, så burde du nok lige åbne filen igen.

Highlight en tekst og sæt din tekst-anti-aliasing metode (i den øverste bjælke i Photoshop - lige ved siden af størrelesen). Det kunne se ud, somom den er sat til None, men det vil være pænere med Crisp eller Sharp. Det vil resultere i en mindre pixelleret tekst.

Det kan dog også skyldes, at den anvendte skrift kun findes som bitmap skærmskrift på maskinen. I så fald bør du vælge en anden skrift.

Det gør du på alle spillernes 'kort' og gemmer dem igen. Her vil det være rart, hvis alle teksterne ligger som lag i én og samme fil. Så kan det gå ret hurtigt  *o)

Har du ikke tid, så sig selv, at du gerne ville have gjort teksten blødere i kanten, men ikke havde tid. I det hele taget trækker det mindre ned, når man selv nævner sine fejl - og hvad man ville have gjort, hvis tiden havde været til rådighed. Tro mig ... fejl og mangler bliver opdaget alligevel  =)
Avatar billede showbakkwn Nybegynder
17. juni 2012 - 09:25 #18
Go morgen...

Nu fik jeg endelig kigget ordenligt på koden du sendte igår :) (skulle lige have min hjemmeisde til at loade billederne)

Og med den måde du har sat det op på opstår mit problem; Når jeg kommer ned til keeperen så vil hoveren dukke op uden for fodboldbanen og det er i mit hovede ikke grafisk pænt :)
Avatar billede showbakkwn Nybegynder
17. juni 2012 - 09:27 #19
Og bum der fandt jeg selv rettelsen til den funktion!!! skulle vist lige ha søvnen ud af øjene
Avatar billede olebole Juniormester
17. juni 2012 - 15:59 #20
Ja, du sætter bare en speciel højde i CSS'en for hendes LI element.

Da alle LI elementer har samme højde og bredde, kan du faktisk godt slette højde og bredde i de enkelte LI'er og sætte den fælles for alle spillere her:

#map li {
    position: absolute;
    border: 1px solid red;
    width: 100px;
    height: 150px;
}

Det gør CSS-koden en hel del mindre og lettere at overskue. Koden bliver ikke som sådan bedre af det - men den bliver en smule mere 'sexy'  =)
Avatar billede showbakkwn Nybegynder
18. juni 2012 - 12:23 #21
Hej Olebole :)

Jeg lovede at skrive hvad jeg fik :D :D :D
Jeg er nu multimediedesigner med et 12 tal :D

Igen tusind tak for hjælpen...
Avatar billede olebole Juniormester
18. juni 2012 - 14:27 #22
For fanden, hvor er det godt at høre! Herfra skal lyde et kæmpestort, rungende

*** TIL LYKKE ***

Spis noget god mad - drik noget god vin - gå ud og dans - kram ham, du ikke har turdet kramme - syng - fløjt - nyd for pokker dig selv og dit liv. Du har fortjent det!  *D

Rigtig meget held og lykke med din kommende karriere  =)
Avatar billede showbakkwn Nybegynder
18. juni 2012 - 14:39 #23
Tak :) Det er jo en helt fantastisk følelse at prøve og få sådan et 12 tal i en afgørende eksamen!!! :D
- næste projekt SØG JOB! ;)
Avatar billede olebole Juniormester
18. juni 2012 - 15:12 #24
Nope! Projekt 1 er indlysende. Projekt 2 er at blive ædru. Projekt 3 er at få renset lagkagen af skoende efter borddansen og komme sig over den værste bondeanger.  Projekt 4 er at søge job  *D
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