JavaScript DHTML/HTML/Image Img

Материал из Web эксперт
Перейти к: навигация, поиск

Alternative Information Example

  
    
<html>
<body>
<script>
    function function1() {
        document.all.myImage.alt = "http://www.wbex.ru";
    }
</script>
<img id="myImage" onmouseover="function1();" src="http://www.wbex.ru/style/logo.png">
</body>
<html>



An animating image

  
/*
Javascript Essentials
by Jason J. Manger
Publisher: Mcgraw-Hill Osborne Media; 
ISBN: 0078822343
*/
<!--
  Program 4-6
  Author note:
  There have been problems with Netscape"s images[] array. The
  image may not animate within a frameset document.
-->
<html>
<head>
<script language="JavaScript">
<!--
  var alternate = 0;
  function animIcon() {
    if (parent.alternate == 0) {
       document.images[0].src = "rb.gif";
       alternate = 1;
    }
    else {
       document.images[0].src = "yb.gif";
       alternate = 0;
    }
    setTimeout("animIcon()", 1000);
  }
//-->
</script>
</head>
<body onLoad="parent.animIcon()">
<img src="yb.gif" hspace=4>This is an animating image.
</body>
</html>



A Scripted Image Object and Rotating Images

  
/*
JavaScript Bible, Fourth Edition
by Danny Goodman 
Publisher: John Wiley & Sons CopyRight 2001
ISBN: 0764533428
*/

<HTML>
<HEAD>
<TITLE>Image Object</TITLE>
<SCRIPT LANGUAGE="JavaScript">
// global declaration for "desk" images array
var imageDB
// pre-cache the "desk" images
if (document.images) {
    // list array index names for convenience
    var deskImages = new Array("desk1", "desk2", "desk3", "desk4")
    // build image array and pre-cache them
    imageDB = new Array(4)
    for (var i = 0; i < imageDB.length ; i++) {
        imageDB[deskImages[i]] = new Image(120,90)
        imageDB[deskImages[i]].src = deskImages[i] + ".gif"
    }
}
// change image of "individual" image
function loadIndividual(form) {
    if (document.images) {
        var gifName = form.individual.options[form.individual.selectedIndex].value
        document.thumbnail1.src = gifName + ".gif"
    }
}
// change image of "cached" image
function loadCached(form) {
    if (document.images) {
        var gifIndex = form.cached.options[form.cached.selectedIndex].value
        document.thumbnail2.src = imageDB[gifIndex].src
    }
}
// if switched on, cycle "cached" image to next in queue
function checkTimer() {
    if (document.images && document.Timer.timerBox.checked) {
        var gifIndex = document.selections.cached.selectedIndex
        if (++gifIndex > imageDB.length - 1) {
            gifIndex = 0
}
        document.selections.cached.selectedIndex = gifIndex
        loadCached(document.selections)
        var timeoutID = setTimeout("checkTimer()",5000)
    }
}
// reset form controls to defaults on unload
function resetSelects() {
    for (var i = 0; i < document.forms.length; i++) {
        for (var j = 0; j < document.forms[i].elements.length; j++) {
            if (document.forms[i].elements[j].type == "select-one") {
                document.forms[i].elements[j].selectedIndex = 0    
            }
        }
    }
}
// get things rolling
function init() {
    loadIndividual(document.selections)
    loadCached(document.selections)
    setTimeout("checkTimer()",5000)
}
</SCRIPT>
</HEAD>
<BODY onLoad="init()" onUnload="resetSelects ()">
<H1>Image Object</H1>
<HR>
<CENTER>
<TABLE BORDER=3 CELLPADDING=3>
<TR><TH></TH><TH>Individually Loaded</TH><TH>Pre-cached</TH></TR>
<TR><TD ALIGN=RIGHT><B>Image:</B></TD>
<TD><IMG SRC="cpu1.gif" NAME="thumbnail1" HEIGHT=90 WIDTH=120></TD>
<TD><IMG SRC="desk1.gif" NAME="thumbnail2" HEIGHT=90 WIDTH=120></TD>
</TR>
<TR><TD ALIGN=RIGHT><B>Select image:</B></TD>
<FORM NAME="selections">
<TD>
<SELECT NAME="individual" onChange="loadIndividual(this.form)">
<OPTION VALUE="cpu1">Wires
<OPTION VALUE="cpu2">Keyboard
<OPTION VALUE="cpu3">Desks
<OPTION VALUE="cpu4">Cables
</SELECT>
</TD>
<TD>
<SELECT NAME="cached" onChange="loadCached(this.form)">
<OPTION VALUE="desk1">Bands
<OPTION VALUE="desk2">Clips
<OPTION VALUE="desk3">Lamp
<OPTION VALUE="desk4">Erasers
</SELECT></TD>
</FORM>
</TR></TABLE>
<FORM NAME="Timer">
<INPUT TYPE="checkbox" NAME="timerBox" onClick="checkTimer()">Auto-cycle through
 pre-cached images
</FORM>
</CENTER>
</BODY>
</HTML>



Change image

  
<html>
<head>
<script type="text/javascript">
function setSrc(){
    var x=document.images
    x[0].src="http://www.wbex.ru/style/logoRed.png"
}
</script>
</head>
<body>
<img src="http://www.wbex.ru/style/logo.png" width="107" height="98" />
<form>
<input type="button" onclick="setSrc()" value="Change image">
</form>
</body>
</html>



Change image align

  
<html>
<head>
<title></title>
<script type="text/javascript">
function procImage() {
   var img = document.images[0];
   var imgAttr = img.align + " " + img.alt + " " + img.src + " " + img.width + " " + img.height;
   alert(imgAttr);
   img.src="http://www.wbex.ru/style/logo.png";
   img.width="100";
   img.height="100";
   img.alt="Alternative";
   img.align="left";
   img.title="Upright";
   
   imgAttr = img.align + " " + img.alt + " " + img.src + " " + img.width + " " + img.height;

   alert(imgAttr);
   document.close();
} 
</script>
<body onload="procImage();">
<img src="asdf.gif" alt="asdf" />
</body>
</html>



Change image in mouse in and out event

  
<HTML>
<HEAD>
<SCRIPT language="JavaScript">
if (document.images){
     var pic1_init= new Image();
     pic1_init.src="home.gif";
    
     var pic1_new= new Image();
     pic1_new.src="home1.gif"; 
}
function change_it(the_name){
     if (document.images){
          document.images[the_name].src= eval(the_name+"_new.src");
     }
}
function change_back(the_name)
{
     if (document.images)
     {
          document.images[the_name].src= eval(the_name+"_init.src");
     }
}
</SCRIPT>
</HEAD>
<BODY>
<A HREF="#" onMouseOver="change_it("pic1")" onMouseOut="change_back("pic1")">
  <IMG SRC="home.gif" name="pic1" id="pic1">
</A>
</BODY>
</HTML>



Change image src

  
<html>
<head>
<title></title>
<script type="text/javascript">
function procImage() {
   var img = document.images[0];
   var imgAttr = img.align + " " + img.alt + " " + img.src + " " + img.width + " " + img.height;
   alert(imgAttr);
   img.src="http://www.wbex.ru/style/logo.png";
   img.width="100";
   img.height="100";
   img.alt="Alternative";
   img.align="left";
   img.title="Upright";
   
   imgAttr = img.align + " " + img.alt + " " + img.src + " " + img.width + " " + img.height;

   alert(imgAttr);
   document.close();
} 
</script>
<body onload="procImage();">
<img src="asdf.gif" alt="asdf" />
</body>
</html>



Change image title

  
<html>
<head>
<title></title>
<script type="text/javascript">
function procImage() {
   var img = document.images[0];
   var imgAttr = img.align + " " + img.alt + " " + img.src + " " + img.width + " " + img.height;
   alert(imgAttr);
   img.src="http://www.wbex.ru/style/logo.png";
   img.width="100";
   img.height="100";
   img.alt="Alternative";
   img.align="left";
   img.title="Upright";
   
   imgAttr = img.align + " " + img.alt + " " + img.src + " " + img.width + " " + img.height;

   alert(imgAttr);
   document.close();
} 
</script>
<body onload="procImage();">
<img src="asdf.gif" alt="asdf" />
</body>
</html>



Change image width

  
<html>
<head>
<script type="text/javascript">
function setWidth(){
    var x=document.images
    x[0].width="300"
}
</script>
</head>
<body>
<img src="http://www.wbex.ru/style/logo.png" width="107" height="98" />
<form>
<input type="button" onclick="setWidth()" value="Change Width">
</form>
</body>
</html>



Change the height of an image

  
<html>
<head>
<script type="text/javascript">
function setHeight(){
    var x=document.images
    x[0].height="250"
}
</script>
</head>
<body>
<img src="http://www.wbex.ru/style/logo.png" width="107" height="98" />
<form>
<input type="button" onclick="setHeight()" value="Change image height">
</form>
</body>
</html>



Change vspace for image

  
<html>
<head>
<title>Build-o-Table</title>
<script type="text/javascript">
function procImage() {
   var img = document.getElementById("img1");
   img.vspace="10";
   
} 
</script>
<body onload="procImage();">
<img id="img1" src="http://www.wbex.ru/style/logo.png" />
<table id="table1">
<tr><td>adsf</td></tr>
</table>
</body>
</html>



Changing Between Still and Motion Images

  
<HTML>
<HEAD>
<TITLE>IMG dynsrc Property</TITLE>
<SCRIPT LANGUAGE="JavaScript">
var trainImg = new Image(160,120)
trainImg.src = "http://www.wbex.ru/style/logo.png"
trainImg.dynsrc = "http://www.wbex.ru/style/logoRed.png"
function setLoop() {
    var selector = document.forms[0].looper
    document.myIMG.loop = selector.options[selector.selectedIndex].value
}
function setImage(type) {
    if (type == "jpg") {
        document.myIMG.dynsrc = ""
        document.myIMG.src = trainImg.src
    } else {
        document.myIMG.src = ""
        document.myIMG.start = "fileopen"
        setLoop()
        document.myIMG.dynsrc = trainImg.dynsrc
    }
}
</SCRIPT>
</HEAD>
<BODY>
<H1>IMG dynsrc Property</H1>
<HR>
<FORM>
Choose image type: 
<INPUT TYPE="radio" NAME="imgGroup" CHECKED onClick="setImage("png")">Still
<INPUT TYPE="radio" NAME="imgGroup" onClick="setImage("mpg")">Video
<P>Play video how many times after loading: 
<SELECT NAME="looper" onChange="setLoop()">
    <OPTION VALUE=1 SELECTED>Once
    <OPTION VALUE=2>Twice
    <OPTION VALUE=-1>Continuously
</SELECT></P>
</FORM>
<HR>
<IMG NAME="myIMG" SRC="http://www.wbex.ru/style/logo.png" HEIGHT=120 WIDTH=160>
</BODY>
</HTML>



Count images in a document

  
<html>
<body>
<img border="0" src="http://www.wbex.ru/style/logo.png" width="48" height="48">
<br>
<img border="0" src="http://www.wbex.ru/style/logoRed.png" width="107" height="98">
<p>
<script type="text/javascript">
document.write("This document contains: " + document.images.length + " images.")
</script>
</p>
</body>
</html>



Does image download completely

  
    
<html>
<body>
<img id="myImage" 
     src="http://www.wbex.ru/style/logo.png" 
     alt="http://www.wbex.ru">
<script language="JavaScript">
    var m = document.getElementById("myImage").ruplete;
    if (m == true) {
        alert("The image is fully loaded");
    } else {
        alert("The image is not completely loaded")
    }
</script>
</body>
</html>



"galleryImg" Example

  
    
<html>
<body>
<script>
    function function1() {
        document.all.myImage.galleryImg = "yes";
    }
</script>
<input type="Button" id="b1" value="Turn Galleryimg "on"" onClick="function1();">
<img id="myImage" 
     src="http://www.wbex.ru/style/logo.png" 
     alt="http://www.wbex.ru" 
     width="74" 
     height="99">
</body>
</html>



Get the file name specified in the href or src property

  
    
<html>
<body>
<script language="JavaScript">
    function function1() {
        alert(document.getElementById("myLink").nameProp);
    }
</script>
<a id="myLink" href="http://www.wbex.ru/" target=_blank>wbex.ru Home Page</a>
<button onclick="function1();">wbex.ru Home Page nameProp</button>
</body>
</html>



"height" Example

  
    
<html>
<body>
<script>
    function function1() {
        document.all.myImage.height = "150";
    }
</script>
<img id="myImage" 
     src="http://www.wbex.ru/style/logo.png" 
     alt="http://www.wbex.ru">
<button onclick="function1();">Change Height to 150</button>
</body>
</html>



Image align Example

  
    
<html>
<head>
<script language="JavaScript">
function function1() {
   document.all.myImage.align = "middle";
}
</script>
</head>
<body>
<img id="myImage" src="http://www.wbex.ru/style/logo.png" width="74" height="99">
Sample Text
<button onclick="function1();">Align Middle</button>
</body>
</html>



Image Animation

  
<html>
<head>
<script language="JavaScript">
<!--
 var alternate = 0;
 var timerId;
 var images = new Array("yb.gif", "rb.gif");        // Image URLs 
 function startAnimation() {
    alternate = (alternate == 0) ? 1 : 0;           // Alternate images
    document.images[0].src = images[alternate];     // Update image
    timerId = setTimeout("startAnimation()", 1000); // 1 second update
 }
//-->
</script>
</head>
<body>
<img border=0 hspace=5 width=10 src="http://www.wbex.ru/style/logo.png">Hover over 
<a href="#" onMouseOver="startAnimation()" onMouseOut="clearTimeout(timerId)">
this</a> link to start the animation.<p>
</body>
</html>



Image array

  
/*
JavaScript Programming for the Absolute Beginner
by Andy Harris
Publisher: Muska & Lipman/Premier-Trade
Language: English
ISBN: 0761534105
*/
<html>
<head>
<title>Image Array Demo</title>
<script>
var description = new Array("blank", "triangle", "circle", "square");
var pictures = new Array(3);
var counter = 0;

function initialize(){
  // sets up the array with some startin values
  // Andy Harris
  pictures[0] = new Image(50, 50);
  pictures[0].src = "blank.gif";
  pictures[1] = new Image(50, 50);
  pictures[1].src = "triangle.gif";
  pictures[2] = new Image(50, 50);
  pictures[2].src = "circle.gif";
  pictures[3] = new Image(50, 50);
  pictures[3].src = "square.gif";
} // end initialize 
function upDate(){
  //increments the counter and shows the next description
  counter++;
  if (counter > 3){
    counter = 0;
  } // end if
  document.imgDisplay.src = pictures[counter].src;
  document.myForm.txtDescription.value = description[counter];
} // end upDate
</script>
</head>
<body onLoad = "initialize()">
<center>
<h1>Image Array Demo<hr></h1>
<form name = "myForm">
<img src = "blank.gif"
     name = "imgDisplay"
     height = 100
     width = 100>
<br>
<input type = "text"
       name = "txtDescription"
       value = "blank">
<br>
<input type = "button"
       value = "next"
       onClick = "upDate()">
</form>
</center>
<hr>
</body>
</html>



Image dynsrc

  
    
<html>
<body>
<script language="JavaScript">
function setSource() {
    document.all.myImage.dynsrc = "http://www.wbex.ru/style/logo.png";
}
</script>
<img id="myImage" start="mouseover" alt="" width="200" height="200">
<button onclick="setSource();">Set Source</button>
</body>
</html>



