Szöveg megjelenítése hover-re input elem felett
A köveketkező kód FF alatt nem működik. Opera is IE alatt jó. (ha rávisszük a kúrzort az input elemre egy kis szövegnek kellene fölötte megjelenni)
Van vkinek ötlete?
■ <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#csshelp {
position: absolute;
visibility: hidden;
}
</style>
<script language="JavaScript">
function megjelenit(szoveg, idname) {
var x = getElementPositionleft(idname);
var y = getElementPositiontop(idname);
document.getElementById("csshelp").style.left = x+10+"px";
document.getElementById("csshelp").style.top = y-30+"px";
document.getElementById("csshelp").innerHTML = szoveg;
document.getElementById("csshelp").style.visibility = 'visible';
setTimeout("eltuntet()",5000);
}
function getElementPositiontop(elemID){
var offsetTrail = document.getElementById(elemID);
var offsetTop = 0;
while (offsetTrail){
offsetTop += offsetTrail.offsetTop;
offsetTrail = offsetTrail.offsetParent;
}
return offsetTop;
}
function getElementPositionleft(elemID){
var offsetTrail = document.getElementById(elemID);
var offsetLeft = 0;
while (offsetTrail){
offsetLeft += offsetTrail.offsetLeft;
offsetTrail = offsetTrail.offsetParent;
}
return offsetLeft;
}
function eltuntet() {
document.getElementById("csshelp").style.visibility = 'hidden';
}
</script>
</head>
<body>
<br />
<br />
<div id="csshelp" onmouseout="eltuntet();"></div>
<input name="inputy" onmouseover="megjelenit('Ennek kéne megjelennie ff-en is.', 'inputy')" type="text" onmouseout="eltuntet();" />
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
#csshelp {
position: absolute;
visibility: hidden;
}
</style>
<script language="JavaScript">
function megjelenit(szoveg, idname) {
var x = getElementPositionleft(idname);
var y = getElementPositiontop(idname);
document.getElementById("csshelp").style.left = x+10+"px";
document.getElementById("csshelp").style.top = y-30+"px";
document.getElementById("csshelp").innerHTML = szoveg;
document.getElementById("csshelp").style.visibility = 'visible';
setTimeout("eltuntet()",5000);
}
function getElementPositiontop(elemID){
var offsetTrail = document.getElementById(elemID);
var offsetTop = 0;
while (offsetTrail){
offsetTop += offsetTrail.offsetTop;
offsetTrail = offsetTrail.offsetParent;
}
return offsetTop;
}
function getElementPositionleft(elemID){
var offsetTrail = document.getElementById(elemID);
var offsetLeft = 0;
while (offsetTrail){
offsetLeft += offsetTrail.offsetLeft;
offsetTrail = offsetTrail.offsetParent;
}
return offsetLeft;
}
function eltuntet() {
document.getElementById("csshelp").style.visibility = 'hidden';
}
</script>
</head>
<body>
<br />
<br />
<div id="csshelp" onmouseout="eltuntet();"></div>
<input name="inputy" onmouseover="megjelenit('Ennek kéne megjelennie ff-en is.', 'inputy')" type="text" onmouseout="eltuntet();" />
</body>
</html>
Van vkinek ötlete?
offsetParent
tényleg csak rémlik
Tasi
de van
(Amúgy nem igazodtam ki az addon-nal amit említettél.)
pontatlan voltam
http://www.webreference.com/dhtml/diner/realpos1/2.html
sajnálom, hogy nem boldogultál a debuggerrel, anélkül sok mindenre nem jöttem volna rá már életemben...
Tasi
megvan
Kerék újrafeltalálása
Miért kell a kereket újra feltalálni? Elég, ha adsz az input mezőnek egy TITLE paramétert a szöveggel, automatikusan meg fog jelenni a szöveg.
TITLE túl "statikus"
- rögtön megjelenne (én pl a title-t képeknél szoktam meg, eddig nem is tudtam hogy input-nál is lehet ilyen, ergo erről többen nem tudhatnak, mezei userek) Viszont a fenti megoldás rögtön megjelenik.
- ha megadható lenne hogy meddig látszódjon alapból a szöveg. Fenti esetben ez megadható. Title viszont 5 másodperc után mindig eltűnik.
- ha formázható lenne a megjelenítendő szöveg. Fenti eseteben ez is megoldható.
Amúgy köszi az infót, mert újat tanultam.
Szemantikus HTML
Szvsz a title tag szándékosan nem nyílik meg azonnal. Egyébként javaslom, hogy ha jól akarod megcsinálni, akkor diszkrét JavaScript-tel csináld meg, hogy a title értékét vegye és azt jelenítse meg. Szvsz sokkal elegánsabb, mert akinek nincs bekapcsolva JS, az is tudja használni.
Egyébként a title működését már rég megszokták a felhasználók, sztem nem kellene erőszakosan valami mást csinálni.
Valahol láttam erre egy CSS megoldást, az volt a lényege, hogy volt vmi ilyen kód:
Szerintem, ezt a megoldást azért kellene használni, mert 1. kielégíti az igényeid mindegyikét 2. még a Lynx-et használó user is fogja tudni használni 3. nincs benne "indiszkrét" JavaScript. :)
Remélem, segített.
spanon belül nem lehet div
Igaz.