Autor Zpráva
slovakCZ
Profil
Dobry den, resim problem, kde je v headeru webu misto klasickeho textu obrazek. nemohu tedy pouzit klasicky:
<h1>titulek webu</h1>..

prave hledam nejake reseni, kde by to bylo jiz vyresene ale nedari se.. narazil jsem ovsem na:
http://www.artofdavemyers.com/

kde to maji resene takto:
<h1 id='logo'>
<a href="/"><img alt="Dave Myers - Designer/Developer/Illustrator" src="/images/logo.png?1250993166" /></a>
<span><em>Dave Myers</em> Designer/Developer/Illustrator</span>
</h1>

koukal jsem do style.css ovsem nenasel jsem jak skryli ten text ve spanu (maji CSS celkem prehledne neprehledne)? je mi jasne ze to muze byt takto "visible: hidden" ovsem nedostanu za to u googlu a jinych vyhledavacu ban?? jak tedy takovou situaci resit (presne stejna situace jako na uvedenem webu)
panther
Profil
slovakCZ
najdi si něco o image replacementu - často se to řeší bez img, ale obrázkem na pozadí.
slovakCZ
Profil
predpokladam ze to je toto:
<h3 id="header">
	<span>Revised Image Replacement</span>
</h3>

/* css */
#header {
	width: 329px;
	height: 25px;
	background-image: url(sample-opaque.gif);
	}
#header span {
	display: none;
	}

ale nevadi to panu googlu? nezabanuje mi za to web? :o)

koukam tech metod je dost :)
http://www.mezzoblue.com/tests/revised-image-replacement/

jinak napadlo me dat obrazek s z-indexem vetsim, nez text za timto obrazekm.. tim by se pri nacteni stranky nejdrive zobrazil text a prekryl by se pote obrazkem. (teoreticky, nezkousel jsem). zase otazka, nebude problem s googlem a podobnymi vyhledavaci, ze se jim to nebude libit toto reseni?
Trejpa
Profil
slovakCZ
predpokladam ze to je toto
Raději takhle (když se nezobrazí obrázek, zobrazí se text):
http://wellstyled.com/css-replace-text-by-image.html
slovakCZ
Profil
Trejpa
nevidim v tom rozdil :o) maji na webu ukazku, klikl jsem na ni a dal jsem blokovat ten obrazek a text se nezobrazil
Trejpa
Profil
slovakCZ
Problém je u tebe. Mně se text místo obrázku zobrazí.
http://wellstyled.com/files/css-replace-text-by-image/example02.html
Bubák
Profil
nevidim v tom rozdil
Použij "2. Kompatibilnější řešení", rozdíly a výhody kompatibilnějšího řešení popsal Pixy v textu.

nevadi to panu googlu? nezabanuje mi za to web?
Pokud budeš mít na obrázku naprosto shodný text, jako ten, co skryješ, tak web žádný vyhledávač nezabanuje.
Dodatek: přesnější je, že vyhledávačě tvůj web nebudou penalizovat.
Taurus
Profil
Klikl jsi na druhou ukázku...?

Edit - pozdě... zbytečný příspěvek
slovakCZ
Profil
Trejpa
ah, uz to vidim, koukal jsem na prvni priklad, proto se mi nezobrazoval.

Bubák
dekuj za odpoved :o)

Taurus
:o) pozde ale pravdu si mel
dmyers722@gmail.com
Profil *
Hey,

I'm the developer that was mentioned in the first post of this thread.

I apologize for not posting this in the forum's proper language, but as I only speak English, I can only respond in it. My reason for posting is to support the choices I made in my code.

As mentioned, I use:
<h1 id='logo'>
<a href="/"><img alt="Dave Myers - Designer/Developer/Illustrator" src="/images/logo.png?1250993166" /></a>
<span><em>Dave Myers</em> Designer/Developer/Illustrator</span>
</h1>

Initially, I wrote this without an "img" tag. I used a background image, as many blog articles will say to use. However, I found that this method was problematic when it came to the print stylesheet. My solution means that screen, print, and readers all see the title as it was initially intended to be viewed. Without the "img" tag, we exclude the people who chose to print the page from seeing all of the content as the author and designer intended it to be seen. I've seen the print stylesheet neglected quite frequently lately, and would encourage designers and developers not to forget it.

And as for those who might feel unsure about writing text that is replaced with an image representation, let me ensure you that this is done for best practice purposes only. Any time an image is used in place of actual text, you are causing a problem for users that use screen readers. If you use an image because it is best for screen (web browsers), then the proper thing to do is to still write the content in HTML as you typically would, but have your stylesheet replace this text with the stylized form you wish to display. This will ensure that you code is readable not only to web crawlers, but also to those with screen readers (so that you are coding your website with accessibility in mind).

I think this is a very important topic of discussion, and think it might be an excellent topic for my next blog post.

Thanks for enduring my explanation, and I again apologize for not being able to write this in the proper tongue.

----
Dave Myers
Plaváček
Profil
dmyers722@gmail.com

Thank you, Dave.

Pro ostatní - je to zajímavá metoda, kterou jsem občas také použil, především proto, že v tomto konkrétním případě se logo zobrazí i v tiskové verzi, což byl evidentně i záměr autora tohoto řešení. Tiskové verze webových stránek jsou dodnes podceňovány (viděl jsem to v praxi při hodnocení webů ve WebTop100).

Nehledě na fakt, že logo vložené jako obrázek může být užitečným prvkem i z hlediska přístupnosti (uživatel používající hlasovou čtečku při správně vyplněném ALTu bude vědět, že tento HTML prvek je logo). Je to určitě zajímavý přístup a jak říká autor - vhodné téma k další diskusi.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: