Kép címe buborék helyett alatta kiíratva

Sziasztok,



Hogyan tudnám megoldani azt kódban, hogy ha egy linkelt bannerkép fölé viszem az egeret, akkor a “title” tag-et ne buborékban jelenítse meg, hanem kiírja a kép alatt?



Egy nyitólapon szeretnék vizuális kategóriaválasztót csinálni, úgy, hogy a kategóriához tartozó magyarázószöveget is meg tudjam jeleníteni a kép alatt. Ezt a magyarázószöveget írnám be a kép title tag-jébe a home.php oldalon.



Köszönöm a segítséget.

Itt egy link, ami segíthet:

http://stackoverflow.com/questions/13318137/how-can-i-extract-title-attribute-from-image-in-other-div

Annyit kell még megtenni, hogy a leírást tartalmazó div alapból css-ben hidden, de a képhez képest pozicionálva van (alá, értelemszerűen). Ezután már csak az img hover-eseményéhez kell rendelned a div megjelenítését css-ben.

Köszi a linket - de sajna azzal nem tudtam zöld ágra vergődni. Nem vagyok profi programozó, csak műkedvelő :slight_smile:



Viszont kutakodtam tovább, és - szerintem egy egyszerűbb megoldással - sikerült mégis megcsinálnom!



Íme - tanulságul, hátha jól jön másoknak is:



a PHP-kódba beillesztettem egy data tag-et az -ba - és nem a title-t használtam az -ben a linksorban:

<a href="...URL..."><img src="...URL..."></a>
```<br />
A CSS-be pedig beraktam ezt a kódot:<br />

a[data]:hover:after {

content: attr(data);

padding: 14px 8px;

color: #10172D;

font-size:20px;

position: absolute;

left: 0;

top: 100%;

white-space: nowrap;

z-index: 2;

}

Így tökéletes lett :-)

Szerintem egy kicsit túl bonyolítottad,a content és after értéknek szerintem semmi keresni valója ott,és a [data] szerintem nem túl jó ötlet,már csak azért sem mert a “title” és az “alt” tag-ek elég nagy szerepet játszanak keresőoptimizálás szempontból.



A “hover” értéket pedig így csináltam volna:

a[data]:hover {<br />
display: block;<br />
position:absolute;<br />
padding:3px 0px;<br />
z-index:25;<br />
font-size:20px;<br />
color:#10172D;<br />
text-decoration:none ;<br />
width:150px;/* amilyen széles a kép */<br />
overflow:hidden;/* ha hosszú a szöveg alatta folytatódik */<br />
}
```<br />

Természetesen saját vélemény