За последние 24 часа нас посетили 17884 программиста и 1600 роботов. Сейчас ищут 857 программистов ...

Скрипт для увеличения изображения при наведении курсора

Тема в разделе "JavaScript и AJAX", создана пользователем TypucT, 9 окт 2011.

  1. TypucT

    TypucT Активный пользователь

    С нами с:
    9 окт 2011
    Сообщения:
    2
    Симпатии:
    0
    Здравствуйте.
    Друзья, очень нужна помощь.
    Ситуация следующая: Делаю сайт на amiro.cms. На сайте, в каталоге товаров, при наведении мыши на изображение всплывает увеличенное изображение. Но всплывает оно не в том месте, где хотелось бы.
    Из-за незнания java обратился с вопросом в тех-поддержку амиро, вот ответ:
    Можно переопределить скрипт из system_js.php в common.js (функция называется AMI.UI.OverImage, участки стилей: 'position: absolute', this.oBlock.style.display = 'block', this.oBlock.style.left = (aPosition[0] + oParent.offsetWidth) + 'px', this.oBlock.style.top = aPosition[1] + 'px').
    Прикрепил тот кусок скрипта. И common.js, куда этот кусок и нужно вставить собственно.
    Расскажите пожалуйста подробно, что мне сделать нужно, в какое именно место вставлять скрипт, как его переопределить и т.п.?
    Заранее спасибо.

    image.txt
    [js]AMI.UI.OverImage = {
    oBlock: null,
    hTimeout: null,

    onOver: function(evt){
    this.stopWaiting();
    var oTarget = AMI.Browser.Event.getTarget(evt);
    if(oTarget != null && oTarget.tagName && oTarget.tagName == 'IMG'){
    imageLink = oTarget.getAttribute('data-ami-mbover');
    if(imageLink != null && imageLink != ''){
    if(this.oBlock == null){
    this.oBlock = AMI.Browser.DOM.create('DIV', '', 'amiOverImage', 'position: absolute', document.body);
    }
    this.oBlock.style.display = 'none';

    this.hTimeout = setTimeout(
    function(_this, _oTarget, _imageLink){return function(){
    var oImage = new Image();
    oImage.onload = function(__this, __oTarget){return function(){__this.showBlock(__oTarget)}}(_this, _oTarget);
    oImage.src = _imageLink;
    _this.oBlock.innerHTML = '';
    _this.oBlock.appendChild(oImage);
    }}(this, oTarget, imageLink),
    700
    );
    }
    }
    },

    onOut: function(evt){
    this.stopWaiting();
    var oTarget = AMI.Browser.Event.getTarget(evt);
    if(oTarget != null && oTarget.tagName && oTarget.tagName == 'IMG'){
    imageLink = oTarget.getAttribute('data-ami-mbover');
    if(this.oBlock != null && imageLink != null && imageLink != ''){
    this.oBlock.style.display = 'none';
    }
    }
    },

    stopWaiting: function(evt){
    clearTimeout(this.hTimeout);
    },

    showBlock: function(oParent){
    var aPosition = AMI.Browser.getObjectPosition(oParent);
    this.oBlock.style.display = 'block';
    this.oBlock.style.left = (aPosition[0] + oParent.offsetWidth) + 'px';
    this.oBlock.style.top = aPosition[1] + 'px';
    }
    }[/js]
    common.js
    [js]// user's functions

    function isIE5() { return (navigator.userAgent.indexOf("MSIE 5") > -1); }
    function isIE6() { return ((navigator.userAgent.indexOf("MSIE 6") > -1) && (navigator.userAgent.indexOf("Opera") == -1)); }
    function isIE() { return (isIE5() || isIE6());}

    function fixpng()
    {
    for (var i = 0; i < document.images.length; i++)
    {
    var img = document.images;
    imgSrc = img.src;
    if (imgSrc.substr(imgSrc.length-3).toLowerCase() == "png")
    {
    var w, h;
    w = img.width, h = img.height;
    img.src = "_mod_files/ce_images/spacer.gif";
    img.width = w, img.height = h;
    img.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=\'" + imgSrc + "\', sizingMethod='scale');";
    }
    }
    }

    var isIE = isIE();
    if (isIE) window.attachEvent("onload", fixpng);

    function show_details(script) {
    if ( (script.substring(0,7).toLowerCase()) != "http://" && (script.substring(0,8).toLowerCase() != "https://" ) ){
    script = frontBaseHref + script;
    }

    var w_width = 850;
    var w_height = 780;

    if (w_height > window.screen.availHeight)
    w_height = window.screen.availHeight;
    if (w_width > window.screen.availWidth)
    w_width = window.screen.availWidth;

    window.open(script, "pic", "resizable=yes, status=yes, scrollbars=yes, width=" + w_width + ", height=" + w_height);
    //return false;
    }[/js]
     
  2. TypucT

    TypucT Активный пользователь

    С нами с:
    9 окт 2011
    Сообщения:
    2
    Симпатии:
    0
    Тему можно закрывать. Сам справился. Спасибо.