Всем привет,
такая задача: на странице 6 ссылок в виде разных картинок. По нажатию на каждую должно всплывать окошко с описанием.
Как сделать такое окошко для 1 ссылки я нашла в интернете, но как сделать для 6 ссылок с разными id? Не переписывать же скрипт 6 раз :-)
Подскажите пожалуйста....
html:
<body>
<div id="wrapper">
<img id="bg" src="images/bg-wrapper.jpg" alt="" width="1200" height="850" />
<a href="" id="windowOpen6"></a>
<div id="window">
<div id="windowTop">
<div id="windowTopContent">
Дом 6
</div>
<img src="images/window_min.jpg" id="windowMin" />
<img src="images/window_max.jpg" id="windowMax" />
<img src="images/window_close.jpg" id="windowClose" />
</div>
<div id="windowBottom">
<div id="windowBottomContent">
</div>
</div>
<div id="windowContent">
<img src="images/dom6.jpg" alt="" width="275" height="185" />
</div>
<img src="images/window_resize.gif" id="windowResize" />
</div>
</div>
</body>
скрипт:
$(document).ready(
function()
{
$('#windowOpen6').bind('click',function() {
if($('#window').css('display') == 'none') {
$(this).TransferTo(
{
to:'window',
className:'transferer2',
duration: 200,
complete: function()
{
$('#window').show();
}
});
}
this.blur();
$("#bg").css('opacity', '0.7');
return false;
});
$('#windowClose').bind('click',function(){
$('#window').TransferTo(
{
to:'windowOpen',
className:'transferer2',
duration: 200
}).hide();
$("#bg").css('opacity', '1');
});
$('#windowMin').bind('click',function(){
$('#windowContent').SlideToggleUp(300);
$('#windowBottom, #windowBottomContent').animate({height: 10}, 300);
$('#window').animate({height:40},300).get(0).isMinimized = true;
$(this).hide();
$('#windowResize').hide();
$('#windowMax').show();
});
$('#windowMax').bind('click',function(){
var windowSize = $.iUtil.getSize(document.getElementById('windowContent'));
$('#windowContent').SlideToggleUp(300);
$('#windowBottom, #windowBottomContent').animate({height: windowSize.hb + 13}, 300);
$('#window').animate({height:windowSize.hb+43}, 300).get(0).isMinimized = false;
$(this).hide();
$('#windowMin, #windowResize').show();
});
$('#window').Resizable({
minWidth: 575,
minHeight: 385,
maxWidth: 575,
maxHeight: 385,
dragHandle: '#windowTop',
handlers: {
se: '#windowResize'
},
onResize : function(size, position) {
$('#windowBottom, #windowBottomContent').css('height', size.height-33 + 'px');
var windowContentEl = $('#windowContent').css('width', size.width - 25 + 'px');
if (!document.getElementById('window').isMinimized) {
windowContentEl.css('height', size.height - 48 + 'px');
}
}
});
}
);
Спасибо, буду признательна за подсказку...