Willkommen ~Gast!
Registrieren || Einloggen || Hilfe/FAQ || Staff
Probleme mit der Registrierung im Forum? Melde dich unter registerEin Bild.
Autor Beitrag
000
22.10.2009, 16:15
chriss



Ich habe folgendes Problem:

Ein gegebenes JavaScript (nicht von mir …) ruft, beim Mouseover von Thumbnails, die Großansicht des jeweiligen Bildes auf. Das große Bild folgt dem Mauszeiger bis man das Bild verlässt, wie man das von solchen Scripten eben kennt / gewohnt ist.

Wenn das Thumbnail nun aber nahe am rechte Rand des Browserfensters liegt ragt das Bild (wird rechts unten vom Mauszeiger positioniert) über den Rand, eine Scrollleiste entsteht aber man sieht natürlich die Großansicht nicht mehr … ;)

Ich bin kein großer JavaScripter und kenne mich mit dem DOM entsprechend wenig aus, aber ich geh’ mal davon aus das ich irgendwie den Mittelpunkt des aktuellen Browserfensters auslesen kann und je nachdem wo sich der Mauszeiger befindet, ich das Bild rechts oder links vom selbigen positionieren müsste …

Aufruf:
Quellcode:<a href="grossesbild.jpg" onmouseover="showBigPic('grossesbild.jpg');" onmouseout="hideBigPic();"><img src="kleinesbild.jpg" class="browseProductImage"></a> Script:
Quellcode:function changeimage2(val) {
    document.getElementById('changeimage').src=val;
}

var IE = document.all?true:false;

/* picture mouseover */

function getMousePos(e)
{
    if (!e) {
        var e = window.event||window.Event;
    }

    if('undefined'!=typeof e.pageX)
    {
        mouseX = e.pageX;
        mouseY = e.pageY;
    }
    else
    {
        mouseX = e.clientX + document.documentElement.scrollLeft;
        mouseY = e.clientY + document.documentElement.scrollTop;
    }
    
    if(bigPicUrl) {
        checkPosition();
    }
}

function checkPosition() {

    if(!IE) {
        scrollOffset = window.pageYOffset;
        bodyOffsetHeight = window.innerHeight;
    //    alert(window.innerHeight);
    }
    else {
        scrollOffset = document.documentElement.scrollTop;
        bodyOffsetHeight = document.body.offsetHeight;
    }
    
    if((document.getElementById('bigPicContainer').offsetHeight / 2) + 10 + mouseY > bodyOffsetHeight + scrollOffset) {
        mouseY = bodyOffsetHeight + scrollOffset - (document.getElementById('bigPicContainer').offsetHeight /2) - 10;
    }
    
    if(mouseY - (document.getElementById('bigPicContainer').offsetHeight / 2) - scrollOffset < 10) {
        mouseY = (document.getElementById('bigPicContainer').offsetHeight / 2) + 10 + scrollOffset;
    }
    document.getElementById('bigPicContainer').style.top=parseInt(mouseY) - (document.getElementById('bigPicContainer').offsetHeight / 2) + "px";
    document.getElementById('bigPicContainer').style.left=(parseInt(mouseX) + 20) + "px";
    
    /*
    if(mouseX >= 50) {
        alert("Rechts ausrichten");
    }
    
    if(mouseY >= 50) {
        alert("Links ausrichten");
    }
    */
}    

function showBigPic(url) {
    bigPicUrl = url;
    document.getElementById('bigPicContainer').firstChild.src=bigPicUrl;
    document.getElementById('bigPicContainer').style.display='block';    
    checkPosition();
}

function showBigPic2(url) {
    bigPicUrl = document.getElementById('changeimage').src;
    document.getElementById('bigPicContainer').firstChild.src=bigPicUrl;
    document.getElementById('bigPicContainer').style.display='block';    
    checkPosition();
}

function hideBigPic() {
    document.getElementById('bigPicContainer').style.display='none';
    document.getElementById('bigPicContainer').firstChild.src='http://www.beauty-ideal.de/templates/beautyideal/images/preloader.gif';
    bigPicUrl = '';
}

var bigPicUrl;

document.onmousemove = getMousePos;

--

zum Seitenanfang zum Seitenende Profil || Suche
001
22.10.2009, 17:23
Bluthund



Also ist deine Frage jetzt wie du den Mittelpunkt des Browserfensters bekommst?

window.innerHeight und window.innerWidth lassen dich die Größe des Anzeigebereichs auslesen (womit du auch die Mitte über eine Division durch 2 bekommst).
Der IE6 versteht das wie üblich nicht. Damit es in diesem Unbrowser funktioniert, müsstest du document.documentElement.clientWidth und document.documentElement.clientHeight im "standardkonformen" Modus und document.body.clientWidth und document.body.clientHeight im Quirks-Modus verwenden.
(Beispielhafte Verwendung)

Für die Feststellung, ob dein Bild im Anzeigebereich dargestellt werden kann, brauchst du eigentlich aber die Mitte auch garnicht. Du kannst einfach prüfen ob die Position des img-Objekts + dessen Größe größer als die Anzeigebreite bzw. -höhe ist und dann entsprechend eine Anpassung der Position vornehmen.
Als Grenzfall wäre hier evtl. zu beachten, was passieren soll wenn das Bild weder links noch rechts vom Cursor positioniert werden kann ohne den Anzeigebereich zu überschreiten.

--

The C language combines all the power of assembly language with all the ease-of-use of assembly language.
"humorig is n blödwort :>" by -CarniGGeLjumpR-


Dieser Beitrag wurde am 22.10.2009 um 17:29 von Bluthund bearbeitet.
zum Seitenanfang zum Seitenende Profil || Suche