Image element

  
 
var elem = document.createElement("img");
elem.setAttribute("src", "images/logo.jpg");
elem.setAttribute("height", "40");
elem.setAttribute("width", "120");
elem.setAttribute("alt", "GiantCo Logo");
document.body.appendChild(elem);



Image Error Finder

  
<html>
<head>
<title>Image Error Finder</title>
<script language="JavaScript">
// Image Error Finder JavaScript
//  If there is a broken-image then you can replace that image by a custom image.
//  Works with IE only.
// (c) 2002 Premshree Pillai,
// Created : July 4th, 2002
// Web : http://www.qiksearch.ru,
//       http://javascript.qik.cjb.net,
// E-mail : qiksearch@rediffmail.ru
function checkImages()
{
 if(document.getElementById)
 {
  var imagesArr = new Array();
  var setDefaultErrImg="image_nf.gif"; // Default image to be displayed on error
  var setDefaultErrTxt="Image Not Found"; // Default text to be displayed on error 
  imagesArr = document.getElementsByTagName("img");
  for(var i=0; i<imagesArr.length; i++)
  {
   if(!imagesArr[0].getAttribute("nc")=="1")
   {
    var tempImgAttrib=imagesArr[i].getAttribute("alt");
    imagesArr[i].setAttribute("alt","");
    if(imagesArr[i].width=="28" && imagesArr[i].height=="30")
    {
     imagesArr[i].src=setDefaultErrImg;
     imagesArr[i].setAttribute("alt",setDefaultErrTxt);
    }
    else
    {
     imagesArr[i].setAttribute("alt",tempImgAttrib);
    }
   }
  }
 }
}
window.onload=checkImages;
</script>
</head>
<body bgcolor="#FFFFFF">
<br>
<br>
<table width="450" align="center"><tr><td>
<font face="verdana,arial,helvetica" size="-1" color="#000000">
This JavaScript checks if all the images in the document exists. If a particular image does not exist, that image will be replaced by a custom image! Works with IE only.
<br><br>This is how it works. In IE, if a particular image does not show up, then its dimensions are 28 x 30 (without the "alt"). So, the script checks all images with this size after removing the "alt" tag. If such an image exists, it is a broken-image.
<br><br>The only drawback is that if your image has dimensions of 28 x 30, even if it exists the script will treat it as a broken-image. But there is a solution! You can prevent the script from checking for such scripts by placing an attribute-value pair <font face="courier" color="#0000FF">nc="1"</font>. To use the script properly, here are the guidelines :
<ul>
    <li>Do not specify the <font face="courier" color="#0000FF">width</font> and <font face="courier" color="#0000FF">height</font> attributes in the &lt;IMG&gt; tag. (The browser will render the image with its actual size)</li>
    <li>If, you have an image with dimensions 28 x 30, then add the attribute-value pair <font face="courier" color="#0000FF">nc="1"</font> in the &lt;IMG&gt; tag. The script will ignore such images.</li>
</ul>
For example consider an image, "trial.gif" that does not exist. It is written as: <font face="courier" color="#0000FF">&lt;img src="trial.gif" alt="Trial Image"&gt;</font>.This is how it will show up :<br><br><img src="trial3.gif" alt="Trial Image">
<br>The above image is the custom image <font face="courier" color="#0000FF">image_nf.gif</font> that is displayed because the image "trial.gif" could not be found.
<hr style="color:#FF9900">
<a href="http://www.qiksearch.ru"><font color="#808080">&#169; 2002 Premshree Pillai.</font></a>
</font>
</td></tr></table>
</body>
</html>



Image Event Handling

  
<HTML>
<HEAD>
<TITLE>Image Event Handling</TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
function imageLoaded() {
 document.bgColor="#FFFFFF"
 alert(document.images[0].src+" has been loaded.")
}
function imageAborted() {
 alert("imageAborted")
}
function imageError() {
 alert("Error loading image!")
}
//-->
</SCRIPT>
</HEAD>
<BODY>
<H1>Image Event Handling</H1>
<P>An image is loaded after this paragraph.</P>
<IMG SRC="http://www.wbex.ru/style/logo.png"
 onLoad="imageLoaded()"
 onAbort="imageAborted()"
 onError="imageError()">
</BODY>
</HTML>



Image Long Description

  
    
<html>
<body>
<img id="myImg" src="http://www.wbex.ru/style/logo.png" longdesc="wbex"s Logo">
<button onclick="alert(myImg.longDesc);">Long Desc</button>
</body>
</html>



Image Roller Machine

  
/*
JavaScript Application Cookbook
By Jerry Bradenbaugh
Publisher: O"Reilly 
Series: Cookbooks
ISBN: 1-56592-577-7
*/


<A href="http://www.wbex.ru/Code/JavaScriptDownload/ImageRollerMachine.zip">ImageRollerMachine.zip( 34 k)</a>


Image "src" Property

  
    
<html>
<body>
<img id="myImg" 
     src="" 
     alt="" onClick="function1();">
<button onclick="function1();">Click here to load image</button>
<script language="JavaScript">
    function function1() {
        document.all.myImg.src = "http://www.wbex.ru/style/logo.png";
    }
