tim-peters
Neues Mitglied
Hey
habe folgendes Java-Script im Internet gefunden.
Das Script soll bewirken, dass Bilder bei Mouseover vergrößert werden. Allerdings sind meine Javascript Kenntnisse zu eingeschränkt um die Voraussetzungen zu verstehen, die dieses Script benötigt.:sad:
Kann mir jemand sagen, wo ich die diese finde, bzw. wie eine entsprechende HTML oder PHP seite aussehen müsste?
wäre echt super:mrgreen:
lg Tim-
Nachtrag:
Habe grade im Forum gesucht und gesehen, dass es schon einen Thread zu diesem Thema gibt, der mir weiterhilft.
hab die Lösung hier gefunden. Sry..
habe folgendes Java-Script im Internet gefunden.
Code:
var maxZoomFactor = 2.0;
function addGlobalStyle(css) {
var head = document.getElementsByTagName('head')[0];
if (head) {
var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = css;
head.appendChild(style);
}
}
addGlobalStyle('.tip {border:0;padding:1px;visibility:hidden;position:absolute;z-index:100;background-color:#f77;}');
addGlobalStyle('.tip img {border:5px solid white;}');
function mouseMove(event) {
var divObj = document.getElementById(this.alt);
var imgObj = divObj.firstChild;
var aspectRatio = imgObj.naturalWidth / imgObj.naturalHeight;
var x = 0, y = 0, maxWidth = 0, maxHeight = 0, zoomFaktor = 0;
// check which side of the cursor has more space left
if(event.pageX < (window.innerWidth / 2)) {
x = event.pageX + 10;
maxWidth = window.innerWidth - (event.pageX + 50);
} else {
x = event.pageX - (5 + divObj.offsetWidth); // show large image left from cursor
maxWidth = event.pageX - 20;
}
// zoom image to max size, so it still fits in the window
maxHeight = window.innerHeight - 20;
zoomFaktor = Math.min(maxZoomFactor, maxHeight / imgObj.naturalHeight, maxWidth / imgObj.naturalWidth);
imgObj.width = imgObj.naturalWidth * zoomFaktor;
imgObj.height = imgObj.naturalHeight * zoomFaktor;
// if the zoomed image still fits on the left side of the cursor, put it there
if(event.pageX - (5 + divObj.offsetWidth) >= 0) {
x = event.pageX - (5 + divObj.offsetWidth); // show large image left from cursor
}
y = event.pageY - (divObj.offsetHeight / 2); // show large image centered beside the cursor
// don't let it slide out the top or bottom of the window
y = Math.min(y, window.pageYOffset + window.innerHeight - divObj.offsetHeight - 5);
y = Math.max(y, window.pageYOffset + 5);
divObj.style.left = x + 'px';
divObj.style.top = y + 'px';
divObj.style.visibility = "visible";
}
function mouseOut(event) {
var divObj = document.getElementById(this.alt);
divObj.style.visibility = "hidden";
}
function addImage(smallImgObj, index) {
var smallSrc = smallImgObj.src;
// do not re-add images that already have a alt tag starting with 'largeDiv'
if(smallSrc.lastIndexOf("-") == (smallSrc.length - 6) && smallImgObj.alt.indexOf("largeDiv") != 0)
{
// cut the '-m', '-w' or '-s' part out of the source name
var largeSrc = smallSrc.substring(0, smallSrc.length - 6) + smallSrc.substring(smallSrc.length - 4, smallSrc.length);
smallImgObj.alt = "largeDiv:" + largeSrc;
var largeDivObj = document.createElement('div');
largeDivObj.innerHTML = "<div id='largeDiv:" + largeSrc + "' class='tip'><img src='" + largeSrc + "'></div>";
document.body.appendChild(largeDivObj);
smallImgObj.addEventListener('mouseover', mouseMove, true);
smallImgObj.addEventListener('mousemove', mouseMove, true);
smallImgObj.addEventListener('mouseout', mouseOut, true);
}
}
function addAllImages() {
//GM_log('addAllImages');
for (var i = 0; i < document.images.length; i++) {
addImage(document.images[i], i);
}
}
function DOMAttrModified(event) {
//GM_log('DOMAttrModified: event: ' + event.target.id);
if (event.target.id != '' && event.target.id.substring(0, 9) != "largeDiv:") { // don't reload on empty or self generated events
addAllImages();
}
}
// check for new images after document has been changed by AJAX scripts
document.addEventListener("DOMAttrModified", DOMAttrModified, false);
// add a larger image for all images
addAllImages();
Kann mir jemand sagen, wo ich die diese finde, bzw. wie eine entsprechende HTML oder PHP seite aussehen müsste?
wäre echt super:mrgreen:
lg Tim-
Nachtrag:
Habe grade im Forum gesucht und gesehen, dass es schon einen Thread zu diesem Thema gibt, der mir weiterhilft.
hab die Lösung hier gefunden. Sry..
Zuletzt bearbeitet: