#1 7. Dezember 2007 Zuletzt von einem Moderator bearbeitet: 14. April 2017 JavaScript Bild funktionen dese 5 funktionen erweitern das image objekt. Code: /*************************************************** * verkleinert ein bild * * @param (int) maxWidth * @param (int) maxHEight */ Image.prototype.resize = function(maxWidth, maxHeight) { if(this.src == '') return false; else if(this.width > maxWidth || this.height > maxHeight) { var posWidth = maxWidth / this.width; var posHeight = maxHeight / this.heigth; if(posWidth > posHeight) { this.width = Math.round(this.width * posHeight); this.height = maxHeight; } else { this.width = maxWidth; this.height = Math.round(this.height * posWidth); } } } /*************************************************** * bild(er) anhand von namen verkleindern * * @param (string) name * @param (int) maxWidth * @param (int) maxHeight */ Image.prototype.resizeByName = function(name, maxWidth, maxHeight) { this.findByName(name); for(i in this.doc) { this.src = this.doc[i].src; var wh = new Array(this.width, this.height); this.resize(maxWidth, maxHeight); this.doc[i].width = this.width; this.doc[i].height = this.height; if(wh[0] != this.width || wh[1] != this.height) { //verkleinert if(!img.isLinked(this.doc[i])) { var a = document.createElement('a'); a.href = this.src; a.target = 'blank'; a.appendChild(this.doc[i].cloneNode(true)); a.title = 'Klicken für volle Größe'; this.doc[i].parentNode.replaceChild(a, this.doc[i]); } } } } /*************************************************** * bild(er) anhand von namen im document suchen * * @param (string) name * @return (array) imgs */ Image.prototype.findByName = function(name) { var doc = document.getElementsByTagName('img'); var imgs = new Array(); for(i in doc) { if(doc[i].name == name) imgs.push(doc[i]); } this.doc = imgs; return imgs; } /*************************************************** * bild anhand von src im document suchen * * @param (bool) once (nur ein element speichern) * @return (object) node (erstes gefundenes bild) */ Image.prototype.find = function(once) { if(typeof this.src == 'undefined' || this.src == '') return false; var tags = document.getElementsByTagName('img'); var imgs = new Array(); for(i in tags) { if(tags[i].src == this.src) { imgs.push(tags[i]); } } this.doc = ((once) ? imgs : imgs[0]); this.contextNode = imgs[0]; return this.contextNode; } /*************************************************** * prüfen ob ein bild verlinkt wurde * * @return (bool) */ Image.prototype.isLinked = function(img) { if(img.nodeName.toUpperCase() != 'IMG') return false; var current = img; do { current = current.parentNode; if(current.nodeName == 'A') return true; } while(current.nodeName != 'DIV' && current.nodeName != 'BODY'); return false; } wie funktionierts: resizeByName() sucht nach bilder mit namen "name" und verkleinert + verlinkt sie. resize() verkleinert das angegebene bild find() sucht im document nach einem bild mit angegebener src findByName() sucht im document nach einem oder mehreren bild(ern) mit angegebenem namen isLinked() überprüft ob das bild (src) verlinkt wurde beispiele: HTML: <html> </head> <script type="text/javascript" src="./image.js"></script> </head> <body> <a href="#"><img src="https://xup.raidrush.ws/a_rr_style/misc/rr_weihnachts_header.gif" name="resizer" /></a> <img src="https://xup.raidrush.ws/a_rr_style/misc/rr_weihnachts_header.gif" name="resizer" /> <script type="text/javascript"> img = new Image(); img.resizeByName('resizer', 200, 100); </script> </body> </html> beide bilder würden verkleinert aber nur bild2 extra verlinkt, da bild1 schon verlinkt wurde! HTML: <html> </head> <script type="text/javascript" src="./image.js"></script> </head> <body> <img src="https://xup.raidrush.ws/a_rr_style/misc/rr_weihnachts_header.gif" name="resizer" /> <script type="text/javascript"> img = new Image(); img.src = 'https://xup.raidrush.ws/a_rr_style/misc/rr_weihnachts_header.gif'; img.find().style.border = '1px solid black'; </script> </body> </html> hier wird im document nach dem bild mit der src "https://xup.raidrush.ws/a_rr_style/misc/rr_weihnachts_header.gif" gesucht und danach verändert. wenn mehrere bilder gefunden wurden ist ein array img.doc verfügbar. in img.contextNode ist das erste gefundene bild enthalten was bei img.find() zurückgegeben wurde. HTML: <html> </head> <script type="text/javascript" src="./image.js"></script> </head> <body> <img src="https://xup.raidrush.ws/a_rr_style/misc/rr_weihnachts_header.gif" name="resizer" /> <script type="text/javascript"> img = new Image(); img.findByName('resizer')[0].style.display = 'none'; </script> </body> </html> hier wurde nach allen bildern mit dem namen "resizer" gesucht und das erste verändert. danach ist immer ein array img.doc verfügbar wo alle gefundenen bilder drinnen sind. HTML: <html> </head> <script type="text/javascript" src="./image.js"></script> </head> <body> <img src="https://xup.raidrush.ws/a_rr_style/misc/rr_weihnachts_header.gif" name="resizer" /> <script type="text/javascript"> img = new Image(); img.src = "https://xup.raidrush.ws/a_rr_style/misc/rr_weihnachts_header.gif"; img.resize(200, 100); img.find(); img.contextNode.height = img.height; img.contextNode.widht = img.width; </script> </body> </html> hier wurde ein bild verkleinert, danach im document gesucht und das erste gefundene verändert. HTML: <html> </head> <script type="text/javascript" src="./image.js"></script> </head> <body> <a href="#"><img src="https://xup.raidrush.ws/a_rr_style/misc/rr_weihnachts_header.gif" name="resizer" /></a> <script type="text/javascript"> img = new Image(); img.findByName('resizer'); if(img.isLinked(img.contextNode)) alert('Bild ' + img.contextNode.src + ' ist verlinkt worden!'); </script> </body> </html> hier wurde nach dem bild mit dem namen "resizer" gesucht und überprüft ob es innerhalb eines links steht. + Multi-Zitat Zitieren
#2 7. Dezember 2007 AW: JavaScript Bild funktionen Möchtest du nicht die verschiedenen Scripte eben online stellen? + Multi-Zitat Zitieren
#3 8. Dezember 2007 AW: JavaScript Bild funktionen wäre ich auch dafür, dass ich nurnoch klicken muss xD die faulheit ist sehr groß heutzutage xD + Multi-Zitat Zitieren