</script>
</body>
</html>



Image width Example

  
    
<html>
<body>
<script language="JavaScript">
    function function1() {
        alert(document.getElementById("myImage").width);
    }
</script>
<img id="myImage" 
     src="http://www.wbex.ru/style/logo.png" 
     alt="http://www.wbex.ru" 
     width="300" 
     height="300">
<input type="button" value="Image width" onclick="function1();">
</body>
</html>



Img onmouseover and onmouseout actions

 
<html>
<head>
<title>Rollover</title>
<script type="text/javascript">
function rollover() {
    var images = document.getElementsByTagName("img");
    for (var i = 0; i < images.length; i++) {
        images[i].onmouseover = function() { 
           this.src = this.id + "_over.png"; 
        }
        images[i].onmouseout = function() { 
           this.src = this.id + "_default.png"; 
        }
    }
}
window.onload = rollover;
</script>
</head>
<body>
<p><img id="home" name="img_home" src="a.png" alt="Home"></p>
</body>
</html>



Low resolution Image src

  
    
<html>
<body>
<script language="JavaScript">
    document.all.myImage.lowsrc = "http://www.wbex.ru/style/logo.png";
</script>
<img id="myImage" src="http://www.wbex.ru/style/logo.png" width="99" height="76">
</body>
</html>



Methods and Properties of the Image Object

  
+---------+----------------+-------------------------------------------------+
   Type       Item           Description
+---------+----------------+-------------------------------------------------+
  Method
+---------+----------------+-------------------------------------------------+
           handleEvent()     This method invokes the handler for the specified 
                             event. 
+---------+----------------+-------------------------------------------------+
 Property
+---------+----------------+-------------------------------------------------+  
           border            Width of border around the image.
+---------+----------------+-------------------------------------------------+
           complete          Tells you if the image has finished loading.
+---------+----------------+-------------------------------------------------+
           height            Height of the image.
+---------+----------------+-------------------------------------------------+
           hspace            Padding on left and right of the image.
+---------+----------------+-------------------------------------------------+
           lowsrc            Alternate image for low-resolution displays.
+---------+----------------+-------------------------------------------------+
           name              Name of the image.
+---------+----------------+-------------------------------------------------+
           src               URL of the image.
+---------+----------------+-------------------------------------------------+
           vspace            Padding on top and bottom of the image.
+---------+----------------+-------------------------------------------------+
           width             Width of the image.
+---------+----------------+-------------------------------------------------+



Monitors the load process and the display of pictures

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
  <HEAD>
    <TITLE>JsLib 1.3 - Exemple - images.js</TITLE>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
    <META NAME="Author" CONTENT="Etienne CHEVILLARD">
    <!-- images.js -->
    <SCRIPT TYPE="text/javascript" LANGUAGE="Javascript">
/* images.js
 * Role : controle le chargement et l"affichage des images
 * Projet : JsLib
 * Auteur : Etienne CHEVILLARD (echevillard@users.sourceforge.net)
 * Version : 1.3
 * Creation : 15/02/2005
 * Mise a jour : 23/02/2005
 */
