Hogyan tudnám HTML-ben, ha ráviszem az egeret egy képre és kiír egy szöveget?
válasza: válasza:Én ezt jQueryben oldanám meg a dolgot.:) Annyi a dolgod vele, hogy egy javascript fájlba leszeded az előre kidolgozott jQuery rendszert a jquery.com-ról (kisebb méretűvel jársz jobban) :D
A forráskód:
html:
<html>
<head>
<title>Test jQuerry</title>
<link rel="stylesheet" type="text/css" href="css/style.css"
</head>
<body>
<div id="hu"></div>
<img src="a.png" alt="nincs kep!" class="hover" hovertext="This is a nice picture!" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/test.js"></script>
</body>
</html>
css:
#hu {
display: none;
position: absolute;
font-size: 14px;
background-color: #eee;
color: #404040;
border:1px solid #999;
padding: 7px;
border-radius: 7px;
}
jQuery:
$(document).ready(function() {
$('.hover').mousemove(function(e){
var hovertext=$(this).attr('hovertext');
$('#hu').text(hovertext).show();
$('#hu').css('top', e.clientY+10).css('left', e.clientX+10);
}).mouseout(function() {
$('#hu').hide();
});
});
A kód lényegében ennyi lenne:D
A html-ben létrehozol egy üres div-et és adsz neki egy #hu-t, amire később hivatkozhatsz jqueryben és css-ben; egy képet, aminek adsz egy hover class-t és egy hovertext-et, amibe az kerül, amit majd kiír kép fölé. A head-be megadod a css elérhetőségeit, a body legalján pedig a két javascript fájl elérhetőségeit: egyiket az előre kidolgozott jquery sablonnal, amit leszedtél; a másik meg a saját magad által létrehozott javascript fájl, ahova már a saját kódod írod pl azt amit én előre adtam forráskódban.
A css-ben csak a divet dekorálod pl betűszín háttérszíne méret, a végén adtam a dobozra egy 7pixeles lekerekítést is hogy azért nézzen ki valahogy, de ezen kívül adhatsz rá betűtípust boxshadow-t vagy stb... stb...
A jQuery az nem csinál mást minthogy, amint a dokumentum betöltött minden egérmozgásra a képen 10 pixellel az egér kurzor mellé teszi és ahogy kihúztad onnan eltűnteti.
Sok szerencsét! :)
válasza:Kapcsolódó kérdések:
Minden jog fenntartva © 2025, www.gyakorikerdesek.hu
GYIK | Szabályzat | Jogi nyilatkozat | Adatvédelem | Cookie beállítások | WebMinute Kft. | Facebook | Kapcsolat: info(kukac)gyakorikerdesek.hu
Ha kifogással szeretne élni valamely tartalommal kapcsolatban, kérjük jelezze e-mailes elérhetőségünkön!