First, I'm pretty beginner of jQuery or AJAX.
I've got around 50+ links on a web page and each link has a div#popup which contain a table and a img. It means around 50 pictures are loading when the page loads and it slower the site quite a bit.
So I would like to know if there a way to to load the picture only when mouseover the link?\
Here is the code and script I'm using.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery Popup Div on hover Test</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
$(function() {
var moveLeft = 20;
var moveDown = 10;
$('a#trigger').hover(function(e) {
$('div#pop-up').show();
}, function() {
$('div#pop-up').hide();
});
$('a#trigger').mousemove(function(e) {
$("div#pop-up").css('top', e.pageY + moveDown).css('left', e.pageX + moveLeft);
});
});
</script>
<style type="text/css">
.wpm_pag.mng_lts_chp.grp .det a.ttl{
color: #0000ff;
font-size:16px;
line-height:12px;
height:14px;
display:block;
padding:0 0 2px 0
}
.wpm_pag.mng_lts_chp.grp .det div#pop-up table tr td img{
border: 1px solid #e74f25;
}
.wpm_pag.mng_lts_chp.grp .det div#pop-up table{
margin:0;
background-color:#656565;
}
.wpm_pag.mng_lts_chp.grp .det div#pop-up table tr.firstR{
background-color:black;
height: 30px;
font-size: 120%;
}
.wpm_pag.mng_lts_chp.grp .det div#pop-up table tr td.otherRow{
height: 20px;
}
.wpm_pag.mng_lts_chp.grp .det div#pop-up table tr td.otherRow b{
color: #3C3C3C;
}
/* Popup CSS */
.wpm_pag.mng_lts_chp.grp .det div#pop-up {
display: none;
position: absolute;
padding: 0px 5px 5px 5px;
background-color: #000;
color: #FFF;
border: 1px solid #1a1a1a;
font-size: 110%;
font-family:"Comic Sans MS", cursive, sans-serif;
}
</style>
</head>
<body>
<div class="wpm_pag mng_lts_chp grp">
<div class="det">
<p><a href="#" class="ttl" id="trigger">this link</a></p>
<!-- HIDDEN / POP-UP DIV -->
<div id="pop-up">
<table width="650px" cellspacing="0" cellpadding="2px">
<tr class="firstR">
<td colspan="3">Nenee! Ane Tokitoki Kanojo</td>
<td style="text-align: right;" width="25%">Rating</td>
</tr>
<tr>
<td width="200px" rowspan="4"><img height="200" width="200" src ="http://gooddealstore.us/icon/test.jpg" alt="xxx" /></td> /** php echo url
<td class="otherRow" colspan="3"></td>
</tr>
<tr>
<td class="otherRow"><b>Release:</b></td> /** php
<td class="otherRow"><b>Author:</b></td> echo
<td class="otherRow"><b>Artist:</b></td> **/
</tr>
<tr>
<td class="otherRow" colspan="3"><b>Genres:</b></td>
</tr>
<tr>
<td style="vertical-align: top;" colspan="3"></td>
</tr>
</table>
</div>
</div>
</body>
</html>
No comments:
Post a Comment