// --- Variables globales ---
// gestion des images
var imgs_ids=new Array(100);
var imgs_obj=new Array(100);
var imgs_cpt=0;
// --- Fonctions ---
// charge en memoire l"image d"URL specifiee
function chargerImage(idImage, url) {
  if ((!idImage) || (idImage=="")) return false;
  if ((!url) || (url=="")) return false;
  for (var i=0; i<imgs_cpt; i++) {
    if (imgs_ids[i]==idImage) {
      imgs_obj[i]=new Image();
      imgs_obj[i].name=idImage;
      imgs_obj[i].src=url;
      return true;
    }
  }    
  imgs_ids[imgs_cpt]=idImage;
  imgs_obj[imgs_cpt]=new Image();
  imgs_obj[imgs_cpt].name=idImage;
  imgs_obj[imgs_cpt].src=url;
  imgs_cpt=imgs_cpt+1;
  return true;
} // fin chargerImage(idImage, url)
// retourne l"URL de l"image specifiee
function obtenirURLImage(idImage) {
  if ((!idImage) || (idImage=="")) return "";
  for (var i=0; i<imgs_cpt; i++) {
    if (imgs_ids[i]==idImage)
      return (imgs_obj[i].src);
  }
  return "";
} // fin obtenirURLImage(idImage)
// ouvre l"image specifiee dans une fenetre de type popup
function ouvrirImageDansPopup(idImage, commentaire) {
  var imgl=250;
  var imgh=150;
  if ((!idImage) || (idImage=="")) return false;
  if (!commentaire)
    commentaire=idImage;
  for (var i=0; i<imgs_cpt; i++) {
    if ((imgs_ids[i]==idImage) && ((imgs_obj[i].ruplete) || (parseInt(imgs_obj[i].width) > 0))) {
      imgl=parseInt(imgs_obj[i].width);
      imgh=parseInt(imgs_obj[i].height);
      while ((imgl > screen.width-20) || (imgh > screen.height-20)) {
        imgl=parseInt(imgl*0.8);
        imgh=parseInt(imgh*0.8);
      }
      var fprp="left="+Math.floor((screen.width-imgl)/2)+",top="+Math.floor((screen.height-(imgh+40))/2);
      fprp+=",width="+imgl+",height="+imgh+",status=0,directories=0,toolbar=0";
      fprp+=",location=0,menubar=0,scrollbars=0,resizable=0";
      var ftxt="<HTML><HEAD><TITLE>"+commentaire;
      ftxt+="</TITLE></HEAD><BODY>";
      ftxt+="<DIV STYLE="position:absolute;visibility:visible;left:0px;top:0px;">";
      ftxt+="<IMG SRC=""+imgs_obj[i].src;
      ftxt+="" WIDTH=""+imgl;
      ftxt+="" HEIGHT=""+imgh;
      ftxt+="" ALT=""+commentaire;
      ftxt+="" /></DIV></BODY></HTML>";
      var fnew=window.open("about:blank", idImage, fprp);
      fnew.document.open();
      fnew.document.write(ftxt);
      fnew.document.close();
      if (window.focus)
        fnew.focus();
      return true;
    }
  }
  return false;
}  // fin ouvrirImageDansPopup(idImage)
// verifie que l"image specifiee est correctement chargee
function verifierChargementImage(idImage) {
  if ((!idImage) || (idImage=="")) return false;
  for (var i=0; i<imgs_cpt; i++) {
    if (imgs_ids[i]==idImage)
      return ((imgs_obj[i].ruplete) || (parseInt(imgs_obj[i].width) > 0));
  }
  return false;
} // fin verifierChargementImage(idImage)
    </SCRIPT>
  </HEAD>
  <BODY>
 
    <H1>JsLib 1.3</H1>
    <HR>
    <H2>Exemple - images.js</H2>
    <NOSCRIPT>
      <P><I>Erreur : votre navigateur ne reconnait pas le Javascript ou est configur&eacute; pour ne
      pas prendre en compte le code Javascript. Dans ce dernier cas, vous pouvez modifier la
      configuration dans les pr&eacute;f&eacute;rences/options de votre navigateur.</I>
      <HR>
    </NOSCRIPT>
    <FORM ACTION="GET" NAME="f1" onSubmit="return false">
    
      <P>Charger l"image patagonie.jpg&nbsp;:
        <INPUT TYPE=BUTTON NAME="b1" VALUE="Charger"
          onClick="alert(chargerImage("image1", "./extra/patagonie.jpg"));">
                    
      <P>V&eacute;rifier que l"image est charg&eacute;e&nbsp;:
        <INPUT TYPE=BUTTON NAME="b2" VALUE="V&eacute;rifier"
          onClick="alert(verifierChargementImage("image1"));">
      <P>Afficher l"URL de l"image&nbsp;:
        <INPUT TYPE=BUTTON NAME="b3" VALUE="Afficher l"URL"
          onClick="alert(obtenirURLImage("image1"));">
      <P>Ouvrir l"image dans une fen&ecirc;tre de type popup&nbsp;:
        <INPUT TYPE=BUTTON NAME="b4" VALUE="Popup"
          onClick="ouvrirImageDansPopup("image1", "Paysage de Patagonie");">
      
      <P>Modifier l"URL de l"image ci-dessous&nbsp;:
        <INPUT TYPE=BUTTON NAME="b5" VALUE="Modifier l"URL"
          onClick="document.image2.src=obtenirURLImage("image1");">
      <P><IMG NAME="image2" SRC="./extra/home.gif" ALT="Image temporaire">
        
    </FORM>
    
  </BODY>
</HTML>


<A href="http://www.wbex.ru/Code/JavaScriptDownload/extra.zip">extra.zip( 182 k)</a>


Mouse in image and out

  
/*
JavaScript Application Cookbook
By Jerry Bradenbaugh
Publisher: O"Reilly 
Series: Cookbooks
ISBN: 1-56592-577-7
*/ 
 
<HTML>
<HEAD>
<TITLE>Mouse in image and out</TITLE>
<SCRIPT LANGUAGE="JavaScript1.1">
<!--
var imgNames = new Array("img");
//-->
</SCRIPT>
<SCRIPT LANUAGE="JavaScript">
// images.js
// Set image variables
var imgPath   = "images/";
var arrayHandles = new Array("out", "over");
// Dynamically create image arrays
for (var i = 0; i < arrayHandles.length; i++) {
  eval("var " + arrayHandles[i] + " = new Array()");
  }
// Preload the images
for (var i = 0; i < imgNames.length; i++) {
  imagePreLoad(imgNames[i], i);
  }

// Define a function to preload the images
function imagePreLoad(imgName, idx) {
  for(var j = 0; j < arrayHandles.length; j++) {
    eval(arrayHandles[j] + "[" + idx + "] = new Image()");
    eval(arrayHandles[j] + "[" + idx + "].src = "" + imgPath + imgName + arrayHandles[j] + ".gif"");
    }
  }
// Perform the image rollovers
function imageSwap(imagePrefix, imageIndex, arrayIdx) {
  document[imagePrefix].src = eval(arrayHandles[arrayIdx] + "[" + imageIndex + "].src");
  }
// This function displays the text passed in the browser status bar
function display(stuff) { window.status = stuff; }
</SCRIPT>
</HEAD>
<BODY BGCOLOR=FFFFEE>
<A HREF="javascript: void(0);" 
     onMouseOver="imageSwap("img", 0, 1); display(""); return true;"
     onMouseOut="imageSwap("img", 0, 0); display("");">
