ugrás a tartalomhoz

Image replacement kerdes

zoliky · 2009. Júl. 8. (Sze), 09.35
Hello,
A kovetkezo modszert hasznalom (image replacement):

HTML:

<h2> 
<span></span>Hello World 
</h2>
CSS:

h2 { 
 width: 150px; 
 height: 35px; 
 position: relative; 
}

h2 span { 
 background: url(hello_world.gif) no-repeat; 
 position: absolute; 
 width: 100%; 
 height: 100%; 
}
A problema az, hogy a "Hello World" szoveg nem link. Megprobaltam igy:

HTML:

<h2> 
<span></span><a href="#">Hello World</a>
</h2>
Persze ugy tesz mintha semmi sem tortenik! A kep nem klikelheto! Valami otlet?
‹ FCK Editor config Qooxdoo tudor kerestetik ›
 ■
1

<style> a:hover{ cursor:point

mgergo90 · 2009. Júl. 8. (Sze), 09.55
<style>
a:hover{
cursor:pointer;
}
</style
3

szerintem nem ez a baj, eleve

zoliky · 2009. Júl. 8. (Sze), 10.25
szerintem nem ez a baj, eleve ra sem birok klikelni!
2

talán ez egyszerűbb

Tomek73 · 2009. Júl. 8. (Sze), 10.05
<h2>
<a href="#">Hello World</a>
</h2>

css:
h2 {
width: 150px;
height: 30px;
}

h2 a {
display: block;
text-indent: -9999px;
background: url(hello.gif) top left no-repeat;
}
4

igen de ezt a modszert sokan

zoliky · 2009. Júl. 8. (Sze), 10.25
igen de ezt a modszert sokan nem szeretik. Andy Budd konyve sem szivleli.
5

:)

Tomek73 · 2009. Júl. 8. (Sze), 10.57
Bocs, akkor ide a legegyszerűbb (csak firefox)

<h2>
<a href="#"><span></span>Hello World</a>
</h2>

ezzel az a gond, hogy ebben a formában csak firefoxban működik (én csak ie7, ie6, opera alatt néztem)

A fenti megoldást, amit beírtál, azt hiszem Dave Shea oldalán olvastam.
Leírnád, hogy Andy Buddnak mi volt a gondja a fenti megoldással?
7

Kepek megjelenitese nelkul

Grandmaster · 2009. Júl. 8. (Sze), 13.47
A fenti megoldas hatranya, hogy amennyiben a kepek nem kerulnek megjelenitesre, nem lat a felhasznalo semmilyen alternativ szoveget.

A masik megoldassal pedig az a baj, hogy nem hasznalhatoak atlatszo kepek, tovabba plusz HTML elemet kell hasznalnunk.
6

A megoldas annyi, hogy a h2

Grandmaster · 2009. Júl. 8. (Sze), 13.45
A megoldas annyi, hogy a h2 elem tulajdonsagait az anchor elemnek kell megadni, kiegeszitve a blokk tipusu megjelenitessel.

HTML

<h2><a href="#"><span></span></a></h2>
CSS

h2 {}  
h2 a {
  display: block;
  height: 35px;
  position: relative;
  width: 150px;
}  
h2 span {   
  background: url(hello_world.gif) no-repeat;
  cursor: pointer; /*csak ha link*/
  position: absolute;   
  width: 100%;   
  height: 100%;   
}
8

Ok, vegul "Tomek73" peldaja a

zoliky · 2009. Júl. 28. (K), 12.16
Ok, vegul "Tomek73" peldaja a legjobb. A kep atlatszo es az utobbi modszer megjeleniti a szoveget :(

Itt mas nem segit csak a "text-indent: -5000px;".. Most a screen readeresek szidhatnak! de hat ez van... nem nekuk csinalom az oldalat :)
9

gilder-levin

gex · 2009. Júl. 28. (K), 13.31
egyrészt a gilder-levin módszerre keress rá, milliószor szóba került pro-kontra érvekkel egyetemben, másrészt ez a "nem nekuk csinalom az oldalat" - azon kívül hogy bántja a szemem - nem professzionális hozzáállás ami nem baj, mert nekem az ilyenek miatt van munkám, de neked egy idő után nem lesz.

a legnagyobb fogyatékkal élő (elnézést ha nem ez a megfelelő kifejezés) látogatód pedig a google. és tudom hogy a text-indent kivételesen nem számít, de ilyen hozzáállással lesznek nagyobb problémák is az oldalaiddal.
10

Ok, ertem de jobb modszert

zoliky · 2009. Júl. 28. (K), 13.51
Ok, ertem de jobb modszert nem talalok! Es ha ugy vesszuk az image replacement sem "recommended" :) Nem ertem mit nem ismer fel a google a "text-indent: -5000px"-ben. A szoveg marad.

Esetleg a logo hatteret egyeztetem a BODY hatterel (akkor nem kell az atlatszo logo). Kelemetlen egy olyan BODY hatternel amely peldaul fa.

http://img29.imageshack.us/img29/4062/website2.jpg
11

gy.k.

gex · 2009. Júl. 28. (K), 14.39
jobb modszert nem talalok
szívesen mondom el megint, sőt segítek még egy linkkel is: http://haddkeressemmegneked.hu/?q=gilder+levin+method&l=1

Kelemetlen egy olyan BODY hatternel amely peldaul fa.
rengeteg olyan háttérnél használtam már a gilder-levin módszert aminél nem egyszínű háttérre kellett dolgozni. hadd ne kelljen már idemásolni még a css-t is.
12

CSS Mastery

zoliky · 2009. Júl. 28. (K), 14.49
aha, azert irja ezt a CSS Mastery konyv (Gliden Levin Method):

When using this technique, you have to use an image with a solid background;

Az en esetemben a kep transzparens, vagy azt nem olvastatok el ?
13

hát ha konkrétan a belinkelt

gex · 2009. Júl. 28. (K), 14.58
hát ha konkrétan a belinkelt kép (fa mintázat) a dizájn, akkor nyugodtan vágd ki a hátteret is.
rengeteg olyan háttérnél használtam már a gilder-levin módszert aminél nem egyszínű háttérre kellett dolgozni.
vagy ezt nem olvastad el?