[Script] JavaScript Bild funktionen

Dieses Thema im Forum "Webentwicklung" wurde erstellt von Murdoc, 7. Dezember 2007 .

  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.
     
  2. 7. Dezember 2007
    AW: JavaScript Bild funktionen

    Möchtest du nicht die verschiedenen Scripte eben online stellen?
     
  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
     
  4. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.