/ Forside / Teknologi / Udvikling / PHP / Nyhedsindlæg
Login
Glemt dit kodeord?
Brugernavn

Kodeord


Reklame
Top 10 brugere
PHP
#NavnPoint
rfh 3959
natmaden 3372
poul_from 3310
funbreak 2700
stone47 2230
Jin2k 1960
Angband 1743
Bjerner 1249
refi 1185
10  Interkril.. 1146
Vise 'boble', når mus over et billede
Fra : Kurt G


Dato : 27-07-11 18:28

Jeg har et billedgalleri, hvor man ved at trykke på det viste store billede
kan få vist næste billede i rækken.
Kan jeg få vist en 'taleboble' med en besked, når musen er henne over
billedet? og hvis Ja, hvordan?

Mvh Kurt




 
 
Philip Nunnegaard (27-07-2011)
Kommentar
Fra : Philip Nunnegaard


Dato : 27-07-11 21:06

Kurt G skrev:
> Jeg har et billedgalleri, hvor man ved at trykke på det viste store billede
> kan få vist næste billede i rækken.
> Kan jeg få vist en 'taleboble' med en besked, når musen er henne over
> billedet? og hvis Ja, hvordan?

Alt afhængigt af hvilken slags taleboble vi taler om, er det enten
javascript eller ren html.

Ren html:

<img title="Skriv din bobletekst her" src="..." alt="..." />

Det er title-attributten der gør det.


--
Philip

Birger Sørensen (27-07-2011)
Kommentar
Fra : Birger Sørensen


Dato : 27-07-11 21:27

Philip Nunnegaard har bragt dette til os:
> Kurt G skrev:
>> Jeg har et billedgalleri, hvor man ved at trykke på det viste store billede
>> kan få vist næste billede i rækken.
>> Kan jeg få vist en 'taleboble' med en besked, når musen er henne over
>> billedet? og hvis Ja, hvordan?
>
> Alt afhængigt af hvilken slags taleboble vi taler om, er det enten javascript
> eller ren html.
>
> Ren html:
>
> <img title="Skriv din bobletekst her" src="..." alt="..." />
>
> Det er title-attributten der gør det.

Det kan også gøres med :hover.
Boblen har display:none, som skiftes til block når der hoveres over
billedet.

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



Kurt G (27-07-2011)
Kommentar
Fra : Kurt G


Dato : 27-07-11 21:52

"Birger Sørensen" <sdc@bbsorensen.com> skrev i en meddelelse
news:4e30747c$0$314$14726298@news.sunsite.dk...
> Philip Nunnegaard har bragt dette til os:
>> Kurt G skrev:
>>> Jeg har et billedgalleri, hvor man ved at trykke på det viste store
>>> billede
>>> kan få vist næste billede i rækken.
>>> Kan jeg få vist en 'taleboble' med en besked, når musen er henne over
>>> billedet? og hvis Ja, hvordan?
>>
>> Alt afhængigt af hvilken slags taleboble vi taler om, er det enten
>> javascript eller ren html.
>>
>> Ren html:
>>
>> <img title="Skriv din bobletekst her" src="..." alt="..." />
>>
>> Det er title-attributten der gør det.
>
> Det kan også gøres med :hover.
> Boblen har display:none, som skiftes til block når der hoveres over
> billedet.
>
> Birger
>
> --
> http://varmeretter.dk - billig, sund og hurtig mad
> http://bbsorensen.dk
>
Uden at jeg helt forstår det, du skriver, ser Philips løsning for mig ud til
at være det nemmeste!
Kan du forklare det lidt nærmere, evt. med et eksempel, så jeg etv. kan
bruge det ien anden sammenhæng!

Mvh Kurt



Birger Sørensen (27-07-2011)
Kommentar
Fra : Birger Sørensen


Dato : 27-07-11 22:07

