Få tekst til å "poppe" opp ved mouseover

[Mira]

Nok en gang må jeg knele for dere web-eksperter

 

Har så smått begynt på den delen av siden jeg lager som skal inneholde linker...

 

Tenkte jeg skulle lage noe alla det man har sett mange ganger før:

Man drar musen over en f.eks link og så popper det tekst opp et annen sted.

 

For det første?

Hvordan gjøres dette? CSS?

 

Og for det andre:

Er dette en brukbar løsning?

 

edit:

hvorfor ser jeg aldri skrivefeil før etter jeg har trykkt lagre?!

Endret 29. mars 2004 av Mira

[Arve Systad]

Om du skal ha teksten til å poppe opp en heilt anna plass på sida går dette ikkje med CSS, med mindre du bruker ekstreme metoder som å få et element til å utvide seg vanvittig og vere gjennomsiktig ved mouseover... og sånn ...

 

Anbefaler javascript, eller å la det ver

[Mira]

hmmm... trodde ikke dette var så komplisert jeg...men,men...

Har virkelig fått interesse for dette, så hvis det ikke er håpløs idè så får jeg prøve å finne et javascript...

 

Vanskelig å finne kanskje?

[joffar]

Dette er forholdsvis enkel sak med CSS: se denne tråden

 

Dersom jeg har forstått deg rett da....

 

Denne tråden gir deg også innblikk i javascrip muligheten også... selv om jeg foretrekker CSS da enkelte har javascript slått av.. og du kan gjøre det samme med CSS.

Endret 29. mars 2004 av joffar

[pgdx]

Total rippoff av en annen side, men slik?

[Mira]

Total rippoff av en annen side, men slik?

 

Akkurat slik var det jeg var ute etter!

 

div#links a:hover span {
display: block;
position: absolute;
top: 180px;
left: 0;
width: 125px;
padding: 5px;
margin: 10px;
z-index: 100;
color: #444;
background: #fff;
font: 10px Verdana, sans-serif;
text-align: center;
}

Dette er hentet fra css-stilarket til siden.

Stemmer det at det er dette er som koden for mouseover effekten?

[zZzZz]

http://www.meyerweb.com/eric/css/edge/popups/demo.html

 

Noe sånt har jeg på bandet mitt sin side..: gigmusic.com

[Mira]

http://www.meyerweb.com/eric/css/edge/popups/demo.html

 

Noe sånt har jeg på bandet mitt sin side..: gigmusic.com

thX m8

 

knallfint design på gigmusic.com btw!

[zZzZz]

http://www.meyerweb.com/eric/css/edge/popups/demo.html

 

Noe sånt har jeg på bandet mitt sin side..: gigmusic.com

thX m8

 

knallfint design på gigmusic.com btw!

takker og bukker...

[Mira]

Er ikke verdens mest drevne innen verken html eller css, men det skal da være mulig å få <span> til å flyttes til et hvilket som helst sted.

Og det er vel også mulig å formatere innholdet i blokken som kommer opp ved hover slik at den får en annen bakgrunn?

 

Hadde noen giddi å tatt seg bryet å vise meg det?

[Arve Systad]

Er ikke verdens mest drevne innen verken html eller css, men det skal da være mulig å få <span> til å flyttes til et hvilket som helst sted.

Og det er vel også mulig å formatere innholdet i blokken som kommer opp ved hover slik at den får en annen bakgrunn?

 

Hadde noen giddi å tatt seg bryet å vise meg det?

:hover funker kun på a elementer i IE

 

men du kan jo alltids angi bakgrunn/størrelse/denslags til a'ene dine dah, og få ønska effekt...

 

 

<span> har ikkje ei bestemt oppgave, det er berre "en ting" i html dokumentet ditt. Blir ofte brukt å skille ut deler av tekst o.l.

 

http://www.w3schools.com/tags/tag_span.asp

http://css.absentvoid.com/norsk/index.php?guide=bildelenker

 

[joffar]

Er ikke verdens mest drevne innen verken html eller css, men det skal da være mulig å få <span> til å flyttes til et hvilket som helst sted.

Og det er vel også mulig å formatere innholdet i blokken som kommer opp ved hover slik at den får en annen bakgrunn?

 

Hadde noen giddi å tatt seg bryet å vise meg det?

Dersom du kikker på siden min ser du at det er akkurat hva jeg har gjort, med unntak av å skifte bakgrunns farge.

