Na obrazok text

elo · Napísal **elo**: 30.12.2014 21:49

Ahoj,

Ako na obrazok vlozit text?

Tu mam kod po najdeni mysi sa zmeni obrazok ale chcem aby tam bol aj realne text, nechcem ho tam davat graficky v editore.

Kód:

onMouseOut="self.document['obr1'].src='./images/a.jpg';"
onMouseOver="self.document['obr1'].src='./images/aa.jpg';">
<img name="obr1" src="./images/a.jpg" border="0">

D.

walther · Napísal **walther**: 30.12.2014 21:52

Aký text? Watermark? To sa zvykne robiť automaticky pri nahrávaní súborov na server, napr. pomocou php...

elo · Napísal autor témy **elo**: 30.12.2014 21:53

Nie watermark, potrebujem nazvy kategorii vlozit na pozadie obrazkov a z hladiska SEO ich tam potrebujem vlozit ako text.

D.

walther · Napísal **walther**: 30.12.2014 21:57

No do img toto nijako nevložíš, môžeš ale spraviť niečo také, že si spravíš napr <span> elementy. V spane si môžeš nastaviť text ako potrebuješ a len si to pomocou css naštýluješ. Bolo by ale fajn urobiť to bez javascriptu, už pri generovaní stránky.

elo · Napísal autor témy **elo**: 30.12.2014 22:03

onMouseOut="self.document['obr1'].src='./images/a.jpg';"
onMouseOver="self.document['obr1'].src='./images/aa.jpg';"><span class="m">123
<img name="obr1" src="./images/a.jpg" border="0"></span>

stale nemozem dostat span nad obrazok, ako tam presne vlozit ten span? css si potom doladim.

chrono · Napísal **chrono**: 30.12.2014 22:08

span daj za obrázok.

Mimochodom prečo nemôžeš použiť atribút title?

elo · Napísal autor témy **elo**: 30.12.2014 22:14

onMouseOut="self.document['obr1'].src='./images/a.jpg';"
onMouseOver="self.document['obr1'].src='./images/aa.jpg';">
<img name="obr1" src="./images/a.jpg" border="0"><span class="m">123</span>

zobrazi obrazok a za nim 123

ked pouzijem title, to som uz skusal

onMouseOut="self.document['obr1'].src='./images/a.jpg';"
onMouseOver="self.document['obr1'].src='./images/aa.jpg';">
<img name="obr1" src="./images/a.jpg" border="0" title="123">
nezobrazi ziadny text

walther · Napísal **walther**: 30.12.2014 22:14

Takéto dačo som mal na mysli: http://jsfiddle.net/zo52qpzL/
Nie som primárne html/css kóder, tak sa to možno dá urobiť efektívnejšie, lepšie a ktovie čo, ale hádam máš aspoň cca predstavu

Inak, ak ide IBA o seo, tak by v podstate nemalo vadiť ani to, keby si ich tam síce v textovej forme dal, ale pomocou css by si im zakázal zobrazovanie sa (podobný spôsob ako sa robí/robil pri logách).

elo · Napísal autor témy **elo**: 30.12.2014 22:15

Idealne by bolo pouzit h2 ale to uz si potom viem zmenit zo span na h2.

chrono · Napísal **chrono**: 30.12.2014 22:20

Čo vlastne robíš? Nie je možné, aby bol ten obrázok použitý ako pozadie pre tú h2 značku? (a pri CSS nie je problém, aby sa ten obrázok pozadia zmenil, ak je nad ním myš)

elo · Napísal autor témy **elo**: 30.12.2014 23:01

Text je ale pozadie sa nemeni, ide to spolu spracovat?

D.

// Spojený príspevok Uto 30.12.14 23:26

chrono píše:

Čo vlastne robíš? Nie je možné, aby bol ten obrázok použitý ako pozadie pre tú h2 značku? (a pri CSS nie je problém, aby sa ten obrázok pozadia zmenil, ak je nad ním myš)

Potrebujem zobrazit pozadie po prechode mysou sa zmeni a do obrazka dopisat H2.

Bud ide ledno alebo druhe.

walther · Napísal **walther**: 31.12.2014 0:33

Pozeral si ten link na fiddle čo som sem dal? Ten ti nefunguje?? Máš problém si to prispôsobiť svojim potrebám alebo v čom máš problém teraz?

Kraliček · Napísal **Kraliček**: 31.12.2014 13:28

Kód:

<img>...
<span><h2>text</h2></span>
<style>
h2 {position:relative;top:-40px}
span{background:black}
</style>

incredible · Napísal **incredible**: 30.01.2015 13:57

Alebo namiesto <img> pouzi <div> na ktory nastavis pozadie s tvojim obrazkom a do toho divu vloz text:

<div style="background-image: url('path/path/img.jpg')">
Tvoj text sem
</div>

hatto13 · Napísal **hatto13**: 30.01.2015 14:33

to by musel vediet vysku/sirku alebo aspon pomer stran. takze na dynamicke obrazky to nebude vhodne riesenie.

inak skus pozriet toto. je to element urceny na tieto ucely: http://html5doctor.com/the-figure-figcaption-elements/

incredible · Napísal **incredible**: 30.01.2015 15:35

Praveze bude, atribut background ma este viac moznych nastaveni pozicovania a resizovania ako obycajny obrazok. http://stackoverflow.com/questions/1150 ... h-css-only

hatto13 · Napísal **hatto13**: 30.01.2015 15:45

ano ma, ale darmo ho mozes poziciovat a resizovat (btw. nefunguje v IE8), ked nevies aku velkost ma mat div, lebo ten neprisposobis rozmerom obrazku ak nemas staticky dane rozmery alebo pomer.

incredible · Napísal **incredible**: 30.01.2015 15:53

Akozeby nie, ved som to uz riesil a slo to iba cez background:

.intro {background: url("../images/background.jpg") 50% 0 fixed no-repeat; overflow:hidden;}

Je to ten velky obrazok na tejto stranke: http://www.hosko.betaverzia.sk/ Zmen velkost okna a pozeraj ako to reaguje na zmenu.

hatto13 · Napísal **hatto13**: 30.01.2015 16:42

vravime o dvoch rozdielnych veciach. chalan chcel vlozit na stranku obrazok, napriklad v texte a mat na nom popis (ak som spravne pochopil). nieco takeho https://i.imgur.com/3EmlXnG.png
to cez background image nespravi, lebo tvojim sposobom by bol ten obrazok orezany ak by nevedel jeho rozmery.

inak pozeram kod tej tvojej stranky a tiez si pouzil <figure> a nie background-image (ak vravis o tych 4 obrazkoch)

incredible · Napísal **incredible**: 30.01.2015 22:30

Nieco taketo? http://www.kvetena.betaverzia.sk/zahrada Tam je to tiez cez background-image a :hover spravene (potom to este kolega nejak zanimoval). Ale tak obrazok musi byt orezany, ak mas lubovolny pomer stran a chces ho zobrazit v pevne stanovenom ramci (napr. 120X80) a nechces ho mat roztiahnuty, ci? Vravel som o tom velkom v pozadi.

Na obrazok text

Podobné témy