<IMG SRC="http://www.wbex.ru/style/logo.png"
     NAME=img
     WIDTH=90
     HEIGHT=50
     BORDER=0></A>
</BODY>
</HTML>



"readyState" Example

  
    
<html>
<body>
<script language="JavaScript">
    function function1() {
        var m = document.all.myI.readyState; 
        alert(m);
    }
</script>
<img id="myI" 
     src="http://www.wbex.ru/style/logo.png" 
     alt="" 
     width="300" 
     height="225">
<input type="button" value="Get the state of the image object" onclick="function1();">
</body>
</html>



Replace image

  
<html>
<body bgcolor="White">
<img src="europe.gif" alt="Europe">
<hr noshade>
<form>
<input type="button" value="See UK" onClick="document.images[0].src="http://www.wbex.ru"">
</form>
</body>
</html>



Scripting image.complete

  
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript1.1">
function loadIt(theImage,form) {
    form.result.value = ""
    document.images[0].src = theImage
}
function checkLoad(form) {
    form.result.value = document.images[0].ruplete
}
</SCRIPT>
</HEAD>
<BODY>
<IMG SRC="cpu2.gif" WIDTH=120 HEIGHT=90 onLoad="">
<FORM>
<INPUT TYPE="button" VALUE="Load black" onClick="loadIt("http://www.wbex.ru/style/logo.png",this.form)">
<INPUT TYPE="button" VALUE="Load red" onClick="loadIt("http://www.wbex.ru/style/logoRed.png",this.form)"><P>
<input TYPE="text" NAME="result">
</FORM>
</BODY>
</HTML>