Dersom du følger tråden jeg ga deg i mitt forrige innlegg, ser du CSS koden jeg har brukt som flytter teksten som sitter innenfor span. Isteden for <span> kan du bruke en hvilken som helst HTML tag som er skjeldent brukt... som <i>tekst</i> feks.

Dersom du setter linkene dine innefor en <div id='meny'> meny</div>, kan du deretter flytte span teksten ved å kode #meny a:hover span { div kode her der du posisjonerer span teksten }

[Mira]

ThX Joffar, fikk det til nå

MEn kliner til med et annet spørsmål jeg,

er det mulig å definere et bilde slik at det følger med scollen nedover?

Slik at det hele tiden står på samme sted, altså visuelt?

[Arve Systad]

http://www.meyerweb.com/eric/css/edge/popups/demo.html

 

Noe sånt har jeg på bandet mitt sin side..: gigmusic.com

thX m8

 

knallfint design på gigmusic.com btw!

takker og bukker...

Men det er ett eller anna snålt med den sida. I opera lagger det når eg prøver å markere tekst, og ingenting i menyen funker eller får mouseover.

 

når eg prøver å gå innpå den i IE så får eg sånn programfeil greier, og IE stenger seg ned...

 

Ikkje veldig brukervennlig altså.

[zZzZz]

http://www.meyerweb.com/eric/css/edge/popups/demo.html

 

Noe sånt har jeg på bandet mitt sin side..: gigmusic.com

thX m8

 

knallfint design på gigmusic.com btw!

takker og bukker...

Men det er ett eller anna snålt med den sida. I opera lagger det når eg prøver å markere tekst, og ingenting i menyen funker eller får mouseover.

 

når eg prøver å gå innpå den i IE så får eg sånn programfeil greier, og IE stenger seg ned...

 

Ikkje veldig brukervennlig altså.

HVA!?

Hvilke versjoner av Opera og IE har du? Vet at det ihvertfall er noen problemer med mouseoveren i IE

[joffar]

ThX Joffar, fikk det til nå

MEn kliner til med et annet spørsmål jeg,

er det mulig å definere et bilde slik at det følger med scollen nedover?

Slik at det hele tiden står på samme sted, altså visuelt?

Tror vel at du må gjøre det med javascript... for at det skal følge med når du scroller nedover på en side.

 

Du kan bringe opp bilder på lignenede måte som med span, men bildet vil vel være stasjonert og ikke bevege seg.

[zZzZz]

ThX Joffar, fikk det til nå

MEn kliner til med et annet spørsmål jeg,

er det mulig å definere et bilde slik at det følger med scollen nedover?

Slik at det hele tiden står på samme sted, altså visuelt?

http://www.w3schools.com/css/pr_background-attachment.asp

[Mira]

ThX Joffar, fikk det til nå

MEn kliner til med et annet spørsmål jeg,

er det mulig å definere et bilde slik at det følger med scollen nedover?

Slik at det hele tiden står på samme sted, altså visuelt?

http://www.w3schools.com/css/pr_background-attachment.asp

Ja, har sett på den jeg og, men den gjelder jo background...

[zZzZz]

ThX Joffar, fikk det til nå

MEn kliner til med et annet spørsmål jeg,

er det mulig å definere et bilde slik at det følger med scollen nedover?

Slik at det hele tiden står på samme sted, altså visuelt?

http://www.w3schools.com/css/pr_background-attachment.asp

Ja, har sett på den jeg og, men den gjelder jo background...

Men da kan du gjøre noe á la dette:

HTML-fil

(...)
<td id="bilde">
</td>

CSS-fil

td#bilde {
 z-index: 100;
 background: url(filadi.gif);
 background-attachment: fixed;
 position: absolute;
 left: 50px;
 top: 100px;
}

[haugsand]

ThX Joffar, fikk det til nå

MEn kliner til med et annet spørsmål jeg,

er det mulig å definere et bilde slik at det følger med scollen nedover?

Slik at det hele tiden står på samme sted, altså visuelt?

http://www.w3schools.com/css/pr_background-attachment.asp

Ja, har sett på den jeg og, men den gjelder jo background...

Men da kan du gjøre noe á la dette:

HTML-fil

(...)
<td id="bilde">
</td>

CSS-fil

td#bilde {
 z-index: 100;
 background: url(filadi.gif);
 background-attachment: fixed;
 position: absolute;
 left: 50px;
 top: 100px;
}

Ikke bruk tabeller til slikt