Følgende er skrevet af Kurt G:
> "Birger Sørensen" <sdc@bbsorensen.com> skrev i en meddelelse
> news:4e30747c$0$314$14726298@news.sunsite.dk...
>> Philip Nunnegaard har bragt dette til os:
>>> Kurt G skrev:
>>>> Jeg har et billedgalleri, hvor man ved at trykke på det viste store
>>>> billede
>>>> kan få vist næste billede i rækken.
>>>> Kan jeg få vist en 'taleboble' med en besked, når musen er henne over
>>>> billedet? og hvis Ja, hvordan?
>>>
>>> Alt afhængigt af hvilken slags taleboble vi taler om, er det enten
>>> javascript eller ren html.
>>>
>>> Ren html:
>>>
>>> <img title="Skriv din bobletekst her" src="..." alt="..." />
>>>
>>> Det er title-attributten der gør det.
>>
>> Det kan også gøres med :hover.
>> Boblen har display:none, som skiftes til block når der hoveres over
>> billedet.
>>
>> Birger
>>
>> -- http://varmeretter.dk - billig, sund og hurtig mad
>> http://bbsorensen.dk
>>
> Uden at jeg helt forstår det, du skriver, ser Philips løsning for mig ud til
> at være det nemmeste!
> Kan du forklare det lidt nærmere, evt. med et eksempel, så jeg etv. kan bruge
> det ien anden sammenhæng!
>
> Mvh Kurt

Det svarer vel nogenlunde til det jeg sidder med til orbogen (og
forhåbentlig bliver seriøs i løbet af en dags tid eller to), som er det
nærmeste jeg kommer en demo:
http://bbsorensen.com/ordbog/?men=Test
Klik på Test tekst - der kommer en tekst med link i - og en forklaring
i en "talebobbel" når du holder musen over.
Om det er link eller et billede der hover'ers over er ligegyldigt -
princippet er det samme.

Tricket er css'en i sammenhæng med "boblen".
Boblen er placeret i samme element som billedet, men er oprindelig
skjult med display:none;
Når du hover over billedet, sættes boblens display:block; og den bliver
vist.
Det kræver lidt design, og boblen skal helst være absolut positioneret
- ellers rykker sidens øvrige indhold rundt, når boblen vises.

Men det er nok ikke sådan en løsning du er efter.
Måske ikke helt for "uøvede" (og der er ingen kritik i det, hverken af
dig eller andre), men heller ikke sværere end det kan lade sig gøre.

Birger

--
http://varmeretter.dk - billig, sund og hurtig mad
http://bbsorensen.dk



Philip Nunnegaard (27-07-2011)
Kommentar
Fra : Philip Nunnegaard


Dato : 27-07-11 22:48

Den 27-07-2011 22:26, Birger Sørensen skrev:

> Det kan også gøres med :hover.
> Boblen har display:none, som skiftes til block når der hoveres over
> billedet.

Selvfølgelig.
Og jeg der netop gerne undgår javascript når det samme kan opnås med css.


--
Philip

Kurt G (27-07-2011)
Kommentar
Fra : Kurt G


Dato : 27-07-11 21:49

"Philip Nunnegaard" <nunnenospam@hitsurf.dk> skrev i en meddelelse
news:4e306fa5$0$36579$edfadb0f@dtext01.news.tele.dk...
> Kurt G skrev:
>> Jeg har et billedgalleri, hvor man ved at trykke på det viste store
>> billede
>> kan få vist næste billede i rækken.
>> Kan jeg få vist en 'taleboble' med en besked, når musen er henne over
>> billedet? og hvis Ja, hvordan?
>
> Alt afhængigt af hvilken slags taleboble vi taler om, er det enten
> javascript eller ren html.
>
> Ren html:
>
> <img title="Skriv din bobletekst her" src="..." alt="..." />
>
> Det er title-attributten der gør det.
>
>
> --
> Philip

Det var lige det, jeg skulle bruge.
Tak for hjælpen.

Mvh Kurt



Søg
Reklame
Statistik
Spørgsmål : 177558
Tips : 31968
Nyheder : 719565
Indlæg : 6408924
Brugere : 218888

Månedens bedste
Årets bedste
Sidste års bedste