Image Zoom
derSiddeler
- javascript
Hi@All.
Ich habe da ein kleines JavaScript image Zoom gebastelt aber irgendwie verzerrt mir das Dingens immer wieder die Bilder.
Hier mal der code:
<HTML>
<HEAD>
<SCRIPT>
function zoomImage (imageElement, xFactor, yFactor) {
imageElement.width = Math.round(document.imageName.width * xFactor);
imageElement.height = Math.round(document.imageName.height * yFactor);
if (imageElement.useMap) zoomMap (imageElement.useMap.substring(1), xFactor, yFactor);
}
function zoomMap (mapName, xFactor, yFactor) {
if (document.all) {
var map = document.all[mapName];
var areas = map.all.tags('AREA');
}
else if (document.getElementsByName) {
var map = document.getElementsByName(mapName)[0];
var areas = map.getElementsByTagName('AREA');
}
if (areas) {
for (var a = 0; a < areas.length; a++) {
var coords = areas[a].coords.split(/\s*,\s*/);
if (areas[a].shape.toLowerCase() == 'rect' || areas[a].shape.toLowerCase() == 'poly') {
for (var p = 0; p < coords.length; p += 2) {
coords[p] = Math.round(coords[p] * xFactor);
coords[p + 1] = Math.round(coords[p + 1] * yFactor);
}
}
else if (areas[a].shape.toLowerCase() == 'circle') {
coords[0] = Math.round(coords[0] * xFactor);
coords[1] = Math.round(coords[1] * yFactor);
coords[2] = Math.round(coords[2] * (xFactor < yFactor ? xFactor
: yFactor));
}
areas[a].coords = coords.join(', ');
}
}
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT TYPE="button" VALUE="Rein" ONCLICK="zoomImage (document.imageName, 2, 2);">
<INPUT TYPE="button" VALUE="Raus" ONCLICK="zoomImage (document.imageName, 0.5, 0.5);">
<BR>
<IMG NAME="imageName" SRC="1.jpg" USEMAP="#aMap">
</BODY>
</HTML>
Das JS soll nach klick auf den Button das Image vergrößern/Verkleinern.
Die Bilder hier z.B. 1.jpg haben aber alle eine unterschiedliche größe.
Kennt vielleicht jemand noch ein andres Scriptbeispiel oder so?
Big Thx für's Lesen schonmal ;-)
Greetz,
derSiddeler
OOps, alles klar, habe den Fehler gefunden.
habe aber doch noch ein gutes Beispiel gefunden hier mal die URL:
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/zoom.asp
Thx. ;-)