Scrolling Image

  
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Scrolling Image</title>
<style type="text/css">
.link{font-family:verdana,arial,helvetica; font-size:8pt; color:#DD0000; font-weight:normal}
.link:hover{font-family:verdana,arial,helvetica; font-size:8pt; color:#FF9900; font-weight:normal}
.prem_hint{font-family:verdana,arial,helvetica; font-size:8pt; color:#000000; font-weight:normal}
.header{font-family:arial,verdana,helvetica; font-size:30pt; color:#FF9900; font-weight:bold}
</style>
</head>
<body bgcolor="#FFFFFF">
<center>
<span class="header">Scrolling Image</span>
<br>
</center>
<!--BEGIN REQUIRED-->
<script language="javascript">
// Location of this script:
// http://www.qiksearch.ru/javascripts/scrolling_image.htm
//*********************************************
//* Scrolling Image                           *
//* Created 20/04/02                          *
//* Scrolls an image in both directions       *
//* (c) Premshree Pillai,                     *
//* http://www.qiksearch.ru/                 *
//* E-mail : premshree@hotmail.ru            *
//* Use the script freely as long as this     *
//* message is intact                         *
//*********************************************
window.onerror = null;
 var bName = navigator.appName;
 var bVer = parseInt(navigator.appVersion);
 var NS4 = (bName == "Netscape" && bVer >= 4);
 var IE4 = (bName == "Microsoft Internet Explorer" && bVer >= 4);
 var NS3 = (bName == "Netscape" && bVer < 4);
 var IE3 = (bName == "Microsoft Internet Explorer" && bVer < 4);
//------------------C U S T O M I S E------------------------
 var img_path="http://www.wbex.ru/style/logo.png";
 var time_length =50; //Scroll delay in milliseconds
 var begin_pos = 265; //Start position of scroll hint
//-----------------------------------------------------------
var i=begin_pos;
var j=i; 
var scroll_length = 350; //The scroll length
var original_time=time_length;
if (NS4 || IE4) {
 if (navigator.appName == "Netscape") {
 layerStyleRef="layer.";
 layerRef="document.layers";
 styleSwitch="";
 }else{
 layerStyleRef="layer.style.";
 layerRef="document.all";
 styleSwitch=".style";
 }
}
//SCROLL RIGHT
function scroll_right(layerName)
{
 if (NS4 || IE4)
 { 
   if(i<(begin_pos+scroll_length))
   {
    eval(layerRef+"[""+layerName+""]"+
    styleSwitch+".visibility="visible"");
    eval(layerRef+"[""+layerName+""]"+ styleSwitch+".left=""+(i)+""");
    i++;
    j++;
   }
  if(i==j)
  {
   setTimeout("scroll_right(""+layerName+"")",time_length);
  }
 }
}
//SCROLL LEFT
function scroll_left(layerName)
{
 if (NS4 || IE4)
 {
   if(i>(begin_pos-scroll_length))
   {
    eval(layerRef+"[""+layerName+""]"+
    styleSwitch+".visibility="visible"");
    eval(layerRef+"[""+layerName+""]"+ styleSwitch+".left=""+(i)+""");
    i--;
    j--;
   }
  if(i==j)
  {
   setTimeout("scroll_left(""+layerName+"")",time_length);
  }
 }
}
function scroll_out()
{
 time_length=10000000000000;
}
function reset()
{ 
 time_length=original_time;
}
document.write("<div id="prem_hint" style="position:relative; left:" + begin_pos + "" class="prem_hint"><img src="" + img_path + ""><br><font size="-1"><b>You can even scroll a Text<br><font color="#003399">You can scroll multiple lines.</font></b></font></div><center><a href="#" class="link" onmouseover="javascript:reset(); scroll_left(&#39;prem_hint&#39;);" onmouseout="javascript:scroll_out();"><b><< Scroll Left</b></a> <b>|</b> <a href="#" class="link" onmouseover="javascript:reset(); scroll_right(&#39;prem_hint&#39;);" onmouseout="javascript:scroll_out();"><b>Scroll Right >></b></a></center>");
</script>
<!--END REQUIRED-->
<br>
<table align="center" width="400"><tr><td>
<font face="verdana,arial,helvetica" size="-1" color="#000000">
Using this script you can scroll an image in the "left" or "right" direction.
<br><br>To use this  Javascript,view the source of this document. Copy the &lt;script&gt; section
and place it wherever you want it in your page.
<br><br>
<font face="courier">img_path</font> : The image path ("qiksearch.gif" here)<br>
<font face="courier">time_length</font> : Speed of scroll (50 here, meaning after 50 milliseconds the hint will change position by 1 pixel i.e a speed of 20 pixels/second)<br>
<font face="courier">begin_pos</font> : Beginning position of your scrollable content. (265 here)
</font>
</td></tr></table>
<br>
<center><a href="mailto:premshree@hotmail.ru" class="link">&#169 2002 Premshree Pillai. All rights reserved.</a></center>
<br>
<center><a href="http://www.qiksearch.ru/javascripts/scrolling_image.htm"><font face="arial,verdana,helvetica" size="-2" color="#CCCCCC">http://www.qiksearch.ru/javascripts/scrolling_image.htm</font></a></center>
</body>
</html>



Set image alt message

  
<html>
<head>
<title></title>
<script type="text/javascript">
function procImage() {
   var img = document.images[0];
   var imgAttr = img.align + " " + img.alt + " " + img.src + " " + img.width + " " + img.height;
   alert(imgAttr);
   img.src="http://www.wbex.ru/style/logo.png";
   img.width="100";
   img.height="100";
   img.alt="Alternative";
   img.align="left";
   img.title="Upright";
   
   imgAttr = img.align + " " + img.alt + " " + img.src + " " + img.width + " " + img.height;

   alert(imgAttr);
   document.close();
} 
</script>
<body onload="procImage();">
<img src="asdf.gif" alt="asdf" />
</body>
</html>



Set image height

  
<html>
<head>
<title></title>
<script type="text/javascript">
function procImage() {
   var img = document.images[0];
   var imgAttr = img.align + " " + img.alt + " " + img.src + " " + img.width + " " + img.height;
   alert(imgAttr);
   img.src="http://www.wbex.ru/style/logo.png";
   img.width="100";
   img.height="100";
   img.alt="Alternative";
   img.align="left";
   img.title="Upright";
   
   imgAttr = img.align + " " + img.alt + " " + img.src + " " + img.width + " " + img.height;

   alert(imgAttr);
   document.close();
} 
</script>
<body onload="procImage();">
<img src="asdf.gif" alt="asdf" />
</body>
</html>



Simple Image Replacement

  
<html>
<head>
<title>Replacing Images</title>
<script language="JavaScript">
var ix = 0
function changeImages(milliseconds) {
   window.setInterval("changeImage()", milliseconds)
}
function changeImage() {
     ++ix;
     ix %= 6;
     var imageRef = document.images[0];
     imageRef.src = "http://www.wbex.ru/style/"+ix+".gif";
}
</script>
</head>
<body onload="changeImages(500)">
<p align="center"><img id="changeme" src="http://www.wbex.ru/style/1.gif"></p>
</body>
</html>



Testing an Image"s align Property

  
<HTML>
<HEAD>
<TITLE>IMG align Property</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function setAlignment(sel) {
    document.myIMG.align = sel.options[sel.selectedIndex].text
}
</SCRIPT>
</HEAD>
<BODY>
<H1>IMG align Property</H1>
<HR>
<FORM>
Choose the image alignment:
<SELECT onChange="setAlignment(this)">
    <OPTION>absbottom
    <OPTION>absmiddle
    <OPTION>baseline
    <OPTION SELECTED >bottom
    <OPTION >left
    <OPTION>middle
    <OPTION>right
    <OPTION>texttop
    <OPTION>top
</SELECT>
</FORM>
<HR>
<P>Text. Text. Text. Text. Text. Text. Text. Text. Text. 
Text. Text. Text. Text. Text. Text. Text. Text. Text. 
<IMG NAME="myIMG" SRC="http://www.wbex.ru/style/logo.png" HEIGHT=90 WIDTH=120>
Text. Text. Text. Text. Text. Text. Text. Text. 
Text. Text. Text. Text. Text. Text. Text. Text. Text. Text. 
Text. Text. Text. Text. Text. Text. Text. </P>
</BODY>
</HTML>



Use array to store the image names

  
<html>
<head>
<title>A Simple Page</title>
<script language="JavaScript">
var myarray = new Array("","","","","","","","","","");
for (x in myarray) 
{
    myarray[x] = "img" + x + ".gif";
}
alert(myarray);
</script>
</head>
<body>
</body>
</html>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/HTML/Image_Img&oldid=2564»