» »

[HTML/CSS] please click for larger image

[HTML/CSS] please click for larger image

CaqKa ::

Imamo predmet HCI - human computer interface.
in sem zadnjič oddal en sestavek v htmlju..
seveda sem uporabil svoje znanje ter ga opremil pri slikah z alt="klikni za večjo sliko"
seveda niti pomislil nisem da bi bilo fino napisat da se dajo slike tudi povečat..
pač glede na to da je profesor spisal tudi eno knjigo o uporabniku prijaznem internetu, sem mislil da bo poznal to foro..
sem se pač zmotil..

ker mi tekst kjerkoli okoli slike ne diši me zanima, če obstaja kakšna funkcija ki bi ČEZ sliko naredila napis pa mogoče kak gif (eno lupo), oboje napis in sliko bi jaz določil. torej neke vrste overlay.

sicer pa če to kak drugače rešujete so predlogi seveda dobrodošli.
aja pa prosim brez javascriptov. lahko pa je css ki ga recimo IE ne podpira pa se v FF vidi. nimam nič proti.
  • spremenil: CaqKa ()

ziher ::

Če delaš s php-jem obstaja ena knjižnica GD, s katero se to da.

Klele si lahko mal več pogledaš: http://www.boutell.com/gd/

bluefish ::

stvar se da lepo narediti z PHP-jem.

link

Tr0n ::

Ali pa rocno naredis okoli slike tabelico oz. graficen okvircek, kjer dodas lupico v spodnji kot ali kaj podobnega. Resitev je vec.

Kami ::

Al pa simple na začetku napišeš "Za večjo sliko kliknite na posameznem thumbnail"

CaqKa ::

html me zanima.

kami, fora je ravno v tem da tega nočem.
Tr0n lahko daš primer?
se da to s cssjem rešit?
like "overlay url(blabla.gif)"
pa da to potem na imgje flikne?
ker vsakič posebej table urejevat mi tudi ni.

Bob Rock ::

ka pa ce das sliko za background v td?
___________________________________________________
gance hale ale cuzamen

CaqKa ::

zanimiva ideja.
se jo da tam resizeat?

Bob Rock ::

lahka bi naredu recimo tak, da bi na naredu tist text ko ga bos mel napisanga za link, pa onclick poklices javascript, pa ti opre v novem oknu vecjo sliko.
___________________________________________________
gance hale ale cuzamen

Trubadur ::

Da se s CSS. Naredi en div, ki se onMouseOver prikaže oz. skrije, v njem naj bo "lupa" ali napis.
Berite Thomasa!

root987 ::

Kaj pa nekaj takega? Verjetno ti bo vsaj enkrat šel user čez slikco z miško, nakar mu bo verjetno kapnila ideja...

EDIT: sicer pa za vklapljanje gifa v sliko boš moral to narediti ali ročno ali pa z neko skriptico.
"Myths which are believed in tend to become true."
--- George Orwell

Zgodovina sprememb…

  • spremenil: root987 ()

CaqKa ::

bob rock preberi prvi post. predvsem zadnji odstavek.
trubadur si lahko bolj natančen? bi šlo tudi z span?

no jaz sem mislil takole, sedaj med potjo.. en class panato še enega ki bi ga na tega naredil relativnega.. pa bi v ta prvem imel orginal sliko v ta drugem pa lupo. kak bi to izvedel?

predvsem me zanimajo konkretni štikli kode, ker sam raziskujem na tem področju in ga ne obvladam.

root987 zanašanje da gre user čez slikico odpade... ker potem bi tudi alt videl.

tole mi v bistvu sploh ni všeč ker je treba sliko limat zraven.. oziroma jo extra urejat.. najbolje bi bilo kar da imam _t.jpg in .jpg pa potem recimo lupa.gif.
pa potem more to zrendat in sprocesirat računalnik s katerim si ogleduješ page. (nočem da server računa to)

root987 ::

Alt bi on videl če se ti slikca ne bi pokazala - da bi videl "klik za večjo sliko" ko gre user čez sliko, uporabi title.
"Myths which are believed in tend to become true."
--- George Orwell

CaqKa ::

alt se vidi ko se z miško ustaviš na sliki.
sem pa rešil zadevo.
dva spana drugega v drugem sem naredil ter drugega dal na absolute.. (btw kaka je fora absolute pa relative?)


zanima me kak naj sedaj naredim da se bo tekst oblival kot tukaj?

CaqKa ::

hmm sem rešil tako da sem obema še dodal float
pred sliko pa en br.

Bob Rock ::

bob rock preberi prvi post. predvsem zadnji odstavek.

sn zgleda prevec povrsno prebral...

alt se vidi ko se z miško ustaviš na sliki.

ja, ampak sam v explorerju, title se vidi pa v vseh brskalnikih....drugace je pa alt namenjen temu, kar ti je root rekel.
___________________________________________________
gance hale ale cuzamen

CaqKa ::

>>> ampak sam v explorerju, title se vidi pa v vseh brskalnikih

tega pa nisem vedel. tnx obema za info

wiii FF ne zna tega porendat.. opera pa ie6 pa delata kul.
zanimivo.. še en razlog več za opero :>
bwahaha še validator se ne pritožuje.

ok še zadnje vprašanje. se da naredit da sta sliki v sredini in ju tekst obliva? (tako da tekst sam ve, da naj gre enkrat na eno drugič na drugo stran slike)

btw.. kam za FF prijavim bug report? oziroma da ne renda pravilno?

Zgodovina sprememb…

  • spremenil: CaqKa ()

bluefish ::

sicer je dobra rešitev, ampak morda bo za nekatere uporabnike moteča, saj s tem ko se z miško zapelješ čez sliko in se le ta poveča nastane zamik teksta.

BluPhenix ::

CaQka: poglej si ta link, vem, da ni čisto tisto kar iščeš vendar lahko kodo malo premeniš in bo rešeno (koda je priložena primerom):

http://evan.nixsys.bz/note/

forma med absolute in relative ja pa to, eno postaviš absolutno, se pravi po koordinatah, drugo je pa relativno, glede na prejšnji element.

in v tem tvojem absolute positionu je problem, ker se na mojem monitorju vse razmeče (19"), uporabljaj raje relative in margin, ter span. Bom jutri naredil nekaj, pa boš povedal če si tako mislil.

njok ::

Meni se zdi JavaScript za taka opravila primernejsi, ampak verjetno ima CaqKa svoj razlog, da ga noce uporabljat.


Ena CSS-only resitev:

Ce je markup nekaj podobnega:
<a href="http://nekam.com/velika-slika.png" title="Klik za vecjo sliko">
	<img src="pic.png" alt="opis slike" />
</a>


Potem je CSS tak:
a[href$=".png"],a[href$=".gif"],a[href$=".jpg"] {
	position: relative;
}
a[href$=".png"]:after,a[href$=".gif"]:after,a[href$=".jpg"]:after {
	content: attr(title);
}



Alt atribut pride v postev ko slika iz kateregakoli razloga ni prikazana (slabovidni in slepi uporabniki, slika ni dostopna, client ne podpira slik, obiskovalec spara bandwidth,...), tako da so vrednosti v stilu klikni za vecjo zelo neprimerne. Ce validator ne javi napake se ne pomeni, da je zadeva standard-compilant. Uporabljajte title atribut.

njok ::

Se ena, malo bolj cross-browser resitev.

CaqKa ::

ni glih tisto kar sem želel, ampak mi je ful všeč.
hvala njok.

njok ::

Np... to je vse, kar sem lahko naredil brez dodatnega markupa in javascripta.

Ce bi pa hotel vsakemu linku dodajat se en span element, potem imas pri postavljanju lupe malo bolj proste roke. Primercek.

Ampak ker je lepljenje koscka kode cez vse dokumente nadlezno opravilo (sploh ko je treba kaj spreminjati), sem zadnjic omenil, da bi raje uprabil en preprost javascript. Drugi primercek.

CaqKa ::

nimam nekega drugega razloga proti JS kot pa da mi ne diši, ter da se mi ne zdi da to sodi v html.
poleg tega mislim da je današnji html dovolj razvit da omogoča enake zadeve. vsaj kar se oblikovanja tiče.
problem je edino da je ikonica lupe v bistvu background in je ne moreš overlayat čez sliko.. ampak je tak tudi dovolj kul.

njok ::

Seveda se da overlayat (ce se nisva narobe razumela).


Imas pa IMHO malo napacno predstavo o HTML-ju. Ker po tej logiki je tudi CSS odvec (ce pustimo ob strani uporabo iste css datoteke na vec straneh), saj lahko vse povemo kar preko raznih background="neki.gif" itd...

Ampak to je narobe. Sam HTML dokument naj ne bi vseboval drugega kot cisto vsebino in metapotadke. In seveda povezave na zunanje dokumente, ki dolocijo obliko (css) in obnasanje (javascript).

Vem pa, da marsikomu JS ne disi, saj lahko velikokrat naletimo na zelo nadlezne koscke kode, ki brskanje vse prej kot olajsajo (kar pa bi moral biti namen JS).

CaqKa ::

a kul. samo škoda ko opacity ne dela v IE6
pa sej je vredi.. pri tej metodi morek pri sliki pri ahrefu dodat samo class, poleg cssja. mi je všeč to.


Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
!

Vse, kar ste si želeli vprašati o CSS, pa si niste upali. (strani: 1 2 3 423 24 25 26 )

Oddelek: Izdelava spletišč
1297330920 (55069) htmltroubles
»

LaTeX (linux newbie, ne se jezit:) (strani: 1 2 )

Oddelek: Programska oprema
767726 (6096) CaqKa
»

pritožba na neodobritev vpisa v višji letnik

Oddelek: Šola
126210 (5383) gzibret
»

Pipin odprti termin: Latex

Oddelek: Novice / Kiberpipa
354427 (3560) BigWhale
»

Srečno v novem šolskem letu

Oddelek: Novice / Obvestila
322593 (2593) Gizmo_X

Več podobnih tem